import {
  Keyboard,
  Modal,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import React, { useCallback, useState, useEffect, ComponentType } from 'react';
import ReactNativeSafeAreaView from 'react-native-safe-area-view';
import { Picker } from '@react-native-picker/picker';

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

type Option = {
  label: string;
  value: string;
};

const isEmptyString = (str: string) => str.length === 0;

const getFirstOptionValue = (options: Option[]) => {
  const option = options[0];
  if (option !== undefined) {
    return option.value;
  }
  return '';
};

type SelectProps = {
  readonly options?: Option[];
  readonly show?: boolean;
  readonly value?: string;
  readonly onChange?: (v: string) => void;
  readonly onDismiss?: () => void;
};

const SelectIOS: ComponentType<Required<SelectProps>> = ({ options, show, value, onChange, onDismiss }) => {
  const theme = useTheme();

  const [pickedValue, setPickedValue] = useState(value);

  const handleChange = useCallback(() => {
    onChange(isEmptyString(pickedValue) ? getFirstOptionValue(options) : pickedValue);
    onDismiss();
  }, [pickedValue, options]);

  useEffect(() => {
    if (show) {
      Keyboard.dismiss();
    }
    const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', onDismiss);
    setPickedValue(value);

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

  if (!show) {
    return null;
  }

  return (
    <ReactNativeSafeAreaView forceInset={{ bottom: 'always' }} style={theme.select.wrapper}>
      <View style={theme.select.actions}>
        <TouchableOpacity onPress={onDismiss} style={theme.select.action}>
          <Text style={theme.select.actionText}>Cancel</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={handleChange} style={theme.select.action}>
          <Text style={StyleSheet.flatten([theme.select.actionText, { fontWeight: '600' }])}>Done</Text>
        </TouchableOpacity>
      </View>
      <Picker selectedValue={pickedValue} onValueChange={value => setPickedValue(value)}>
        {options.map(option => (
          <Picker.Item key={option.value} label={option.label} value={option.value} />
        ))}
      </Picker>
    </ReactNativeSafeAreaView>
  );
};

const SelectAndroid: ComponentType<Required<SelectProps>> = ({ options, show, value, onChange, onDismiss }) => {
  const theme = useTheme();

  const handleChange = value => {
    onChange(value);
    onDismiss();
  };

  return (
    <Modal visible={show} transparent animationType="fade">
      <TouchableWithoutFeedback onPress={onDismiss}>
        <View style={theme.select.overlay}>
          <View style={theme.select.dialog}>
            <ScrollView style={{ flexGrow: 0.0 }}>
              {options.map(option => (
                <TouchableOpacity
                  key={option.value}
                  onPress={() => handleChange(option.value)}
                  style={theme.select.optionWrapper}
                >
                  <Text
                    style={StyleSheet.flatten([
                      theme.select.optionText,
                      option.value === value ? theme.select.selectedOptionText : {},
                    ])}
                  >
                    {option.label}
                  </Text>
                </TouchableOpacity>
              ))}
            </ScrollView>
          </View>
        </View>
      </TouchableWithoutFeedback>
    </Modal>
  );
};

const Select: ComponentType<SelectProps> = ({
  options = [],
  show = false,
  value = '',
  onChange = noop,
  onDismiss = noop,
}) => {
  return isAndroid ? (
    <SelectAndroid options={options} show={show} value={value} onChange={onChange} onDismiss={onDismiss} />
  ) : (
    <SelectIOS options={options} show={show} value={value} onChange={onChange} onDismiss={onDismiss} />
  );
};

export default Select;