Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useMemo, useRef, useState } from 'react'

import { useForm } from 'react-hook-form'

import { styled } from '@mui/material'

import { Public, LockClock } from '@mui/icons-material'

import { axios } from '@utils'

import { updateFeed } from '@store/feed/feed.actions'

import { addNotification } from '@store/notification/notification.actions'

import styles from './survey.module.scss'

const RadioButton = 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;

  input {

    margin: 0 !important;

  }

  label {

    color: var(--font-color);

    font-weight: 500;

  }

  &::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: ${(props) => (props.porcentage ? `${props.porcentage}%` : '0%')};

    background-color: #0002;

    z-index: 4;

  }

  &:hover {

    border-color: var(--font-color);

    text-shadow: 0 0 1px var(--font-color);

  }

`

const VoteTag = styled('span')`

  position: absolute;

  bottom: 1rem;

  right: 1rem;

  color: var(--font-color) !important;

  font-weight: 600;

`

const SurveyForm = ({

  active = 0,

  question = '¿Cómo consideras el ambiente laboral?',

  answers = ['Excelente', 'Regular', null, null, null],

  votes = [null, null, null, null, null],

  time = 0,

  voteUrl = '/feed/vote/d454717c-ba6f-485c-b94c-4fbb5f5bed94',

  resultType

}) => {

  const [remainingTime, setRemainingTime] = useState('00:00:00')

  const [isActive, setIsActive] = useState(true)

  const timeRef = useRef(time)

  const { register, handleSubmit } = useForm()

  const totalVotes = useMemo(

    () =>

      votes.reduce((curr, next) => {

        if (next === null) return curr

        return curr + next

      }, 0),

    [votes]

  )

  return (

    <form onChange={handleSubmit} className={styles.survey_form}>

      <h3>{question}</h3>

      {resultType === 'pu' && (

        <span

          className='mb-2'

          title='El número de votos es visible para todos los usuarios'

        >

          <Public /> Público

        </span>

      )}

      {resultType === 'pr' && (

        <span

          className='mb-2'

          title='Los resultados de la votación son privados'

        >

          <LockClock /> Privado

        </span>

      )}

      {answers.map(

        (option, index) =>

          option && (

            <RadioButton disabled={!isActive} key={index}>

              <input

                type='radio'

                name='vote'

                id={`vote-${index + 1}`}

                disabled={!isActive}

                ref={register({ required: true })}

                value={index + 1}

              />

              <label htmlFor={`vote-${index + 1}`}>{option}</label>

              {!!totalVotes && <span className='mb-0'>1</span>}

            </RadioButton>

          )

      )}

      <span>Tiempo restante: {remainingTime}</span>

      {!isActive && <VoteTag>Tu voto ya fue emitido</VoteTag>}

    </form>

  )

}

export default SurveyForm