import React from 'react';
import {StyleProp, TextStyle} from 'react-native';
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 {isSameDay} from '@shared/utils';

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

export interface DatePickerProps {
  minDate?: Date;
  maxDate?: Date;
  value?: Date;
  onChange?: (newValue: Date) => void;
  onMonthChange?: (newValue: Date) => void;
  initialView?: 'months' | 'years' | 'days';
  // If the initialDate is provided, the calendar will start on this date
  initialDate?: Nullable<Date>;
  disabledDates?: (date: Date) => boolean;
  disabledDatesTextStyle?: StyleProp<TextStyle>;
}

export function DatePicker({
  minDate,
  maxDate,
  value,
  onChange,
  onMonthChange,
  initialView,
  initialDate,
  disabledDates,
  disabledDatesTextStyle,
}: DatePickerProps) {
  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();

  const selectMonthTitle = (year: number) => {
    return t('time_off.select_year', {year});
  };

  return (
    <RNCalendarPicker
      startFromMonday
      selectMonthTitle={selectMonthTitle}
      selectYearTitle={t('time_off.select_year')}
      initialView={initialView}
      minDate={minDate}
      maxDate={maxDate}
      initialDate={initialDate ?? undefined}
      selectedStartDate={value ?? undefined}
      onDateChange={onChange}
      onMonthChange={onMonthChange}
      disabledDates={disabledDates}
      disabledDatesTextStyle={disabledDatesTextStyle}
      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[
            value && isSameDay(today, value) ? 'inverted' : 'brand'
          ],
      }}
      selectedDayStyle={{
        ...styles.dayCell,
        backgroundColor: theme.button.background.primary.default,
      }}
      selectedDayTextColor={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}
    />
  );
}
