Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo } from 'react'
import { useForm } from 'react-hook-form'
import { 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 CheckboxInput from '@components/UI/inputs/Checkbox'

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(({ data: response }) => {
        const { success, data } = response

        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}>
          {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
                  }
                }}
              >
                <CheckboxInput
                  name='vote'
                  value={index + 1}
                  label={answer}
                  control={control}
                  disabled={!active}
                  labelStyles={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 0.5,
                    margin: 0
                  }}
                  checkBoxStyles={{ padding: 0 }}
                />

                {totalVotes ? (
                  <Typography variant='overline'>
                    {getPorcentage(votes[index], totalVotes)}%
                  </Typography>
                ) : null}
              </AnswerContainer>
            )
          })}

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

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

export default SurveyForm