ProfileTypeFormDateSelection.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */

import React, { useCallback, useEffect, useState } from 'react'
import 'components/ProfileType/profileTypeForm.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import ProfileTypeProgress from 'components/ProfileType/ProfileTypeProgress'
import ProfileTypeNavigation from 'components/ProfileType/ProfileTypeNavigation'
import { ProfileTypeStepForm } from 'enum/profileType.enum'
import {
  ProfileType,
  ProfileTypeAnswer,
  ProfileTypeAnswerChoices,
} from 'models/profileType.model'
import { DateTime } from 'luxon'
import { MenuItem, Select } from '@material-ui/core'

interface ProfileTypeFormDateSelectionProps {
  step: ProfileTypeStepForm
  viewedStep: ProfileTypeStepForm
  profileType: ProfileType
  answerType: ProfileTypeAnswer
  setNextStep: Function
  setPrevioustStep: Function
  isProfileTypeComplete: boolean
}

interface SelectionMonth {
  label: string | null
  value: string
}

const ProfileTypeFormDateSelection: React.FC<ProfileTypeFormDateSelectionProps> = ({
  step,
  viewedStep,
  profileType,
  answerType,
  setNextStep,
  setPrevioustStep,
  isProfileTypeComplete,
}: ProfileTypeFormDateSelectionProps) => {
  const { t } = useI18n()
  const [selectedMonth, setSelectedMonth] = useState<any>({
    label: DateTime.now().toLocaleString({ month: 'long' }),
    value: DateTime.now()
      .month.toString()
      .padStart(2, '0'), // Date.getMonth starts at 0
  })
  const [selectedYear, setSelectedYear] = useState<number>(DateTime.now().year)
  const [answer, setAnswer] = useState<ProfileTypeAnswerChoices>('')

  const selectMonths: SelectionMonth[] = [
    {
      label: 'Janvier',
      value: '01',
    },
    {
      label: 'Février',
      value: '02',
    },
    {
      label: 'Mars',
      value: '03',
    },
    {
      label: 'Avril',
      value: '04',
    },
    {
      label: 'Mai',
      value: '05',
    },
    {
      label: 'Juin',
      value: '06',
    },
    {
      label: 'Juillet',
      value: '07',
    },
    {
      label: 'Aout',
      value: '08',
    },
    {
      label: 'Septembre',
      value: '09',
    },
    {
      label: 'Octobre',
      value: '10',
    },
    {
      label: 'Novembre',
      value: '11',
    },
    {
      label: 'Décembre',
      value: '12',
    },
  ]

  const selectYears = []
  const curYear = DateTime.now().year
  const limitYears = curYear - 10

  for (let i = curYear; i >= limitYears; i--) {
    selectYears.push(i)
  }

  function getMonthFullName(month: number) {
    switch (month) {
      case 1:
        return 'Janvier'
      case 2:
        return 'Février'
      case 3:
        return 'Mars'
      case 4:
        return 'Avril'
      case 5:
        return 'Mai'
      case 6:
        return 'Juin'
      case 7:
        return 'Juillet'
      case 8:
        return 'Aout'
      case 9:
        return 'Septembre'
      case 10:
        return 'Octobre'
      case 11:
        return 'Novembre'
      case 12:
        return 'Décembre'
      default:
        return null
    }
  }

  const handlePrevious = useCallback(() => {
    setPrevioustStep(profileType)
  }, [profileType, setPrevioustStep])

  const handleNext = useCallback(() => {
    profileType[answerType.attribute] = answer
    setNextStep(profileType)
  }, [profileType, setNextStep, answer, answerType.attribute])

  function handleSelectMonth(event: any) {
    setSelectedMonth({
      value: event.target.value,
      label: getMonthFullName(parseInt(event.target.value)),
    })
    const isoString: string = selectedYear + '-' + selectedMonth.value + '-01'
    setAnswer(DateTime.fromISO(isoString))
  }

  function handleSelectYear(event: any) {
    setSelectedYear(parseInt(event.target.value))
    const isoString: string = selectedYear + '-' + selectedMonth.value + '-01'
    setAnswer(DateTime.fromISO(isoString))
  }

  useEffect(() => {
    if (step < viewedStep || isProfileTypeComplete) {
      const isoString: string = selectedYear + '-' + selectedMonth.value + '-01'
      setAnswer(DateTime.fromISO(isoString))
      profileType[answerType.attribute] = DateTime.fromISO(isoString)
    }
  }, [
    step,
    viewedStep,
    profileType,
    answerType,
    isProfileTypeComplete,
    selectedYear,
    selectedMonth.value,
  ])

  return (
    <>
      <div className={'profile-form-container'}>
        <ProfileTypeProgress step={step} />
        <div className={'profile-question-label'}>
          {t(
            `profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
          )}
        </div>
        {answer !== null ? (
          <div className="select-container">
            <div className="date-select">
              <Select
                native={false}
                labelId="selectMonthDate"
                className="month"
                defaultValue={selectedMonth.value}
                onChange={e => handleSelectMonth(e)}
              >
                {/* if current year, only show past and present months else show full months */}
                {selectedYear === DateTime.now().year
                  ? selectMonths
                      .slice(0, DateTime.now().month)
                      .map((month, key) => (
                        <MenuItem
                          value={month.value}
                          key={key}
                          className="date-option"
                        >
                          {month.label}
                        </MenuItem>
                      ))
                  : selectMonths.map((month, key) => (
                      <MenuItem
                        value={month.value}
                        key={key}
                        className="date-option"
                      >
                        {month.label}
                      </MenuItem>
                    ))}
              </Select>
            </div>
            <div className="date-select">
              <Select
                labelId="selectYearDate"
                className="year"
                defaultValue={selectedYear}
                onChange={e => handleSelectYear(e)}
              >
                {selectYears.map((year, key) => (
                  <MenuItem value={year} key={key} className="date-option">
                    {year}
                  </MenuItem>
                ))}
              </Select>
            </div>
          </div>
        ) : null}
      </div>
      <ProfileTypeNavigation
        step={step}
        handlePrevious={handlePrevious}
        handleNext={handleNext}
        disableNextButton={answer === ''}
      />
    </>
  )
}

export default ProfileTypeFormDateSelection