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

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!);
    }
  };

  const onChangeAndroid = (selectedSpinnerDate?: Date) => {
    selectedDate(selectedSpinnerDate!);
    setValue(selectedSpinnerDate!);
  };

  if (!value) return

  return Platform.OS === 'ios' ? (
    <DateTimePicker
      value={value}
      textColor={Colors.DARK_BLUE}
      mode={'date'}
      display={'spinner'}
      onChange={onChange}
      minimumDate={new Date(1930, 0, 1)}
      maximumDate={new Date()}
    />
  ) : (
    <DatePicker
      date={value}
      style={{
        backgroundColor: 'white',
        width: undefined,
        marginVertical: 16,
        height: 215
      }}
      onDateChange={onChangeAndroid}
      minimumDate={new Date(1930, 0, 1)}
      maximumDate={new Date()}
      textColor={Colors.DARK_BLUE}
      textSize={21}
    />
  );
};

export default SpinnerDatePicker;