Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React from "react"
import { useState, useEffect } from "react"
import { Button, Modal } from "react-bootstrap"
import { useForm } from "react-hook-form"
import { axios } from "../../../../../../../utils"
import FormErrorFeedback from "../../../../../../../shared/form-error-feedback/FormErrorFeedback"
import Spinner from "../../../../../../../shared/loading-spinner/Spinner"
import EditIcon from '@mui/icons-material/EditOutlined'

const Accessibility = (props) => {
  const [isModalOpen, setIsModalOpen] = useState(false)

  const handleModalOpen = () => {
    setIsModalOpen(true)
  }

  return (
    <>
      <div className="experience__user-card">
        <div className="card__options-container">
          <h4>Accesibilidad</h4>
          <button className='button-icon' onClick={handleModalOpen}>
            <EditIcon />
          </button>
        </div>
        <p>{props.accessibility}</p>
      </div>
      <Accessibility.Modal
        show={isModalOpen}
        {...props}
      />
    </>
  )
}

const AccessibilityModal = ({ show, groupId, privacy, accessibilities, addNotification, setSettedAccesibility }) => {
  const { register, errors, handleSubmit, setValue, getValues, setError } = useForm()
  const [isShow, setIsShow] = useState(show)
  const [loading, setLoading] = useState(false)

  const closeModal = () => {
    setIsShow(false)
  }

  const onSubmitHandler = async (data) => {
    setLoading(true)
    const formData = new FormData()
    Object.entries(data).map(([key, value]) => formData.append(key, value))
    await axios
      .post(`/group/my-groups/accessibility/${groupId}`, formData)
      .then((response) => {
        const resData = response.data
        if (resData.success) {
          setSettedAccesibility(resData.data)
          closeModal()
        } else {
          const resError = resData.data
          if (resError.constructor.name === "Object") {
            Object.entries(resError).map(([key, value]) => {
              if (key in getValues()) {
                setError(key, {
                  type: "manual",
                  message: Array.isArray(value) ? value[0] : value,
                })
              }
            })
          } else {
            addNotification({
              style: "danger",
              msg: resError,
            })
          }
        }
      })
    setLoading(false)
  }

  useEffect(() => {
    axios.get(`/group/my-groups/accessibility/${groupId}`)
      .then(({ data: response }) => {
        if (response.success && response.data) {
          setValue('accessibility', response.data)
        }
      })
  }, [])

  useEffect(() => {
    setIsShow(show)
  }, [show])

  return (
    <Modal
      show={isShow}
      onHide={closeModal}
      style={{ overflowY: "scroll" }}
    >
      <Modal.Header closeButton>
        <Modal.Title>Accesibilidad</Modal.Title>
      </Modal.Header>
      <form onSubmit={handleSubmit(onSubmitHandler)}>
        <Modal.Body>
          <select
            name="accessibility"
            ref={register({ required: "Por favor eliga una accesibilidad" })}
          >
            <option value="" hidden>
              Accesibilidad
            </option>
            {Object.entries(accessibilities).map(([key, value]) => {
              if (privacy === 'Privado' && key === 'aj') {
                return
              }

              return (
                <option value={key} key={key}>
                  {value}
                </option>
              )
            })}
          </select>
          {errors.accessibility && <FormErrorFeedback>{errors.accessibility.message}</FormErrorFeedback>}
        </Modal.Body>
        <Modal.Footer>
          <Button type="submit">Enviar</Button>
          <Button variant="danger" onClick={closeModal}>
            Cancelar
          </Button>
        </Modal.Footer>
      </form>
      {loading && <Spinner />}
    </Modal>
  )
}

Accessibility.Modal = AccessibilityModal

export default Accessibility