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'
import { PopupWrapper } from './Wrapper'

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)
      )
    }
  }

  if (partnersIssue.isLoading) {
    return <Loader />
  }

  if (partnersIssue.error) {
    return <p>Une erreur est survenue</p>
  }

  if (partnersIssue.data) {
    return (
      <PopupWrapper>
        <h3>Affichage des pop-up de panne</h3>

        <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 pop-up maintenance des partenaires ne peut pas être activée en
            même temps que la{' '}
            <Link to={links.customPopup.path}>pop-up personnalisée</Link>
          </p>
        )}
      </PopupWrapper>
    )
  }
}