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

interface ToggleChipProps {
  label: string;
  leftIcon?: any;
  rightIcon?: any;
  onPress?: () => void;
  disabled?: boolean;
  selected?: boolean;
  size?: 'small' | 'medium';
  shape?: 'pill' | 'round';
  variant?: 'outline' | 'neutralLow';
}

const ToggleChip: React.FC<ToggleChipProps> = ({
  label,
  leftIcon,
  rightIcon,
  onPress,
  disabled = false,
  selected = false,
  size = 'small',
  shape = 'pill',
  variant = 'outline',
}) => {
  const getContainerStyle = () => {
    let baseStyle = `flex-row items-center ${
      size === 'medium' ? 'h-[36px] px-[12px]' : 'h-[32px] px-[10px]'
    } ${disabled ? 'opacity-50' : ''}`;

    // Shape 스타일
    baseStyle += ` ${shape === 'pill' ? 'rounded-full' : 'rounded-lg'}`;

    // Variant와 Selected 상태에 따른 스타일
    if (selected) {
      baseStyle += ' bg-[#111827] border border-[#111827]';
    } else {
      if (variant === 'outline') {
        baseStyle += ' border border-[#E5E7EB]';
      } else {
        baseStyle += ' bg-[#F3F4F6]';
      }
    }

    return baseStyle;
  };

  return (
    <TouchableOpacity
      activeOpacity={disabled ? 0.5 : 0.7}
      onPress={disabled ? undefined : onPress}
      className={getContainerStyle()}
    >
      {leftIcon && <View className="mr-[2px]">{leftIcon}</View>}
      <Text
        face="body"
        size="small"
        weight={selected ? 'bold' : 'medium'}
        textColor={selected ? 'white' : 'black'}
        className="px-[2px]"
      >
        {label}
      </Text>
      {rightIcon && <View className="ml-[2px]">{rightIcon}</View>}
    </TouchableOpacity>
  );
};

export default ToggleChip;