import React, {useCallback} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Chip} from '@components/_HuGo';

import {styles} from './styles';

interface Props {
  selectedSegmentationItems: {id: number; name: string}[];
  onToggleItem: (id: number) => void;
}

const SelectedGroups = ({
  selectedSegmentationItems,
  onToggleItem: onToggleItemProp,
}: Props) => {
  const {t} = useTranslation();
  const onToggleItem = useCallback(
    (item: number) => () => {
      onToggleItemProp(item);
    },
    [onToggleItemProp],
  );
  return (
    <View style={styles.container}>
      {selectedSegmentationItems?.length ? (
        selectedSegmentationItems.map(item => (
          <Chip
            key={item.id}
            text={item.name}
            showCloseIcon
            onClose={onToggleItem(item.id)}
          />
        ))
      ) : (
        <Chip text={t('post.all_the_company')} />
      )}
    </View>
  );
};

export default SelectedGroups;
