import { Pressable, StyleSheet, Text } from 'react-native';
import { colors, fonts, m3Colors, m3Shape, spacing } from '../theme/proulr-theme';
import { AppIcon, isAppIconName } from './app-icon';

export function Chip({
  label,
  active,
  onPress,
  variant = 'default',
  disabled,
  icon,
}: {
  label: string;
  active?: boolean;
  onPress?: () => void;
  variant?: 'default' | 'onHeader';
  disabled?: boolean;
  icon?: string;
}) {
  const isHeader = variant === 'onHeader';

  const containerStyle = active
    ? isHeader
      ? { backgroundColor: m3Colors.onPrimary, borderColor: m3Colors.onPrimary }
      : { backgroundColor: m3Colors.secondaryContainer, borderColor: m3Colors.outline }
    : isHeader
      ? { backgroundColor: colors.surfaceGlass, borderColor: colors.chromePillBorder }
      : { backgroundColor: m3Colors.surfaceContainerHigh, borderColor: m3Colors.outline };

  const textColor = active
    ? isHeader
      ? colors.headerStart
      : m3Colors.onSecondaryContainer
    : isHeader
      ? colors.textOnAccent
      : m3Colors.onSurfaceVariant;

  const iconName = icon && isAppIconName(icon) ? icon : null;

  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      style={[styles.chip, isHeader && styles.chipOnHeader, containerStyle]}
    >
      {iconName ? <AppIcon name={iconName} size={isHeader ? 14 : 15} color={textColor} /> : null}
      <Text
        style={{
          color: textColor,
          fontSize: isHeader ? 12 : 13,
          fontFamily: fonts.semibold,
        }}
      >
        {label}
      </Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  chip: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.xs,
    paddingHorizontal: spacing.sm,
    paddingVertical: spacing.sm,
    borderRadius: m3Shape.cornerSmall,
    borderWidth: 1,
  },
  chipOnHeader: {
    borderRadius: m3Shape.cornerFull,
    paddingHorizontal: spacing.sm + 2,
    paddingVertical: spacing.xs,
  },
});