import React from 'react';
import {ScrollView, StyleProp, View, ViewStyle} from 'react-native';

import {ChipSize} from '../../interfaces';
import {CHIP_SIZES} from '../../constants';
import {Chip} from '../Chip';
import {styles} from './styles';

export interface ChipListItem {
  id: number;
  label: string;
}

interface Props {
  selected?: number;
  list: ChipListItem[];
  onItemPress?: (id: number) => void;
  onItemRemove?: (id: number) => void;
  showCloseIcon?: boolean;
  disabled?: boolean;
  size?: ChipSize;
  style?: StyleProp<ViewStyle>;
  contentContainerStyle?: StyleProp<ViewStyle>;
  showActiveIcon?: boolean;
}

export function Chips({
  selected,
  list,
  onItemPress,
  onItemRemove,
  showCloseIcon,
  disabled,
  style,
  contentContainerStyle,
  size = 'md',
  showActiveIcon,
}: Props) {
  return (
    <View style={[style, {height: CHIP_SIZES[size]}]}>
      <ScrollView
        horizontal
        contentContainerStyle={[styles.container, contentContainerStyle]}
        showsHorizontalScrollIndicator={false}>
        {list.map(item => (
          <Chip
            key={item.id}
            text={item.label}
            size={size}
            active={item.id === selected}
            showActiveIcon={showActiveIcon}
            disabled={disabled}
            showCloseIcon={showCloseIcon}
            onPress={() => onItemPress?.(item.id)}
            onClose={() => onItemRemove?.(item.id)}
          />
        ))}
      </ScrollView>
    </View>
  );
}
