import Typography from '@material-hu/mui/Typography';

import { type User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { buildGroupSegmentationList, buildIndividualUsersList } from '../utils';

type ColaboratorsListProps = {
  users?: Partial<User>[] | undefined;
  segmentations?: Record<string, string[]> | undefined;
};

type ColaboratorsListData = {
  titleKey: string;
  list: string;
  extraCount: string;
};

export const ColaboratorsList = ({
  users,
  segmentations,
}: ColaboratorsListProps) => {
  const { t } = useLokaliseTranslation('learning');

  if (!users && !segmentations) return null;

  let data: ColaboratorsListData | null = null;

  if (users && users.length > 0) {
    data = buildIndividualUsersList(users);
  }

  if (segmentations && Object.keys(segmentations).length > 0) {
    data = buildGroupSegmentationList(segmentations);
  }

  if (!data) return null;

  const { titleKey, list, extraCount } = data;

  return (
    <Typography
      variant="globalS"
      sx={{ maxWidth: '100%', wordBreak: 'break-word', textAlign: 'right' }}
    >
      <b>{t(titleKey)}: </b>
      {list}
      {extraCount}
    </Typography>
  );
};
