import * as React from 'react';
import { TouchableOpacity, View } from 'react-native';
import Text from './text';

type TextButtonVariant = 'brand' | 'neutral' | 'neutralLow' | 'inverse';
type TextButtonSize = 'small' | 'medium' | 'large';

interface IconProps {
  icon: React.ReactNode;
  gap?: string | number;
}

interface TextButtonPreset {
  textColor: string;
}

const TEXT_BUTTON_PRESETS: Record<TextButtonVariant, TextButtonPreset> = {
  brand: {
    textColor: 'emerald-500', // #10B981
  },
  neutral: {
    textColor: 'gray-900',
  },
  neutralLow: {
    textColor: 'gray-500',
  },
  inverse: {
    textColor: 'white',
  },
};

const SIZE_PRESETS: Record<TextButtonSize, string> = {
  small: 'text-prime-text-13',
  medium: 'text-prime-text-15',
  large: 'text-prime-text-16',
};

interface TextButtonProps {
  variant?: TextButtonVariant;
  size?: TextButtonSize;
  text: string;
  disabled?: boolean;
  bold?: boolean;
  underline?: boolean;
  leftIcon?: IconProps;
  rightIcon?: IconProps;
  className?: string;
  onPress?: () => void;
}

export default function TextButton({
  variant = 'neutral',
  size = 'medium',
  text,
  disabled = false,
  bold = false,
  underline = false,
  leftIcon,
  rightIcon,
  className,
  onPress,
}: TextButtonProps) {
  const preset = TEXT_BUTTON_PRESETS[variant];

  const getMarginStyle = (gap?: string | number, isLeft: boolean = true) => {
    if (!gap) return {};
    if (typeof gap === 'number') {
      return isLeft ? { marginRight: gap } : { marginLeft: gap };
    }
    return { className: gap };
  };

  return (
    <TouchableOpacity
      activeOpacity={0.7}
      className={`flex-row items-center justify-center ${className || ''}`}
      onPress={onPress}
      disabled={disabled}
    >
      <View className="flex-row items-center justify-center">
        {leftIcon && (
          <View {...getMarginStyle(leftIcon.gap, true)}>{leftIcon.icon}</View>
        )}

        <Text
          face="body"
          size={size}
          weight={bold ? 'bold' : 'regular'}
          textColor={preset.textColor}
          className={`${underline ? 'underline' : ''} ${
            disabled ? 'opacity-50' : ''
          }`}
        >
          {text}
        </Text>

        {rightIcon && (
          <View {...getMarginStyle(rightIcon.gap, false)}>
            {rightIcon.icon}
          </View>
        )}
      </View>
    </TouchableOpacity>
  );
}