import { FontAwesome5 } from '@expo/vector-icons';
import DateTimePicker from '@react-native-community/datetimepicker';
import React, { FC, useState } from 'react';

import TextFieldClickable from './TextFieldClickable';

type props = {
  value?: Date;
  setValue: (text: Date) => void;
  title?: string;
};

const TextFieldDate: FC<props> = ({ title, value, setValue }) => {
  const [isVisible, setIsVisible] = useState(false);

  const onChange = (_: any, selectedDate: any) => {
    setValue(selectedDate);
    setIsVisible(false);
  };
  return (
    <>
      <TextFieldClickable
        title={title}
        value={
          value
            ? value.toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' })
            : ''
        }
        onPress={() => setIsVisible(true)}
        icon={<FontAwesome5 name="calendar" size={20} />}
      />
      {isVisible && (
        <DateTimePicker
          value={value || new Date()}
          mode="date"
          is24Hour={true}
          onChange={onChange}
        />
      )}
    </>
  );
};

export default TextFieldDate;
