import { Chip, Tooltip } from '@mui/material';

export const ORG_UNIT_TAGS_LIMIT = 2;

export const renderOrgUnitValue = (value, getItemProps) => {
  const visible = value.slice(0, ORG_UNIT_TAGS_LIMIT);
  const hidden = value.slice(ORG_UNIT_TAGS_LIMIT);

  const tags = visible.map((option, index) => {
    const { key, ...itemProps } = getItemProps({ index });
    return (
      <Chip
        key={key}
        label={option.title || ''}
        size="small"
        {...itemProps}
      />
    );
  });

  if (hidden.length > 0) {
    tags.push(
      <Tooltip
        key="org-unit-more-tags"
        title={hidden.map((option) => option.title).join(', ')}
        arrow
      >
        <Chip
          label={`+${hidden.length}`}
          size="small"
          className="MuiAutocomplete-tag"
        />
      </Tooltip>,
    );
  }

  return tags;
};