import React from 'react';
import {useTranslation} from 'react-i18next';
import RNCalendarPicker from 'react-native-calendar-picker';
import {IconButton} from '@components/_HuGo/Button';
import {INPUT_ICONS} from '@components/_HuGo/Inputs';
import {useTheme} from '@shared/theme';

import {MONTHS_ARRAY, WEEK_DAYS_SHORT} from '../../constants';
import {styles} from '../../styles';

export type DateType = 'START_DATE' | 'END_DATE';

export interface RangePickerProps {
  maxDate?: Date;
  minDate?: Date;
  onChange?: (newValue: Date, type?: DateType) => void;
  selectedEndDate?: Date;
  selectedStartDate?: Date;
}

export function RangePicker({
  maxDate,
  minDate,
  onChange,
  selectedEndDate,
  selectedStartDate,
}: RangePickerProps) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const weekdays = WEEK_DAYS_SHORT.map(day => t(day));
  const months = MONTHS_ARRAY.map(month => t(month));
  const today = new Date();

  return (
    <RNCalendarPicker
      allowRangeSelection
      startFromMonday
      minDate={minDate}
      maxDate={maxDate}
      selectedStartDate={selectedStartDate}
      selectedEndDate={selectedEndDate}
      onDateChange={onChange}
      weekdays={weekdays}
      months={months}
      dayShape="square"
      dayLabelsWrapper={[
        styles.dayLabelsWrapper,
        {borderColor: theme.border.neutral.default},
      ]}
      textStyle={[styles.text, {color: theme.text.neutral.brand}]}
      customDatesStyles={[
        {
          date: today,
          style: {
            ...styles.todayCell,
            backgroundColor: theme.button.background.secondary.default,
            borderColor: theme.border.neutral.brand,
          },
        },
      ]}
      todayTextStyle={{color: theme.text.neutral.brand}}
      selectedDayTextColor={theme.text.neutral.inverted}
      selectedDayColor={theme.button.background.primary.default}
      selectedRangeStyle={{
        ...styles.selectedRange,
        borderColor: theme.border.neutral.brand,
        backgroundColor: theme.button.background.secondary.hover,
      }}
      selectedRangeStartStyle={{
        ...styles.selectedRangeStart,
        backgroundColor: theme.button.background.primary.default,
      }}
      selectedRangeEndStyle={{
        ...styles.selectedRangeEnd,
        backgroundColor: theme.button.background.primary.default,
      }}
      selectedRangeStartTextStyle={{color: theme.text.neutral.inverted}}
      selectedRangeEndTextStyle={{color: theme.text.neutral.inverted}}
      previousComponent={
        <IconButton
          variant="tertiary"
          Icon={INPUT_ICONS.left}
          pointerEvents="none"
        />
      }
      nextComponent={
        <IconButton
          variant="tertiary"
          Icon={INPUT_ICONS.right}
          pointerEvents="none"
        />
      }
      headerWrapperStyle={styles.headerWrapper}
      monthTitleStyle={styles.calendarTitle}
      yearTitleStyle={styles.calendarTitle}
    />
  );
}
