PartnersIssue.tsx

import { FormControlLabel, FormGroup, Switch } from '@mui/material'
import { Link } from 'react-router-dom'
import { getAxiosXSRFHeader } from '../../axios.config'
import { useCustomPopup } from '../../hooks/useCustomPopup'
import { usePartnersIssue } from '../../hooks/usePartnersIssue'
import { useWhoAmI } from '../../hooks/useWhoAmI'
import Loader from '../Loader/Loader'
import { links } from '../Routes/Router'
import './popups.scss'

export const PartnersIssue = () => {
  const { data: user } = useWhoAmI()
  const { partnersIssue, savePartnersIssue } = usePartnersIssue()
  const { customPopup } = useCustomPopup()

  const isCustomPopupEnabled = customPopup.data?.popupEnabled

  const handlePartnerIssue = (
    value: boolean,
    type: 'enedis_failure' | 'egl_failure' | 'grdf_failure'
  ) => {
    if (partnersIssue.data && user) {
      const updatedNotification = {
        egl_failure: partnersIssue.data.egl_failure,
        enedis_failure: partnersIssue.data.enedis_failure,
        grdf_failure: partnersIssue.data.grdf_failure,
        [type]: value,
      }

      savePartnersIssue(
        {
          ...partnersIssue.data,
          [type]: value,
          notification_activated: Object.values(updatedNotification).some(
            v => v
          ),
        },
        getAxiosXSRFHeader(user.xsrftoken)
      )
    }
  }

  return (
    <>
      <div className="header">
        <h1>Création de Pop-up</h1>
      </div>
      <div className="content popups">
        <div className="partnersInfo">
          <h3>Affichage des pop-up de panne</h3>
          <div>
            {partnersIssue.isPending && <Loader />}
            {partnersIssue.isError && <p>Erreur</p>}
            {partnersIssue.data && (
              <div>
                <p>Services concernés</p>
                <FormGroup style={{ flexDirection: 'row' }}>
                  <FormControlLabel
                    label={'Panne Enedis'}
                    labelPlacement="top"
                    control={
                      <Switch
                        disabled={isCustomPopupEnabled}
                        checked={partnersIssue.data.enedis_failure}
                        onChange={event => {
                          handlePartnerIssue(
                            event.target.checked,
                            'enedis_failure'
                          )
                        }}
                      />
                    }
                  />
                  <FormControlLabel
                    label={'Panne EGL'}
                    labelPlacement="top"
                    control={
                      <Switch
                        disabled={isCustomPopupEnabled}
                        checked={partnersIssue.data.egl_failure}
                        onChange={event => {
                          handlePartnerIssue(
                            event.target.checked,
                            'egl_failure'
                          )
                        }}
                      />
                    }
                  />
                  <FormControlLabel
                    label={'Panne GRDF'}
                    labelPlacement="top"
                    control={
                      <Switch
                        disabled={isCustomPopupEnabled}
                        checked={partnersIssue.data.grdf_failure}
                        onChange={event => {
                          handlePartnerIssue(
                            event.target.checked,
                            'grdf_failure'
                          )
                        }}
                      />
                    }
                  />
                </FormGroup>

                {isCustomPopupEnabled && (
                  <p className="singlePopupWarning">
                    La maintenance des partenaires ne peut pas être activée en
                    même temps que la{' '}
                    <Link to={links.customPopup.path}>
                      pop-ups personnalisée
                    </Link>
                  </p>
                )}
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  )
}