import React, { useContext } from 'react';
import {
  StyleSheet,
  TouchableOpacity,
  TouchableOpacityProps,
} from 'react-native';
import {
  ApplicationContext,
  ComponentContext,
  MiniAppContext,
} from '../Context';
import { Colors } from '../Consts';
import { Icon } from '../Icon';
import styles from './styles';

export interface IconButtonProps extends TouchableOpacityProps {
  /**
   * Represents the name or key of the icon to be displayed on the IconButton.
   * It is a required property.
   */
  icon: string;

  /**
   * Optional. Defines the visual style of the IconButton.
   */
  type?: 'primary' | 'tonal' | 'secondary' | 'danger' | 'outline' | 'disabled';

  /**
   * Optional. Defines the size of the IconButton.
   */
  size?: 'large' | 'small';

  /**
   * Optional. Params auto tracking component.
   */
  params?: any;
}

const IconButton: React.FC<IconButtonProps> = ({
  type = 'primary',
  icon,
  size,
  params,
  ...rest
}) => {
  const { theme } = useContext(ApplicationContext);
  const context = useContext<any>(MiniAppContext);

  const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;

  /**
   * get size icon button
   */
  const getSizeStyle = () => {
    if (size === 'small') {
      return styles.small;
    }
    return styles.large;
  };

  /**
   * get style for icon button by type
   */
  const getTypeStyle = () => {
    switch (type) {
      case 'disabled':
        return {
          backgroundColor: theme.colors.background.disable,
        };
      case 'primary':
        return { backgroundColor: theme.colors.primary };
      case 'secondary':
        return {
          backgroundColor: theme.colors.background.surface,
          borderWidth: 1,
          borderColor: theme.colors.border.default,
        };
      case 'outline':
        return {
          backgroundColor: theme.colors.background.surface,
          borderWidth: 1,
          borderColor: theme.colors.primary,
        };
      case 'tonal':
        return {
          backgroundColor: theme.colors.background.tonal,
        };
      case 'danger':
        return {
          backgroundColor: theme.colors.error.primary,
        };
      default:
        return { backgroundColor: theme.colors.primary };
    }
  };

  /**
   * get color for icon
   */
  const getIconColor = () => {
    switch (type) {
      case 'disabled':
        return theme.colors.text.disable;
      case 'primary':
        return Colors.black_01;
      case 'danger':
        return Colors.black_01;
      case 'tonal':
        return theme.colors.primary;
      case 'secondary':
        return theme.colors.text.default;
      case 'outline':
        return theme.colors.primary;
      default:
        return Colors.black_01;
    }
  };

  const activeOpacity = type === 'disabled' ? 0.75 : 0.5;
  const buttonStyle = StyleSheet.flatten([getTypeStyle(), getSizeStyle()]);
  const iconSize = size === 'small' ? 16 : 24;

  return (
    <ComponentContext.Provider
      value={{
        componentName: 'IconButton',
        params,
        state: type === 'disabled' ? 'disabled' : 'enabled',
        action: 'click',
      }}
    >
      <TouchableOpacity
        {...rest}
        disabled={type === 'disabled'}
        activeOpacity={activeOpacity}
        style={[buttonStyle, showBaseLineDebug && styles.debugBaseLine]}
      >
        <Icon size={iconSize} source={icon} color={getIconColor()} />
      </TouchableOpacity>
    </ComponentContext.Provider>
  );
};

export { IconButton };