Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo } from 'react'
import { useDispatch } from 'react-redux'
import { useForm } from 'react-hook-form'

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

import Modal from '@components/UI/modal/Modal'
import Select from '@components/UI/inputs/Select'

export default function AccessibilityModal({
  show = false,
  accessibilities = {},
  accessibility,
  privacy,
  groupId = '',
  onClose = () => {},
  onConfirm = () => {}
}) {
  const accessibilityId = useMemo(
    () =>
      Object.entries(accessibilities).find(
        ([name, value]) => value === accessibility
      )?.[0] || '',
    [accessibilities, accessibility]
  )
  const accessibilitiesOptions = useMemo(() => {
    const options = Object.entries(accessibilities).map(([value, name]) => ({
      name,
      value
    }))

    if (privacy === 'Privado') {
      return options.filter((acc) => acc.value !== 'aj')
    }

    return options
  }, [accessibilities, privacy])
  const dispatch = useDispatch()

  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting }
  } = useForm({
    defaultValues: {
      accessibility: ''
    },
    values: {
      accessibility: accessibilityId
    }
  })

  const onSubmit = handleSubmit(async ({ accessibility }) => {
    const url = `/group/my-groups/accessibility/${groupId}`
    const formData = new FormData()
    formData.append('accessibility', accessibility)

    try {
      const response = await axios.post(url, formData)
      const { data, success } = response.data

      if (!success) {
        throw new Error('Error al editar el tipo de grupo')
      }

      onConfirm(data)
      onClose()
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    }
  })

  return (
    <Modal
      title='Accesibilidad'
      show={show}
      onClose={onClose}
      onAccept={onSubmit}
      loading={isSubmitting}
    >
      <Select
        name='accessibility'
        control={control}
        placeholder='Accesibilidad'
        rules={{
          required: 'Por favor eliga una accesibilidad'
        }}
        error={errors.accessibility?.message}
        options={accessibilitiesOptions}
      />
    </Modal>
  )
}