import React from 'react';
import { Platform, TouchableOpacity, Text, StyleSheet } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import { COLORS } from '../../constants';

type Props = {
  value: Date;
  minimumDate?: Date;
  onChange: (date: Date) => void;
  onDismiss: () => void;
};

export function DatePickerModal({ value, minimumDate, onChange, onDismiss }: Props) {
  return (
    <>
      <DateTimePicker
        value={value}
        mode="date"
        display={Platform.OS === 'ios' ? 'spinner' : 'default'}
        minimumDate={minimumDate}
        onChange={(event, date) => {
          if (Platform.OS === 'android') {
            onDismiss();
            if (event.type !== 'dismissed' && date) onChange(date);
          } else {
            if (date) onChange(date);
          }
        }}
      />
      {Platform.OS === 'ios' && (
        <TouchableOpacity style={styles.confirm} onPress={onDismiss}>
          <Text style={styles.confirmText}>Fertig</Text>
        </TouchableOpacity>
      )}
    </>
  );
}

const styles = StyleSheet.create({
  confirm: {
    alignSelf: 'flex-end',
    marginTop: 8,
    paddingHorizontal: 16,
    paddingVertical: 8,
    backgroundColor: COLORS.primary,
    borderRadius: 8,
  },
  confirmText: { color: '#fff', fontWeight: '600', fontSize: 14 },
});
