import {
  Text,
  ActivityIndicator,
  TouchableOpacity,
  StyleSheet,
  View,
  Keyboard,
  StyleProp,
  ViewStyle,
  TextStyle,
} from 'react-native';
import React, { ComponentType } from 'react';

import { ThemeType } from '../themes/hero';
import { useTheme } from './ThemeContext';
import hasHomeBar from '../helpers/hasHomeBar';

const Wrapper = ({
  enabled,
  onPress,
  style,
  children,
}: {
  enabled: boolean;
  onPress?: () => void;
  style: StyleProp<ViewStyle>;
  children: React.ReactElement;
}) => {
  if (!enabled) {
    return <View style={style}>{children}</View>;
  } else {
    return (
      <TouchableOpacity onPress={onPress} style={style}>
        {children}
      </TouchableOpacity>
    );
  }
};

export type Props = {
  readonly buttonStyle?: StyleProp<ViewStyle>;
  readonly disabled?: boolean;
  readonly forceInset?: string;
  readonly loading?: boolean;
  readonly onPress?: () => void;
  readonly text: string;
  readonly textStyle?: StyleProp<TextStyle>;
  readonly wrapperStyle?: StyleProp<ViewStyle>;
};

const getThemeWrapperStyle = (
  forceInset: string | undefined,
  showKeyboard: boolean,
  theme: ThemeType,
): ThemeType['bottomButton']['wrapperWithHomeBar'] => {
  if (forceInset) {
    switch (forceInset) {
      case 'always':
        return theme.bottomButton.wrapperWithHomeBar;
      case 'never':
        return theme.bottomButton.wrapperWithoutHomeBar;
      default: {
        return theme.bottomButton.wrapperWithoutHomeBar;
      }
    }
  }
  return !showKeyboard && hasHomeBar()
    ? theme.bottomButton.wrapperWithHomeBar
    : theme.bottomButton.wrapperWithoutHomeBar;
};

const BottomButton: ComponentType<Props> = ({
  text,
  onPress,
  disabled = false,
  loading = false,
  forceInset,
  wrapperStyle = {},
  buttonStyle = {},
  textStyle = {},
}: Props) => {
  const theme = useTheme();

  const [showKeyboard, setShowKeyboard] = React.useState(() => false);

  React.useEffect(() => {
    const listener = Keyboard.addListener('keyboardWillShow', () => setShowKeyboard(() => true));
    return () => {
      listener.remove();
    };
  }, []);

  React.useEffect(() => {
    const listener = Keyboard.addListener('keyboardWillHide', () => setShowKeyboard(() => false));
    return () => {
      listener.remove();
    };
  }, []);

  const themeWrapperStyle = getThemeWrapperStyle(forceInset, showKeyboard, theme);

  return (
    <Wrapper
      enabled={!loading && !disabled}
      style={StyleSheet.flatten([
        theme.bottomButton.wrapper,
        themeWrapperStyle,
        disabled ? theme.bottomButton.disabledWrapper : {},
        wrapperStyle,
      ])}
      onPress={onPress}
    >
      <View style={StyleSheet.flatten([theme.bottomButton.button, buttonStyle])}>
        {loading && !disabled ? (
          <ActivityIndicator size="small" color={theme.bottomButton.loadingIndicator.color} />
        ) : (
          <Text
            style={StyleSheet.flatten([
              theme.bottomButton.text,
              disabled ? theme.bottomButton.disabledText : {},
              textStyle,
            ])}
          >
            {text}
          </Text>
        )}
      </View>
    </Wrapper>
  );
};

export default BottomButton;