ElecInfoModal.tsx

import { IconButton } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import React from 'react'
import {
  OffPeakHours,
  formatListWithAnd,
  formatOffPeakHours,
} from 'utils/utils'
import './elecInfoModal.scss'

interface ElecInfoModalProps {
  open: boolean
  offPeakHours: OffPeakHours[] | undefined
  handleCloseClick: () => void
}

const ElecInfoModal = ({
  open,
  offPeakHours,
  handleCloseClick,
}: ElecInfoModalProps) => {
  const { t } = useI18n()
  const displayedOffPeakHours =
    offPeakHours &&
    formatListWithAnd(
      offPeakHours.map(offPeakHour => formatOffPeakHours(offPeakHour))
    )
  return (
    <Dialog
      open={open}
      onClose={handleCloseClick}
      aria-labelledby="accessibility-title"
      classes={{
        root: 'modal-root',
        paper: 'modal-paper',
      }}
    >
      <div id="accessibility-title">
        {t('elec_info_modal.accessibility.window_title')}
      </div>
      <IconButton
        aria-label={t('elec_info_modal.accessibility.button_close')}
        className="modal-paper-close-button"
        onClick={handleCloseClick}
      >
        <Icon icon={CloseIcon} size={16} />
      </IconButton>
      <div className="elecInfoModal">
        <div className="title text-18-bold">
          {t('elec_info_modal.maxPowerTitle')}
        </div>
        <div>
          {t('elec_info_modal.maxPowerDetails-1')}
          <br />
          {t('elec_info_modal.maxPowerDetails-2')}
        </div>
        {offPeakHours && (
          <>
            <div className="title text-18-bold">
              {t('elec_info_modal.offPeakTitle')}
            </div>
            <div>
              {t('elec_info_modal.offPeakDetails-1', {
                offPeakHours: displayedOffPeakHours,
              })}
            </div>
          </>
        )}
        <div className="title text-18-bold">
          {t('elec_info_modal.minPowerTitle')}
        </div>
        <div>
          {t('elec_info_modal.minPowerDetails-1')}
          <br />
          {t('elec_info_modal.minPowerDetails-2')}
          <br />
        </div>
      </div>
    </Dialog>
  )
}

export default ElecInfoModal