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 TextFieldTime: FC<props> = ({ title = 'Čas od', value, setValue }) => {
  const [isVisible, setIsVisible] = useState(false);

  const defaultDate = new Date();
  defaultDate.setHours(0);
  defaultDate.setMinutes(0);

  const onChange = (_: any, selectedDate: any) => {
    setValue(selectedDate);
    setIsVisible(false);
  };
  return (
    <>
      <TextFieldClickable
        title={title}
        value={value ? value.toTimeString().substring(0, 5) : ''}
        onPress={() => setIsVisible(true)}
        icon={<FontAwesome5 name="clock" size={20} />}
      />
      {isVisible && (
        <DateTimePicker
          value={value || defaultDate}
          mode="time"
          is24Hour={true}
          onChange={onChange}
        />
      )}
    </>
  );
};

export default TextFieldTime;
