import React, { ComponentType, ReactElement } from 'react';
import {
  View,
  StyleSheet,
  TouchableOpacity,
  ActivityIndicator,
  Text,
  TextStyle,
  ViewStyle,
  StyleProp,
} from 'react-native';
import { ThemeType } from '../themes/hero';
import { useTheme } from './ThemeContext';

const getStylesByVariant = (variant: ButtonProps['variant'] | undefined, styles: ThemeType['button']) => {
  switch (variant) {
    case 'outlined': {
      return {
        wrapper: styles.outlinedWrapper,
        text: styles.outlinedText,
        loadingIndicator: styles.outlinedLoadingIndicator,
      };
    }
    default: {
      return {
        wrapper: styles.filledWrapper,
        text: styles.filledText,
        loadingIndicator: styles.filledLoadingIndicator,
      };
    }
  }
};

export interface ButtonProps {
  /**
   * Disabled state of button.
   * */
  disabled?: boolean;

  /**
   * Loading state of button.
   * */
  loading?: boolean;

  /**
   * Set the handler to handle press event.
   */
  onPress: () => void;

  /**
   * Testing id of component
   */
  testID?: string;

  /**
   * Button label
   * */
  text: string;

  /**
   * style of button label
   * */
  textStyle?: StyleProp<TextStyle>;

  /**
   * button type
   * */
  variant?: 'outlined' | 'filled';

  /**
   * style of outer element
   * */
  wrapperStyle?: StyleProp<ViewStyle>;
}

const Button = ({
  disabled = false,
  loading = false,
  onPress,
  testID,
  text,
  textStyle = {},
  variant,
  wrapperStyle = {},
}: ButtonProps): ReactElement => {
  const theme = useTheme();

  const styles = getStylesByVariant(variant, theme.button);

  const Wrapper: ComponentType = ({ children }) => {
    const style = StyleSheet.flatten([
      theme.button.wrapper,
      styles.wrapper,
      disabled ? theme.button.disabledWrapper : {},
      wrapperStyle,
    ]);

    if (loading || disabled) {
      return <View testID={testID} style={style} children={children} />;
    } else {
      return (
        <TouchableOpacity testID={testID} activeOpacity={0.2} onPress={onPress} style={style} children={children} />
      );
    }
  };

  return (
    <Wrapper>
      {loading && !disabled ? (
        <ActivityIndicator size="small" color={styles.loadingIndicator.color} />
      ) : (
        <Text
          style={StyleSheet.flatten([
            theme.button.text,
            styles.text,
            disabled ? theme.button.disabledText : {},
            textStyle,
          ])}
        >
          {text}
        </Text>
      )}
    </Wrapper>
  );
};

export default Button;