import React from 'react';
import {TouchableOpacity} from 'react-native';
import Text from '@components/Text';
import Icon from '@components/Icon';
import ActivityIndicator from '@components/ActivityIndicator';
import {Opacity} from '@shared/constants';
import {COLORS} from '@shared/colors';

import {ButtonProps} from './interfaces';
import {getButtonStyles} from './utils';
import {styles} from './styles';

/**
 * @deprecated - Use `_HuGo/Button` instead
 */
function Button({
  text,
  loading,
  disabled,
  style,
  textStyle,
  leftIconName,
  iconColor,
  rightIconName,
  onPress,
  variant = 'contained',
  size = 'large',
  color = 'primary',
  ...props
}: ButtonProps) {
  const propStyles = getButtonStyles({variant, color, size, disabled});

  // Callback to avoid sending the event param to the `onPress` prop
  const handlePress = () => onPress?.();

  return (
    <TouchableOpacity
      activeOpacity={Opacity.MODERATE}
      disabled={disabled || loading}
      style={[styles.button, propStyles.containerStyle, style]}
      onPress={handlePress}
      {...props}>
      {loading ? (
        <ActivityIndicator
          color={propStyles.iconProps?.color || COLORS.WHITE}
        />
      ) : (
        <>
          {!!leftIconName && (
            <Icon
              name={leftIconName}
              {...propStyles.iconProps}
              color={iconColor || propStyles.iconProps?.color}
            />
          )}
          <Text variant="subtitle1" style={[propStyles.textStyle, textStyle]}>
            {text}
          </Text>
          {!!rightIconName && (
            <Icon
              name={rightIconName}
              {...propStyles.iconProps}
              color={iconColor || propStyles.iconProps?.color}
            />
          )}
        </>
      )}
    </TouchableOpacity>
  );
}

export default Button;