Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useForm } from 'react-hook-form'
import { Box } from '@mui/material'

import { parse } from '@app/utils'

import Button from '@app/components/UI/buttons/Buttons'
import Checkbox from '@components/UI/inputs/Checkbox'
import FormErrorFeedback from '@app/components/UI/form/FormErrorFeedback'

function QuizMultipleQuestion({
  question,
  onConfirm,
  buttonLabel = 'Finalizar',
  isCurrent = false
}) {
  const {
    control,
    formState: { errors },
    handleSubmit
  } = useForm()

  const handleConfirm = handleSubmit((data) => {
    onConfirm(data[question.uuid])
  })

  return (
    <Box sx={{ display: isCurrent ? 'initial' : 'none' }}>
      <Box sx={{ '& p': { fontWeight: '600', fontSize: '1.5rem' } }}>
        {parse(question.text)}
      </Box>

      {question.answers.map(({ uuid, text }) => (
        <Box
          key={uuid}
          sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}
          component='label'
          htmlFor={uuid}
        >
          {parse(text)}

          <Checkbox
            control={control}
            name={question.uuid}
            value={uuid}
            rules={{ required: true }}
          />
        </Box>
      ))}

      {errors[question.uuid] && (
        <FormErrorFeedback>
          Por favor, seleccione al menos una respuesta
        </FormErrorFeedback>
      )}

      <Button
        color='primary'
        onClick={handleConfirm}
        styles={{ marginTop: '1rem' }}
      >
        {buttonLabel}
      </Button>
    </Box>
  )
}

export default QuizMultipleQuestion