import React, { FC, useState } from 'react';
import { View } from 'react-native';

import { Input } from '../../Input';
import { Modal } from '../../Modal';
import { Button } from '../../Button';
import SpinnerDatePicker from '../SpinnerDatePicker';

import CalendarIcon from '../../../../assets/icons/calendar.svg';
import { Colors } from 'src/theme';

type Props = {
  selectedDate?: (date: Date) => void;
  formikError?: string | boolean;
  headerTitle?: string;
  defaultDate?: Date;
};

//TODO: waiting for redesign in figma + input fixes

export const InputDatePicker: FC<Props> = ({
  selectedDate,
  formikError,
  headerTitle,
  defaultDate
}) => {
  const [visible, setVisible] = useState(false);
  const [spinnerSelectedDate, setSpinnerSelectedDate] = useState<Date>(defaultDate ?? new Date());

  const onButtonPress = () => {
    setVisible(false);
    if (selectedDate) {
      selectedDate(spinnerSelectedDate);
    }
  };

  return (
    <View>
      <Input
        icon={<CalendarIcon fill={Colors.LIGHT_GRAY} />}
        header={'Date of birth'}
        value={new Date(spinnerSelectedDate).toLocaleDateString()}
        isFocused={(b) => setVisible(b)}
        onBlur={() => {}}
        inputMode={'none'}
        placeholder={'Choose a birth date'}
        formikError={formikError}
      />
      <Modal
        visibleInPercent={'50%'}
        onRequestClose={() => setVisible(false)}
        headerTitle={headerTitle ?? 'Change me'}
        visible={visible}
      >
        <SpinnerDatePicker selectedDate={(date) => setSpinnerSelectedDate(date)} />
        <Button onPress={onButtonPress}>Done</Button>
      </Modal>
    </View>
  );
};
