import {useMemo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useFormContext} from 'react-hook-form';
import {
  IconExposurePlus1,
  IconExposureMinus1,
} from '@tabler/icons-react-native';
import {InputSelectController, InputSelectOption} from '@components';
import {useTimeOffPanelStyle} from '@modules/timeOff/hooks';
import {
  MakeRequestForm,
  ConsumptionHoursType,
  MinimumFractionTimeType,
} from '@modules/timeOff/interfaces';
import {CONSUMPTION_TYPE_SELECT_SNAP_POINTS} from '@modules/timeOff/screens/MakeRequest/constants';
import {useTheme} from '@shared/theme';

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

const MINUTE_INTERVAL = 5;

interface Props {
  minDate?: Date;
  datePlaceholder: string;
  minuteInterval: MinimumFractionTimeType;
}

export function FormHours({
  minDate,
  datePlaceholder,
  minuteInterval = MINUTE_INTERVAL,
}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {resetField, watch} = useFormContext<MakeRequestForm>();
  const panelStyle = useTimeOffPanelStyle();

  const consumptionHoursTypeOptions = useMemo<
    InputSelectOption<ConsumptionHoursType>[]
  >(
    () => [
      {
        id: ConsumptionHoursType.LESS_THAN_ONE_DAY,
        label: t('time_off.less_than_one_day_option'),
        AvatarProps: {
          size: 'md',
          rounded: false,
          variant: 'default',
          Icon: IconExposureMinus1,
          iconColor: theme.text.neutral.brand,
        },
      },
      {
        id: ConsumptionHoursType.MORE_THAN_ONE_DAY,
        label: t('time_off.more_than_one_day_option'),
        AvatarProps: {
          size: 'md',
          rounded: false,
          variant: 'default',
          Icon: IconExposurePlus1,
          iconColor: theme.text.neutral.brand,
        },
      },
    ],
    [t, theme.text.neutral.brand],
  );

  const minuteIntervalValue = useMemo(() => {
    if (minuteInterval === 60) {
      return undefined;
    }
    return minuteInterval ?? MINUTE_INTERVAL;
  }, [minuteInterval]);

  const consumptionHoursType = watch('consumptionHoursType');
  const fromDate = watch('fromDate');
  const toDate = watch('toDate');
  const isLessThanOneDay =
    consumptionHoursType === ConsumptionHoursType.LESS_THAN_ONE_DAY;
  const isMoreThanOneDay =
    consumptionHoursType === ConsumptionHoursType.MORE_THAN_ONE_DAY;

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

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

  return (
    <>
      <View style={panelStyle}>
        <InputSelectController
          name="consumptionHoursType"
          showAvatarInCollapsedInput={false}
          options={consumptionHoursTypeOptions}
          placeholder={t('time_off.request_duration')}
          snapPoints={CONSUMPTION_TYPE_SELECT_SNAP_POINTS}
          label={t('time_off.how_long_time_request_title')}
        />
      </View>
      {isLessThanOneDay && (
        <LessThanOneDayFields
          minDate={minDate}
          fromDate={fromDate}
          onClearFromDate={onClearFromDate}
          datePlaceholder={datePlaceholder}
          minuteIntervalValue={minuteIntervalValue}
        />
      )}
      {isMoreThanOneDay && (
        <>
          <FromDateField
            minDate={minDate}
            fromDate={fromDate}
            showConsumptionType={false}
            datePlaceholder={datePlaceholder}
            onClearFromDate={onClearFromDate}
          />
          <ToDateField
            toDate={toDate}
            minDate={minDate}
            fromDate={fromDate}
            showConsumptionType={false}
            onClearToDate={onClearToDate}
            datePlaceholder={datePlaceholder}
          />
        </>
      )}
    </>
  );
}