import { Pressable } from '@ankhorage/surface';
import React from 'react';

import type { ChipInteractionState, ChipProps } from '../../../../types/chip';
import { Icon } from '../../../icon/public';
import { resolveIconSize } from '../../../icon/utils/resolveIconSize';
import { View } from '../../../layout/public';
import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
import { Text } from '../../../typography/public';
import { resolveChipColors } from '../../utils/resolveChipColors';
/***
 * Compact pill-like control for filters, tags, and quick selections.
 */
export const Chip = withZoraThemeScope(ChipInner);

function resolveChipPadding(size: NonNullable<ChipProps['size']>): {
  px: 's' | 'm';
  py: 'xxs' | 'xs';
} {
  switch (size) {
    case 's':
      return { px: 's', py: 'xxs' };
    case 'm':
      return { px: 'm', py: 'xs' };
    case 'l':
    default:
      return { px: 'm', py: 'xs' };
  }
}

function ChipInner({
  themeId: _themeId,
  mode: _mode,
  testID,
  children,
  icon,
  selected = false,
  disabled = false,
  color = 'neutral',
  size = 's',
  interactionPolicy,
  onPress,
}: ChipProps) {
  const { theme } = useZoraTheme();
  const padding = resolveChipPadding(size);
  const iconSize = resolveIconSize(size);

  const renderContent = (state: ChipInteractionState) => {
    const colors = resolveChipColors({ theme, color, selected, state });
    const textColor = state.disabled
      ? undefined
      : selected && color !== 'neutral'
        ? color
        : undefined;
    const textEmphasis = state.disabled ? 'muted' : 'default';

    return (
      <View
        bg={colors.backgroundColor}
        borderColor={colors.borderColor}
        borderWidth={1}
        px={padding.px}
        py={padding.py}
        radius="full"
        style={{
          alignSelf: 'flex-start',
          opacity: colors.opacity,
        }}
      >
        <View direction="row" align="center" gap="xs" wrap="nowrap">
          {icon ? <Icon {...icon} color={colors.contentColor} size={iconSize} /> : null}
          <Text color={textColor} emphasis={textEmphasis} variant="label">
            {children}
          </Text>
        </View>
      </View>
    );
  };

  if (!onPress) {
    return renderContent({ disabled, focused: false, hovered: false, pressed: false });
  }

  return (
    <Pressable
      disabled={disabled}
      interactionPolicy={interactionPolicy}
      onPress={onPress}
      radius="full"
      testID={testID}
    >
      {(state) => renderContent(state)}
    </Pressable>
  );
}