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

type ChipVariant = 'outline' | 'neutralLow' | 'staticWhite';
type ChipSize = 'small' | 'medium';
type ChipShape = 'pill' | 'round';

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

interface ChipPreset {
  backgroundColor: string;
  textColor: string;
  borderColor: string;
  borderWidth: number;
}

const CHIP_PRESETS: Record<ChipVariant, ChipPreset> = {
  outline: {
    backgroundColor: 'transparent',
    textColor: '#111827',
    borderColor: '#E5E7EB',
    borderWidth: 1,
  },
  neutralLow: {
    backgroundColor: '#F3F4F6',
    textColor: '#111827',
    borderColor: 'transparent',
    borderWidth: 0,
  },
  staticWhite: {
    backgroundColor: 'transparent',
    textColor: 'white',
    borderColor: 'white',
    borderWidth: 1,
  },
};

const SIZE_STYLES = {
  small: {
    height: 'h-[32px]',
    padding: 'px-[10px] py-[6px]',
    textProps: {
      face: 'body' as const,
      size: 'small' as const,
      weight: 'medium' as const,
    },
  },
  medium: {
    height: 'h-[36px]',
    padding: 'px-[12px] py-[6px]',
    textProps: {
      face: 'body' as const,
      size: 'medium' as const,
      weight: 'medium' as const,
    },
  },
};

interface ChipProps {
  variant?: ChipVariant;
  size?: ChipSize;
  shape?: ChipShape;
  text: string;
  disabled?: boolean;
  leftIcon?: IconProps;
  rightIcon?: IconProps;
  className?: string;
  style?: ViewStyle;
  onPress?: () => void;
}

export default function Chip({
  variant = 'outline',
  size = 'medium',
  shape = 'pill',
  text,
  disabled = false,
  leftIcon,
  rightIcon,
  className,
  style,
  onPress,
}: ChipProps) {
  const preset = CHIP_PRESETS[variant];
  const sizeStyle = SIZE_STYLES[size];
  const shapeClass = shape === 'pill' ? 'rounded-full' : 'rounded-lg';

  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
        ${sizeStyle.height}
        ${sizeStyle.padding}
        ${shapeClass}
        ${disabled ? 'opacity-50' : ''}
        ${className || ''}
       `}
      style={[
        {
          backgroundColor: getColor(preset.backgroundColor),
          borderWidth: preset.borderWidth,
          // borderColor: getColor(preset.borderColor),
          borderColor: getColor(preset.borderColor),
        },
        style,
      ]}
      onPress={onPress}
      disabled={disabled}
    >
      <View className="flex-row items-center justify-center">
        {leftIcon && (
          <View {...getMarginStyle(leftIcon.gap, true)}>{leftIcon.icon}</View>
        )}

        <Text
          {...sizeStyle.textProps}
          textColor={preset.textColor}
          className="px-[4px] leading-[1.25]"
        >
          {text}
        </Text>

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