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 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 (

    <>

      <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>

    </>

  );

};

export default SurveyForm;