import { useEffect } from 'react';
import { useFormContext, useWatch } from 'react-hook-form';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Accordion from '@material-hu/components/design-system/Accordion';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import List from '@material-hu/components/design-system/List';
import ListItem from '@material-hu/components/design-system/List/components/ListItem';
import FormSwitcher from '@material-hu/components/design-system/Switcher/form';
import Title from '@material-hu/components/design-system/Title';

import { type PolicyForm } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

import TooltipWrapper from 'src/components/TooltipWrapper/TooltipWrapper';

import { isDisabledArgentinianLawCompliance } from '../../../utils';
import { policyFormFields } from '../../constants';

const DECEMBER_31 = '12-31';

const arAllowanceIncreaseFields =
  policyFormFields.countries.argentina.allowanceIncrease;

const ArgentinianAllowanceIncreaseStep = () => {
  const { t } = useLokaliseTranslation(['time_off', 'validations', 'general']);
  const { control, setValue } = useFormContext<PolicyForm>();

  const [
    hasSeniorityCalculationDate,
    argentinianLawCompliance,
    allowanceStart,
    accumulationMoment,
  ] = useWatch({
    control,
    name: [
      arAllowanceIncreaseFields.hasSeniorityCalculationDate,
      arAllowanceIncreaseFields.argentinianLawCompliance,
      arAllowanceIncreaseFields.allowanceStart,
      arAllowanceIncreaseFields.accumulationMoment,
    ],
  });

  const isArgentinianLawComplianceDisabled = isDisabledArgentinianLawCompliance(
    allowanceStart,
    accumulationMoment,
  );

  useEffect(() => {
    if (isArgentinianLawComplianceDisabled) {
      setValue(arAllowanceIncreaseFields.argentinianLawCompliance, false);
    }
  }, [isArgentinianLawComplianceDisabled, setValue]);

  useEffect(() => {
    if (argentinianLawCompliance) {
      setValue(arAllowanceIncreaseFields.hasSeniorityCalculationDate, true);
    }
  }, [argentinianLawCompliance, setValue]);

  useEffect(() => {
    if (hasSeniorityCalculationDate) {
      setValue(arAllowanceIncreaseFields.seniorityCalculationDate, DECEMBER_31);
    } else {
      setValue(arAllowanceIncreaseFields.seniorityCalculationDate, null);
    }
  }, [hasSeniorityCalculationDate, setValue]);

  return (
    <CardContainer fullWidth>
      <Stack sx={{ gap: 2 }}>
        <Title
          title={t('regional_adaptation.country_title', {
            country: t('backoffice_only:form_country_code.ar'),
          })}
          description={t('regional_adaptation.requirements_title', {
            country: t('backoffice_only:form_country_code.ar'),
          })}
          variant="M"
        />
        <CardContainer
          fullWidth
          color="grey"
        >
          <FormSwitcher
            name={arAllowanceIncreaseFields.hasSeniorityCalculationDate}
            switcherProps={{
              title: t('seniority_calculation_arg_law'),
              description: t('seniority_calculation_arg_law_tooltip'),
              disabled: argentinianLawCompliance,
            }}
          />
        </CardContainer>
        <CardContainer
          fullWidth
          color="grey"
        >
          <TooltipWrapper
            show={isArgentinianLawComplianceDisabled}
            tooltipProps={{
              title: t('proportional_vacation_calculation.disabled_tooltip'),
            }}
          >
            <FormSwitcher
              name={arAllowanceIncreaseFields.argentinianLawCompliance}
              switcherProps={{
                disabled: isArgentinianLawComplianceDisabled,
                title: t('proportional_vacation_calculation.title'),
              }}
            />
          </TooltipWrapper>
        </CardContainer>
        {argentinianLawCompliance && (
          <Accordion
            elevation={0}
            pill={{
              label: 'Info',
              type: 'info',
            }}
            sx={{
              p: 1,
              backgroundColor: theme =>
                theme.palette.new.background?.elements?.grey,
            }}
            title={t('proportional_vacation_calculation.modal.title')}
            customDetail={
              <Stack>
                <Typography>
                  {t('proportional_vacation_calculation.modal.description')}
                </Typography>
                <List
                  sx={{
                    listStyle: 'disc',
                    p: 2,
                    backgroundColor: theme =>
                      theme.palette.new.background?.elements?.grey,
                  }}
                >
                  {Array.from({ length: 3 }).map((__, index) => (
                    <ListItem
                      key={index}
                      sx={{
                        '& .MuiListItem-root': {
                          py: 0.5,
                        },
                        display: 'list-item',
                        '& .MuiTypography-root': {
                          fontWeight: 'fontWeightRegular',
                        },
                      }}
                      text={{
                        title: t(
                          `proportional_vacation_calculation.modal.subitems.${index}`,
                        ),
                      }}
                    />
                  ))}
                </List>
              </Stack>
            }
          />
        )}
      </Stack>
    </CardContainer>
  );
};

export default ArgentinianAllowanceIncreaseStep;