import { format, parse } from 'date-fns';
import React, { useState, Ref } from 'react';
import {
  Image,
  ImageSourcePropType,
  TouchableOpacity,
  TextInput as RNTextInput,
  StyleProp,
  ImageStyle,
} from 'react-native';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import { TextInput } from 'react-native-paper';
import { styles } from './style';

interface DOBPickerProps {
  label: string;
  value: string;
  Icon?: ImageSourcePropType;
  calendarIcon?: ImageSourcePropType;
  onDateChange: (selectedDate: Date | undefined) => void;
  dateFormat?: string;
  clearIcon?: ImageSourcePropType;
  onClear?: () => void;
  returnKeyType?: 'done' | 'next';
  onSubmitEditing?: () => void;
  forwardRef?: Ref<RNTextInput>;
  textColor?: string;
  placeholderTextColor?: string;
  mode?: "flat" | "outlined" | undefined;
  rightCalendarIconStyle?: StyleProp<ImageStyle>;
  leftIconStyle?: StyleProp<ImageStyle>;
  datetimeMode?: 'date' | 'time' | 'datetime';
}

const DOBPicker = ({
  label,
  Icon,
  calendarIcon,
  clearIcon,
  onDateChange,
  onClear,
  dateFormat = 'dd/mm/yyyy h:mm',
  returnKeyType,
  onSubmitEditing,
  forwardRef,
  value,
  textColor = 'black',
  placeholderTextColor = 'black',
  mode = 'outlined',
  rightCalendarIconStyle,
  leftIconStyle,
  datetimeMode = 'datetime'
}: DOBPickerProps) => {
  const [dob, setDob] = useState('');
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirmDate = (date: Date) => {
    const formattedDate = format(date, dateFormat);
    setDob(formattedDate);
    onDateChange(date);
    hideDatePicker();
  };

  const handleDateInput = (input: string) => {
    setDob(input);

    try {
      const parsedDate = parse(input, dateFormat, new Date());
      if (!isNaN(parsedDate.getTime())) {
        onDateChange(parsedDate);
      } else {
        onDateChange(undefined);
      }
    } catch (error) {
      console.warn("Date parsing error:", error);
      onDateChange(undefined);
    }
  };

  const clearDate = () => {
    setDob('');
    onDateChange(undefined);
    if (onClear) {
      onClear();
    }
  };

  return (
    <TouchableOpacity onPress={dob ? clearDate : showDatePicker}>
      <TextInput
        style={styles.phoneInput}
        label={label}
        value={value}
        onChangeText={handleDateInput}
        editable={false}
        textColor={textColor}
        selectTextOnFocus={false}
        keyboardType="numeric"
        mode={mode}
        returnKeyType={returnKeyType}
        onSubmitEditing={onSubmitEditing}
        ref={forwardRef}
        underlineStyle={{
          display: 'none',
        }}
        placeholderTextColor={placeholderTextColor}
        right={
          <TextInput.Icon
            icon={() => (
              <TouchableOpacity onPress={dob ? clearDate : showDatePicker}>
                <Image
                  source={dob ? clearIcon : calendarIcon}
                  style={[styles.calendarImg, rightCalendarIconStyle]}
                />
              </TouchableOpacity>
            )}
          />
        }
        left={
          Icon && (
            <TextInput.Icon
              icon={() => (
                <TouchableOpacity activeOpacity={1} style={styles.iconButton}>
                  <Image
                    source={Icon}
                    style={[styles.iconStyle, leftIconStyle]}
                  />
                </TouchableOpacity>
              )}
            />
          )
        }
        theme={{
          colors: {
            primary: 'gray',
            placeholder: 'grey',
            background: 'transparent',
            disabled: 'transparent',
          },
        }}
      />

      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode={datetimeMode}
        onConfirm={handleConfirmDate}
        onCancel={hideDatePicker}
      // maximumDate={new Date()}
      />
    </TouchableOpacity>
  );
};

export default DOBPicker;