import DateTimePicker from '@react-native-community/datetimepicker';
import React, { useCallback, useMemo } from 'react';
import {
  Modal,
  Platform,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import AppText from './AppText';

type Props = {
  value: Date;
  onChange: (date: Date) => void;
  showPicker: boolean;
  setShowPicker: (showPicker: boolean) => void;
  maximumDate?: Date;
};

const DatePickerInput = ({
  value,
  onChange,
  setShowPicker,
  maximumDate,
  showPicker,
}: Props) => {
  const onDateChange = useCallback(
    (event: any, selectedDate?: Date) => {
      const currentDate = selectedDate || value;
      if (Platform.OS !== 'ios') setShowPicker(false);
      onChange(currentDate);
    },
    [value, onChange, setShowPicker],
  );

  const handleClosePicker = useCallback(() => {
    setShowPicker(false);
  }, [setShowPicker]);

  const renderPicker = useMemo(() => {
    if (!showPicker) return null;

    if (Platform.OS === 'ios') {
      return (
        <Modal transparent animationType="slide">
          <View style={styles.modalContainer}>
            <View style={styles.pickerContainer}>
              <DateTimePicker
                value={value}
                mode="date"
                display="spinner"
                onChange={onDateChange}
              />
              <TouchableOpacity
                onPress={handleClosePicker}
                style={styles.doneButton}
              >
                <AppText style={styles.doneText}>Done</AppText>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      );
    }

    return (
      <>
        {showPicker && (
          <DateTimePicker
            value={value}
            mode="date"
            display="default"
            maximumDate={maximumDate}
            onChange={(event, selectedDate) => {
              setShowPicker(false);
              if (event.type === 'set' && selectedDate) {
                onChange(selectedDate);
              }
            }}
          />
        )}
      </>
    );
  }, [showPicker, value, onDateChange, handleClosePicker]);

  return <View>{renderPicker}</View>;
};

const styles = StyleSheet.create({
  label: { fontSize: 16, fontWeight: '500' },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    position: 'relative',
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 6,
    paddingRight: 36,
  },
  input: {
    flex: 1,
    padding: 12,
    fontSize: 16,
  },
  iconButton: {
    position: 'absolute',
    right: 8,
    padding: 8,
  },
  helperText: {
    marginTop: 8,
    fontSize: 14,
    color: '#555',
  },
  boldText: {
    fontFamily: 'GolosText-Bold',
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'flex-end',
    backgroundColor: '#00000055',
  },
  pickerContainer: {
    backgroundColor: 'white',
    padding: 16,
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
  },
  doneButton: {
    marginTop: 12,
    alignSelf: 'flex-end',
    padding: 8,
  },
  doneText: {
    color: '#007AFF',
    fontFamily: 'GolosText-Bold',
    fontSize: 16,
  },
});

export default DatePickerInput;
