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

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

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormInputSelect from '@material-hu/components/design-system/Inputs/Select/form';
import { useValidations } from 'src/pages/dashboard/timeOff/hooks/useValidations';

import { useLokaliseTranslation } from 'src/utils/i18n';

import {
  getTimeOptions,
  hoursOptions,
  minutesOptions,
  timeToMinutes,
} from 'src/utils/vacations';

import { formFieldsRequestCreate } from '../../constant';
import { RequestCreateForm } from '../../hooks/useRequestCreate';

type Props = {
  minimumTimeFraction?: number;
};

export const HourRequestForm = ({ minimumTimeFraction }: Props) => {
  const { requiredRules, validateTime } = useValidations();
  const { t } = useLokaliseTranslation('time_off');

  const form = useFormContext<RequestCreateForm>();

  const [fromHour, fromHourTime] = useWatch({
    control: form.control,
    name: [
      formFieldsRequestCreate.fromHour,
      formFieldsRequestCreate.fromHourTime,
    ],
  });

  useEffect(() => {
    if (minimumTimeFraction) {
      form.resetField(formFieldsRequestCreate.toHourTime);
      form.resetField(formFieldsRequestCreate.toHour);
    }
  }, [fromHour, fromHourTime, minimumTimeFraction]);

  const { hourValues: toHoursOptions, minuteValues: toMinutesOptions } =
    useMemo(() => {
      if (!minimumTimeFraction) return { hourValues: [], minuteValues: [] };
      const totalFromMinutes = timeToMinutes(fromHour, fromHourTime);

      return getTimeOptions(totalFromMinutes, minimumTimeFraction);
    }, [fromHour, fromHourTime, minimumTimeFraction]);

  const disabledToTime = !!minimumTimeFraction && (!fromHour || !fromHourTime);

  return (
    <Stack sx={{ gap: 3 }}>
      <HuCardContainer
        fullWidth
        color="grey"
      >
        <Stack>
          <Typography
            variant="globalS"
            sx={{
              fontWeight: 'fontWeightSemiBold',
            }}
          >
            {t('start_hour_request_title')}
          </Typography>
          <Stack sx={{ flexDirection: 'row', gap: 2 }}>
            <HuFormInputSelect
              name={formFieldsRequestCreate.fromHour}
              inputProps={{
                options: hoursOptions,
                placeholder: t('general:hour_start'),
                helperText: t('start_hour_request_description'),
              }}
              rules={requiredRules}
            />
            <HuFormInputSelect
              name={formFieldsRequestCreate.fromHourTime}
              rules={requiredRules}
              inputProps={{
                options: minutesOptions,
                placeholder: t('general:minute_other'),
              }}
            />
          </Stack>
        </Stack>
      </HuCardContainer>
      <HuCardContainer
        fullWidth
        color="grey"
      >
        <Stack>
          <Typography
            variant="globalS"
            sx={{
              fontWeight: 'fontWeightSemiBold',
            }}
          >
            {t('end_hour_request_title')}
          </Typography>
          <Stack sx={{ flexDirection: 'row', gap: 2 }}>
            <HuFormInputSelect
              name={formFieldsRequestCreate.toHour}
              inputProps={{
                options: minimumTimeFraction ? toHoursOptions : hoursOptions,
                placeholder: t('general:hour_end'),
                helperText: t('end_hour_request_description'),
                disabled: disabledToTime,
              }}
              rules={validateTime}
            />
            <HuFormInputSelect
              name={formFieldsRequestCreate.toHourTime}
              rules={requiredRules}
              inputProps={{
                options: minimumTimeFraction
                  ? toMinutesOptions
                  : minutesOptions,
                placeholder: t('general:minute_other'),
                disabled: disabledToTime,
              }}
            />
          </Stack>
        </Stack>
      </HuCardContainer>
    </Stack>
  );
};