import React, { FC, useState } from 'react';
import { Colors } from '../../theme';
import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';

type Props = {
  selectedDate: (date: Date) => void;
};

const SpinnerDatePicker: FC<Props> = ({ selectedDate }) => {
  const [value, setValue] = useState<Date>(new Date());

  const onChange = (event: DateTimePickerEvent, selectedSpinnerDate?: Date) => {
    if (event.type === 'set') {
      selectedDate(selectedSpinnerDate!);
      setValue(selectedSpinnerDate!);
    }
  };

  return (
    <DateTimePicker
      value={value}
      textColor={Colors.DARK_BLUE}
      mode={'date'}
      display={'spinner'}
      onChange={onChange}
      minimumDate={new Date(1930, 0, 1)}
      maximumDate={new Date()}
    />
  );
};

export default SpinnerDatePicker;
