import { format } from 'date-fns';
import { forwardRef, useState } from 'react';
import { NativeSyntheticEvent, NativeTouchEvent, TextInput, View } from 'react-native';
import DatePicker from 'react-native-date-picker';
import { TextField, TextFieldProps } from '../../components';

export const DateField: React.FC<TextFieldProps> = forwardRef<TextInput, TextFieldProps>((textFieldProps, ref) => {
  const [open, setOpen] = useState(false);
  const [date, setDate] = useState(new Date());

  const handlePressIn = (_: NativeSyntheticEvent<NativeTouchEvent>) => {
    setOpen(true);
  };

  return (
    <View>
      <TextField
        // @ts-ignore
        ref={ref}
        onPressIn={handlePressIn}
        {...textFieldProps}
      />
      <DatePicker
        modal
        mode="date"
        open={open}
        date={date}
        onConfirm={(date) => {
          setOpen(false);
          setDate(date);
          textFieldProps.onChangeText?.(format(date, 'yyyy-MM-dd'));
        }}
        onCancel={() => {
          setOpen(false);
        }}
      />
    </View>
  );
}) as React.FC<TextFieldProps>;