import SegmentationGroupItemsSelection, {
  type SegmentationGroupItemsSelectionProps,
} from '@material-hu/components/composed-components/audience/SegmentationGroupItemsSelection';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { type KnowledgeBaseAudienceSegmentation } from '../../types';

type KnowledgeBaseSegmentationProps = {
  segmentationsQuery: SegmentationGroupItemsSelectionProps['segmentationsQuery'];
  segmentation: KnowledgeBaseAudienceSegmentation;
  onChange: (segmentation: KnowledgeBaseAudienceSegmentation) => void;
};

const KnowledgeBaseSegmentation = ({
  segmentationsQuery,
  segmentation,
  onChange,
}: KnowledgeBaseSegmentationProps) => {
  const { t } = useLokaliseTranslation('agents');

  return (
    <SegmentationGroupItemsSelection
      segmentationsQuery={segmentationsQuery}
      segmentationsQueryDataParser={data => data ?? []}
      value={segmentation}
      onChange={({ selectedSegmentationIds }) =>
        onChange(selectedSegmentationIds)
      }
      slotProps={{
        collapsibleSelectionList: {
          sx: {
            backgroundColor: ({ palette }) =>
              palette.new.border.neutral.divider,
          },
          slotProps: {
            accordion: {
              getDescription: (selected, total) =>
                t('general:selected_items', {
                  selected: selected.size,
                  total,
                }),
            },
          },
        },
      }}
    />
  );
};

export default KnowledgeBaseSegmentation;