import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {
  InputSelectOption,
  InputDateController,
  InputSelectController,
} from '@components';
import {useTimeOffPanelStyle} from '@modules/timeOff/hooks';
import {ConsumptionType} from '@modules/timeOff/interfaces';
import {CONSUMPTION_TYPE_SELECT_SNAP_POINTS} from '@modules/timeOff/screens/MakeRequest/constants';
import type {BlockDatePickerByHolidaysExtraProps} from '@modules/timeOff/screens/MakeRequest/hooks';
import {styles} from '@modules/timeOff/screens/MakeRequest/styles';

interface Props {
  toDate?: Date;
  minDate?: Date;
  fromDate?: Date;
  datePlaceholder: string;
  onClearToDate: () => void;
  showConsumptionType: boolean;
  consumptionTypesOptions?: InputSelectOption<ConsumptionType>[];
  toPickerExtraProps?: Partial<BlockDatePickerByHolidaysExtraProps>;
}

export function ToDateField({
  toDate,
  minDate,
  fromDate,
  onClearToDate,
  datePlaceholder,
  showConsumptionType,
  toPickerExtraProps = {},
  consumptionTypesOptions = [],
}: Props) {
  const {t} = useTranslation();
  const panelStyle = useTimeOffPanelStyle();

  return (
    <View style={panelStyle}>
      <View style={styles.gap}>
        <InputDateController
          name="toDate"
          disabled={!fromDate}
          helperNumberOfLines={1}
          onClear={onClearToDate}
          minDate={fromDate || minDate}
          placeholder={datePlaceholder}
          label={t('time_off.until_when')}
          helper={t('time_off.select_end_date')}
          initialDate={toDate || fromDate || minDate}
          {...toPickerExtraProps}
        />
        {showConsumptionType && (
          <InputSelectController
            name="toDateConsumptionType"
            options={consumptionTypesOptions}
            helper={t('time_off.duration_of_last_day')}
            placeholder={t('time_off.duration_of_last_day')}
            snapPoints={CONSUMPTION_TYPE_SELECT_SNAP_POINTS}
          />
        )}
      </View>
    </View>
  );
}