import React from 'react';

import type { ChipGroupItem, ChipGroupProps } from '../../../../types/chip-group';
import { View } from '../../../layout/public';
import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
import { Chip } from '../../public';
/***
 * Renders a row or wrap layout of `Chip` items.
 */
export const ChipGroup = withZoraThemeScope(ChipGroupInner);

function hasValue<TValue extends string>(values: readonly TValue[], value: TValue): boolean {
  return values.includes(value);
}

function toggleValue<TValue extends string>(values: readonly TValue[], value: TValue): TValue[] {
  return hasValue(values, value) ? values.filter((item) => item !== value) : [...values, value];
}

function ChipGroupInner<TValue extends string = string>({
  themeId: _themeId,
  mode: _mode,
  testID,
  items,
  value,
  onValueChange,
  multiple,
  color = 'neutral',
  size = 's',
  wrap = true,
  disabled,
  interactionPolicy,
}: ChipGroupProps<TValue>) {
  const passive = interactionPolicy === 'passive';

  const renderChip = (item: ChipGroupItem<TValue>) => {
    const itemDisabled = disabled === true || item.disabled === true;
    const isSelected = Array.isArray(value) ? hasValue(value, item.value) : value === item.value;

    const handlePress = () => {
      if (passive) return;
      if (multiple) {
        const next = toggleValue(value ?? [], item.value);
        onValueChange?.(next);
        return;
      }

      onValueChange?.(item.value);
    };

    return (
      <Chip
        interactionPolicy={interactionPolicy}
        key={item.value}
        disabled={itemDisabled}
        icon={item.icon}
        onPress={handlePress}
        selected={isSelected}
        size={size}
        testID={item.testID}
        color={color}
      >
        {item.label}
      </Chip>
    );
  };

  return (
    <View direction="row" align="center" gap="s" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>
      {items.map(renderChip)}
    </View>
  );
}