import { useEffect, useState } from "react";
import { CustomTextInput } from "./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;
  mode?: "date" | "time";
}

export const DateTextInput = ({
  label,
  onChangeText,
  value,
  onBlur,
  errors,
  mode = "date",
}: DateInputProps) => {
  const [isVisible, setIsVisible] = useState(false);
  return (
    <TouchableOpacity
      onPress={() => setIsVisible(true)}
      style={{ width: "100%" }}
    >
      <CustomTextInput
        label={label}
        value={value}
        onBlur={onBlur}
        errors={errors}
        editable={false}
        textInputProps={{
          autoComplete: "off",
          onChangeText: () => {},
        }}
        alwaysOpen={true}
      />
      <DateTimePickerModal
        mode={mode}
        onConfirm={(data) => {
          onChangeText(
            mode === "date" ? data.toDateString() : data.toTimeString()
          );
          setIsVisible(false);
        }}
        onCancel={() => {
          setIsVisible(false);
        }}
        isVisible={isVisible}
      />
    </TouchableOpacity>
  );
};
