import * as React from 'react';
import {
  ActivityIndicator,
  Pressable,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
import { getColor } from './style-utils';
import Text from './text';

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

export type ButtonVariant =
  | 'primary'
  | 'primaryLow'
  | 'secondary'
  | 'secondaryLow'
  | 'outlined'
  | 'danger'
  | 'dangerLow';

interface ButtonPreset {
  backgroundColor: string;
  textColor: string;
}

const BUTTON_PRESETS: Record<ButtonVariant, ButtonPreset> = {
  primary: {
    backgroundColor: 'emerald-500',
    textColor: 'white',
  },
  primaryLow: {
    backgroundColor: 'rgba(16, 185, 129, 0.1)',
    textColor: 'emerald-500',
  },
  secondary: {
    backgroundColor: 'gray-900',
    textColor: 'white',
  },
  secondaryLow: {
    backgroundColor: 'gray-100',
    textColor: 'gray-900',
  },
  outlined: {
    backgroundColor: 'white',
    textColor: 'gray-900',
  },
  danger: {
    backgroundColor: 'red-500',
    textColor: 'white',
  },
  dangerLow: {
    backgroundColor: 'rgba(239, 68, 68, 0.1)',
    textColor: 'red-500',
  },
};

interface ButtonProps {
  variant?: ButtonVariant;
  text?: string;
  textColor?: string;
  backgroundColor?: string;
  width?: string;
  height?: string;
  shape?: 'pill' | 'round';
  radius?: string;
  loading?: boolean;
  disabled?: boolean;
  border?: BorderInterface;
  leftIcon?: IconProps;
  rightIcon?: IconProps;
  className?: string;
  style?: ViewStyle;
  onPress?: () => void;
}

export default function Button({
  variant,
  loading = false,
  text = 'default',
  textColor,
  backgroundColor,
  width = 'w-full',
  height = 'h-[56px]',
  shape,
  radius = 'rounded-2xl',
  disabled = false,
  border = { borderWidth: '0', borderColor: 'transparent' },
  onPress,
  leftIcon,
  rightIcon,
  className,
  style,
}: ButtonProps) {
  const preset = variant ? BUTTON_PRESETS[variant] : null;

  const defaultStyles = {
    backgroundColor: preset?.backgroundColor || 'black',
    textColor: preset?.textColor || 'white',
    border:
      variant === 'outlined'
        ? { borderWidth: '1', borderColor: 'gray-300' }
        : { borderWidth: '0', borderColor: 'transparent' },
    width: 'w-full',
    height: 'h-14',
    radius: shape === 'pill' ? 'rounded-full' : 'rounded-2xl',
  };

  const finalStyles = {
    backgroundColor: backgroundColor || defaultStyles.backgroundColor,
    textColor: textColor || defaultStyles.textColor,
    border:
      variant === 'outlined'
        ? { borderWidth: '1', borderColor: 'gray-300' }
        : border || defaultStyles.border,
    width: width || defaultStyles.width,
    height: height || defaultStyles.height,
    radius: shape
      ? shape === 'pill'
        ? 'rounded-full'
        : 'rounded-2xl'
      : radius || defaultStyles.radius,
  };

  const getMarginStyle = (gap?: string | number, isLeft: boolean = true) => {
    if (!gap) return {};
    if (typeof gap === 'number') {
      return isLeft ? { marginRight: gap } : { marginLeft: gap };
    }
    return { className: gap }; // string인 경우 className으로 반환
  };

  return (
    <TouchableOpacity
      activeOpacity={0.7}
      className={`
        flex-row items-center justify-center
        ${finalStyles.width} ${finalStyles.height} ${finalStyles.radius}
        ${disabled ? 'opacity-50' : ''}
        ${className || ''}  
      `}
      style={[
        {
          backgroundColor: getColor(finalStyles.backgroundColor),
          borderWidth: Number(finalStyles.border.borderWidth),
          borderColor: getColor(finalStyles.border.borderColor),
        },
        !className && style,
      ]}
      onPress={onPress}
      disabled={disabled || loading}
    >
      {loading ? (
        <ActivityIndicator
          size="small"
          color={getColor(finalStyles.textColor)}
        />
      ) : (
        <View className="flex-row items-center justify-center">
          {leftIcon && (
            <View {...getMarginStyle(leftIcon.gap, true)}>{leftIcon.icon}</View>
          )}

          {/* <Text
            className="text-center font-medium"
            style={{ color: getColor(finalStyles.textColor) }}
          >
            {text}
          </Text> */}

          <Text
            face="body"
            size="large"
            weight="semibold"
            className="px-[4px]"
            textColor={finalStyles.textColor}
          >
            {text}
          </Text>

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