import React from 'react';
import { StyleSheet } from 'react-native';
import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';

interface NativeDateTimeInputProps {
  value: Date | null;
  mode: 'date' | 'time';
  isVisible: boolean;
  onChange: (event: DateTimePickerEvent, date?: Date) => void;
  onDismiss: () => void;
  testID?: string;
  is24Hour?: boolean;
}

export default function NativeDateTimeInput({
  value,
  mode,
  isVisible,
  onChange,
  onDismiss,
  is24Hour,
}: NativeDateTimeInputProps) {
  if (!isVisible) return null;

  const handleChange = (event: DateTimePickerEvent, date?: Date) => {
    if (event.type === 'set' && date) {
      onChange(event, date);
    }
    onDismiss();
  };

  return (
    <DateTimePicker
      testID="date-time-picker"
      value={value ?? new Date()}
      mode={mode}
      display="default"
      is24Hour={is24Hour ?? false}
      themeVariant="dark"
      onChange={handleChange}
      style={styles.picker}
    />
  );
}

const styles = StyleSheet.create({
  picker: {
    width: 0,
    height: 0,
  },
});