import { MonthYearPickerViewIOS } from '@hero-design/react-native-month-year-picker';
import type { DateTimePickerEvent } from '@react-native-community/datetimepicker';
import DateTimePicker from '@react-native-community/datetimepicker';
import React, { useState } from 'react';
import BottomSheet from '../../BottomSheet';
import Button from '../../Button';
import { useTheme } from '../../../theme';
import { StyledPickerWrapper } from '../StyledDatePicker';
import type { DatePickerDialogProps } from './type';
import { getDateValue } from '../hooks/useCalculateDate';

const IOSDatePickerDialog = ({
  label,
  open,
  onClose,
  confirmLabel,
  locale,
  value,
  minDate,
  maxDate,
  onChange,
  testID,
  variant = 'default',
  supportedOrientations = ['portrait'],
}: DatePickerDialogProps) => {
  const theme = useTheme();
  const [selectingDate, setSelectingDate] = useState<Date>(
    getDateValue(value || new Date(), minDate, maxDate)
  );

  return (
    <BottomSheet
      testID={testID}
      open={open}
      onRequestClose={onClose}
      header={label}
      footer={
        <Button
          variant="text"
          text={confirmLabel}
          onPress={() => {
            if (selectingDate) {
              onChange(selectingDate);
            }
            onClose();
          }}
        />
      }
      supportedOrientations={supportedOrientations}
    >
      <StyledPickerWrapper>
        {/*
          For native pickers like MonthYearPickerViewIOS, using style={{ height: '100%', width: '100%' }} ensures the picker fills the parent container.
          This is because many native views (especially iOS pickers) do not always respect flexbox properties like flex: 1,
          and may render as empty or collapsed if not given explicit width/height. Using '100%' makes the picker reliably fill the available space.
        */}
        {variant === 'month-year' ? (
          <MonthYearPickerViewIOS
            value={selectingDate}
            locale={locale}
            minimumDate={minDate}
            textColor={theme.colors.onDefaultGlobalSurface}
            maximumDate={maxDate}
            style={{ height: '100%', width: '100%' }}
            onChange={(date: Date | undefined) => {
              if (date) {
                setSelectingDate(date);
              }
            }}
          />
        ) : null}
        {variant === 'default' ? (
          <DateTimePicker
            locale={locale}
            testID="datePickerIOS"
            value={selectingDate}
            minimumDate={minDate}
            maximumDate={maxDate}
            mode="date"
            onChange={(_: DateTimePickerEvent, date: Date | undefined) => {
              if (date) {
                setSelectingDate(date);
              }
            }}
            display="spinner"
            style={{ flex: 1 }}
            textColor={theme.colors.onDefaultGlobalSurface}
          />
        ) : null}
      </StyledPickerWrapper>
    </BottomSheet>
  );
};

export default IOSDatePickerDialog;