Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo } from "react";
import { Controller, useForm } from "react-hook-form";
import {
  FormControlLabel,
  Radio,
  RadioGroup,
  styled,
  Typography,
} from "@mui/material";
import { Public, LockClock } from "@mui/icons-material";

import { axios } from "@utils";
import { getTimeDiff } from "@utils/dates";
import { updateFeed } from "@store/feed/feed.actions";
import { addNotification } from "@store/notification/notification.actions";

import Widget from "@components/UI/Widget";
import FormErrorFeedback from "@components/UI/form/FormErrorFeedback";

const AnswerContainer = styled("div")`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--border-primary);
  border-radius: 50px;
  cursor: pointer;
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.5rem;
  &:hover {
    border-color: var(--font-color);
    text-shadow: 0 0 1px var(--font-color);
  }
`;

const SurveyForm = ({
  active = false,
  question = "¿Cómo consideras el ambiente laboral?",
  answers = [],
  votes = [],
  time = 0,
  voteUrl = "/feed/vote/d454717c-ba6f-485c-b94c-4fbb5f5bed94",
  resultType = "pu",
}) => {
  const totalVotes = useMemo(
    () =>
      votes.reduce((acc, cur) => {
        if (!cur) return acc;
        return acc + cur;
      }, 0),
    [votes]
  );
  const timeRemaining = useMemo(() => getTimeDiff(time), [time]);

  const { control, handleSubmit } = useForm();

  const sendVote = handleSubmit(({ vote }) => {
    const formData = new FormData();
    formData.append("vote", vote);

    axios
      .post(voteUrl, formData)
      .then((response) => {
        const { success, data } = response.data;

        if (!success) {
          const errorMessage =
            typeof data === "string"
              ? data
              : "Error interno, por favor intente mas tarde.";
          throw new Error(errorMessage);
        }

        updateFeed({ feed: data, uuid: data.feed_uuid });
        addNotification({ style: "success", msg: "Voto emitido con exito" });
      })
      .catch((err) => {
        addNotification({ style: "danger", msg: err.message });
      });
  });

  function getPorcentage(n, total) {
    return (n / total) * 100;
  }

  return (
    <Widget>
      <Widget.Body>
        <Typography variant="h3">{question}</Typography>

        {resultType === "pu" ? (
          <Typography
            variant="overline"
            title="El número de votos es visible para todos los usuarios"
            sx={{ paddingBottom: (theme) => theme.spacing(0.5) }}
          >
            <Public sx={{ fontSize: "1.3rem" }} /> Público
          </Typography>
        ) : (
          <Typography
            variant="overline"
            title="Los resultados de la votación son privados"
            sx={{ paddingBottom: (theme) => theme.spacing(0.5) }}
          >
            <LockClock sx={{ fontSize: "1.3rem" }} /> Privado
          </Typography>
        )}

        <form onChange={sendVote}>
          <Controller
            name="vote"
            control={control}
            rules={{ required: "Por favor seleccione una opción" }}
            defaultValue=""
            disabled={!active}
            render={({ field, fieldState: { error } }) => (
              <>
                <RadioGroup {...field}>
                  {answers.map((answer, index) => {
                    if (answer === null) return null;

                    return (
                      <AnswerContainer
                        key={answer}
                        sx={{
                          "::before": {
                            content: "",
                            position: "absolute",
                            left: 0,
                            top: 0,
                            height: "100%",
                            backgroundColor: "#0002",
                            zIndex: 4,
                            width: totalVotes
                              ? `${getPorcentage(votes[index], totalVotes)}%`
                              : 0,
                          },
                        }}
                      >
                        <FormControlLabel
                          value={index + 1}
                          control={<Radio sx={{ padding: 0 }} />}
                          label={answer}
                          sx={{ margin: 0, gap: 1 }}
                          disabled={field.disabled}
                        />

                        {totalVotes ? (
                          <Typography variant="overline">
                            {getPorcentage(votes[index], totalVotes)}%
                          </Typography>
                        ) : null}
                      </AnswerContainer>
                    );
                  })}
                </RadioGroup>
                {error && (
                  <FormErrorFeedback>{error.message}</FormErrorFeedback>
                )}
              </>
            )}
          />

          <Typography variant="overline">
            Tiempo restante: {timeRemaining}
          </Typography>

          {!active && (
            <Typography variant="overline">
              El formulario ya ha finalizado
            </Typography>
          )}
        </form>
      </Widget.Body>
    </Widget>
  );
};

export default SurveyForm;