import { PeopleExperience } from '@material-hu/components/composed-components/peopleExperience';

import useManagerParticipation from '../../../../../hooks/useManagerParticipation';
import { formatAmount } from '../../../../../utils/formatting';
import {
  type ParticipationListParams,
  SegmentType,
} from '../../../../../types';
import { useLokaliseTranslation } from 'src/utils/i18n';

const { ParticipationList: MHParticipationList } = PeopleExperience;

type UsersParticipationListProps = ParticipationListParams & {
  expanded?: boolean;
};

const ParticipationList = ({
  depth = 0,
  surveyId,
  parentId,
  limit,
  expanded = true,
  page,
  order,
  dimension,
  q,
}: UsersParticipationListProps) => {
  const { t } = useLokaliseTranslation('people_experience');

  const { data, isLoading, isPreviousData } = useManagerParticipation({
    depth,
    surveyId,
    parentId,
    limit,
    page,
    dimension,
    ...(depth === 0 && { order, q }),
    queryOptions: {
      enabled: expanded,
      keepPreviousData: true,
    },
  });

  return (
    <MHParticipationList
      items={data?.items}
      isLoading={isLoading}
      isPreviousData={isPreviousData}
      depth={depth}
      noDataMessage={t('NOT_ENOUGH_PARTICIPANTS')}
      emptyState={{
        title: t('NOT_ENOUGH_DATA_TITLE'),
        description: t('NOT_ENOUGH_DATA_DESCRIPTION'),
      }}
      formatRatioLabel={(completed, total) =>
        t('participation.ratio', {
          current: formatAmount(completed),
          total: formatAmount(total),
          count: total,
        })
      }
      renderChildren={(item, isExpanded) =>
        item.hasChildren ? (
          <ParticipationList
            depth={depth + 1}
            surveyId={surveyId}
            parentId={
              dimension === SegmentType.SEGMENTATION_GROUPS ? parentId : item.id
            }
            page={1}
            order={order}
            dimension={dimension}
            limit={item.childrenAmount}
            expanded={isExpanded}
          />
        ) : undefined
      }
    />
  );
};

export default ParticipationList;
