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