import { Keyboard, View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import Datetimepicker from '@react-native-community/datetimepicker';
import React, { ComponentType } from 'react';
import ReactNativeSafeAreaView from 'react-native-safe-area-view';

import { isAndroid } from '../helpers/platform';
import { useTheme } from './ThemeContext';
import noop from '../helpers/noop';

export type mode = 'date' | 'time';

export type Props = {
  readonly mode?: mode;
  readonly onChange?: (date: Date) => void;
  readonly onDismiss?: () => void;
  readonly show?: boolean;
  readonly value?: Date;
};

const DateTimePickerIOS: ComponentType<Props> = ({
  show = false,
  mode = 'date',
  value = new Date(),
  onChange = noop,
  onDismiss = noop,
}: Props) => {
  const theme = useTheme();

  const [pickedDate, setPickedDate] = React.useState(value);

  const handleSelect = React.useCallback(() => {
    onChange(pickedDate);
    onDismiss();
  }, [pickedDate]);

  const handleChange = (_, date: Date | undefined) => {
    if (date !== undefined) {
      setPickedDate(date);
    }
  };

  React.useEffect(() => {
    if (show) {
      Keyboard.dismiss();
    }

    const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', onDismiss);
    setPickedDate(value);

    return () => keyboardWillShowListener.remove();
  }, [show, value]);

  if (!show) {
    return null;
  }

  return (
    <ReactNativeSafeAreaView forceInset={{ bottom: 'always', top: 'never' }} style={theme.dateTimePicker.wrapper}>
      <View style={theme.dateTimePicker.actions}>
        <TouchableOpacity onPress={onDismiss} style={theme.dateTimePicker.action}>
          <Text style={theme.dateTimePicker.actionText}>Cancel</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={handleSelect} style={theme.dateTimePicker.action}>
          <Text style={StyleSheet.flatten([theme.dateTimePicker.actionText, { fontWeight: '600' }])}>Done</Text>
        </TouchableOpacity>
      </View>
      <Datetimepicker mode={mode} display="spinner" value={pickedDate} onChange={handleChange} />
    </ReactNativeSafeAreaView>
  );
};

const DateTimePickerAndroid: ComponentType<Props> = ({
  show = false,
  mode = 'date',
  value = new Date(),
  onChange = noop,
  onDismiss = noop,
}: Props) => {
  const handleChange = (_, date: Date | undefined) => {
    onDismiss();
    if (date !== undefined) {
      onChange(date);
    }
  };

  if (!show) {
    return null;
  }

  return <Datetimepicker mode={mode} display="default" value={value} onChange={handleChange} />;
};

const DateTimePicker: ComponentType<Props> = ({
  show = false,
  mode = 'date',
  value = new Date(),
  onChange = noop,
  onDismiss = noop,
}: Props) => {
  return isAndroid ? (
    <DateTimePickerAndroid show={show} mode={mode} value={value} onChange={onChange} onDismiss={onDismiss} />
  ) : (
    <DateTimePickerIOS show={show} mode={mode} value={value} onChange={onChange} onDismiss={onDismiss} />
  );
};

export default DateTimePicker;