import React from 'react';
import type { DateTimePickerEvent } from '@react-native-community/datetimepicker';
import DateTimePicker from '@react-native-community/datetimepicker';
import { MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
import type { DatePickerDialogProps } from './type';
import { useTheme } from '../../../theme';
import Box from '../../Box';

export type AndroidDatePickerDialogProps = Omit<
  DatePickerDialogProps,
  'supportedOrientations' | 'confirmLabel' | 'label' | 'locale'
>;

const AndroidDatePickerDialog = ({
  open,
  onClose,
  value,
  minDate,
  maxDate,
  onChange,
  testID,
  variant = 'default',
}: AndroidDatePickerDialogProps) => {
  const theme = useTheme();
  if (!open) return null;

  const pickerInitValue = value || new Date();

  return (
    <Box testID={testID}>
      {open && variant === 'month-year' ? (
        <Box testID={testID}>
          <MonthYearPickerDialogueAndroid
            themeVariant={theme.themeMode === 'dark' ? 'dark' : 'light'}
            value={value}
            minimumDate={minDate}
            maximumDate={maxDate}
            onChange={(action, date) => {
              onClose();
              if (action === 'dateSetAction' && !!date) {
                onChange(date);
              }
            }}
          />
        </Box>
      ) : null}
      {open && variant === 'default' ? (
        <DateTimePicker
          testID="datePickerAndroid"
          mode="date"
          value={pickerInitValue}
          minimumDate={minDate}
          maximumDate={maxDate}
          display="default"
          onChange={(_: DateTimePickerEvent, date: Date | undefined) => {
            onClose();
            if (date) {
              onChange(date);
            }
          }}
        />
      ) : null}
    </Box>
  );
};

export default AndroidDatePickerDialog;