import {useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import {useFormContext} from 'react-hook-form';
import {InputSelectOption} from '@components';
import {
  PolicyType,
  CountingMethod,
  MakeRequestForm,
  ConsumptionType,
} from '@modules/timeOff/interfaces';
import {useBlockDatePickerByHolidays} from '@modules/timeOff/screens/MakeRequest/hooks';
import {useTheme} from '@shared/theme';
import {isSameDay} from '@shared/utils';

import {FromDateField} from '../FromDateField';
import {ToDateField} from '../ToDateField';

interface Props {
  minDate?: Date;
  userId?: number;
  datePlaceholder: string;
  isAdminOnBehalf?: boolean;
  availableBalanceDays: number;
  policyType: Nullable<PolicyType>;
}

export function FormDays({
  userId,
  minDate,
  policyType,
  datePlaceholder,
  availableBalanceDays,
  isAdminOnBehalf = false,
}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {resetField, watch} = useFormContext<MakeRequestForm>();
  const fromDate = watch('fromDate');
  const toDate = watch('toDate');

  const consumptionTypesOptions = useMemo<InputSelectOption<ConsumptionType>[]>(
    () => [
      {
        id: ConsumptionType.HALF_DAY,
        label: t('time_off.consumption_type_half_day'),
      },
      {
        id: ConsumptionType.FULL_DAY,
        label: t('time_off.consumption_type_full_day'),
      },
    ],
    [t],
  );

  const isCalendarDaysPolicy =
    policyType?.countingMethod === CountingMethod.CALENDAR_DAYS;
  const applyMondayStartRules =
    isCalendarDaysPolicy && policyType?.requireMondayStart && !isAdminOnBehalf;
  const applyMultiplesOfSevenRules =
    isCalendarDaysPolicy &&
    policyType?.requireMultiplesOfSeven &&
    !isAdminOnBehalf;

  const disabledDatesTextStyle = useMemo(
    () => ({color: theme.text.neutral.disabled}),
    [theme.text.neutral.disabled],
  );

  const {fromPickerExtraProps, toPickerExtraProps} =
    useBlockDatePickerByHolidays({
      toDate,
      userId,
      minDate,
      fromDate,
      resetField,
      availableBalanceDays,
      applyMondayStartRules,
      disabledDatesTextStyle,
      applyMultiplesOfSevenRules,
    });

  const showFromDateConsumptionType = policyType?.allowHalfDayRequests;
  const showToDateConsumptionType =
    showFromDateConsumptionType &&
    !(fromDate && toDate && isSameDay(fromDate, toDate));

  const onClearFromDate = () => {
    resetField('fromDate');
  };

  const onClearToDate = () => {
    resetField('toDate');
  };

  return (
    <>
      <FromDateField
        minDate={minDate}
        fromDate={fromDate}
        datePlaceholder={datePlaceholder}
        onClearFromDate={onClearFromDate}
        fromPickerExtraProps={fromPickerExtraProps}
        showConsumptionType={!!showFromDateConsumptionType}
        consumptionTypesOptions={consumptionTypesOptions}
      />
      <ToDateField
        toDate={toDate}
        minDate={minDate}
        fromDate={fromDate}
        onClearToDate={onClearToDate}
        datePlaceholder={datePlaceholder}
        toPickerExtraProps={toPickerExtraProps}
        showConsumptionType={!!showToDateConsumptionType}
        consumptionTypesOptions={consumptionTypesOptions}
      />
    </>
  );
}