import { useEffect, useState } from "react";
import { CustomTextInput } from "../text_input/text_input";
import { TouchableOpacity, View } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";

interface DateInputProps {
  label: string;
  onChangeText: (text: string) => void;
  value: string;
  onBlur?: () => void;
  errors?: string;
}

export const DateTextInput = ({label, onChangeText, value, onBlur, errors}: DateInputProps) => {
  const [isVisible, setIsVisible] = useState(false);
  useEffect(() => {
    console.log(isVisible);
  }, [isVisible]);
  return (
    <TouchableOpacity onPress={() => setIsVisible(true)}>
      <CustomTextInput
        label={label}
        value={value}
        onChangeText={() => {}}
        onBlur={onBlur}
        errors={errors}
        editable={false}
      />
      <DateTimePickerModal
        mode="date"
        onConfirm={(data) => {
          onChangeText(data.toDateString());
          setIsVisible(false);
        }}
        onCancel={() => {
          setIsVisible(false);
        }}
        isVisible={isVisible}
      />
    </TouchableOpacity>
  );
};
