import { useMemo } from 'react';
import { useQuery } from 'react-query';

import { IconUsersGroup } from '@material-hu/icons/tabler';
import { StackProps } from '@material-hu/mui/Stack';

import useSegmentationGroups from 'src/hooks/queryHooks/useSegmentationGroups';
import { getAudienceCount } from 'src/services/usersService';
import { SegmentationType } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';

import SelectionSummaryCard from '../components/SelectionSummaryCard';
import { audienceKeys } from '../queries';

const SegmentationSelectionSummaryCard = ({
  segmentationGroups,
  contractStartDate,
  sx,
  onEdit,
  onDelete,
  disabled,
}: {
  segmentationGroups: Record<string, number[]>;
  contractStartDate?: string;
  sx?: StackProps['sx'];
  onEdit?: (assignmentId?: number) => void;
  onDelete?: (assignmentId?: number) => void;
  disabled?: boolean;
}) => {
  const { t } = useLokaliseTranslation(['audience']);
  const summaryTexts = [];

  const segmentationGroupsQuery = useSegmentationGroups({}, true);

  if (contractStartDate) {
    summaryTexts.push(
      t('segmented_users_hiring_date', {
        date: contractStartDate,
      }),
    );
  }

  const audienceCountQuery = useQuery({
    queryKey: audienceKeys.segmentationGroupsCount(segmentationGroups),
    queryFn: () =>
      getAudienceCount(
        {
          page: 0,
          limit: 10,
          segmentationItemIds: Object.values(segmentationGroups).flat(),
        },
        true,
      ),
    enabled: !!Object.values(segmentationGroups).flat().length,
  });

  const indexedSegmentationGroups = useMemo(() => {
    return Object.groupBy(
      segmentationGroupsQuery?.data?.map((group: SegmentationType) => ({
        ...group,
        items: Object.groupBy(group.items, item => item.id),
      })) || [],
      item => item.id,
    );
  }, [segmentationGroupsQuery.data]);

  summaryTexts.push(
    Object.entries(segmentationGroups)
      .map(([segmentationGroupId, segmentationGroupItems]) => {
        const matchingGroup =
          indexedSegmentationGroups[Number(segmentationGroupId)]?.[0];
        const lineTexts = [];
        const itemTexts = [];

        lineTexts.push(matchingGroup?.name);

        for (const itemId of segmentationGroupItems) {
          const matchingItem = matchingGroup?.items[itemId]?.[0];
          if (matchingItem) {
            itemTexts.push(matchingItem.name);
          }
        }

        return `${matchingGroup?.name}: ${itemTexts.join(', ')}`;
      })
      .join(' / '),
  );

  if (audienceCountQuery?.data?.data) {
    summaryTexts.push(
      t('reached_criteria_count', {
        count: audienceCountQuery?.data?.data.count,
      }),
    );
  }

  return (
    <SelectionSummaryCard
      Icon={IconUsersGroup}
      title={t('segmented_users_title')}
      loading={
        audienceCountQuery.isLoading || segmentationGroupsQuery?.isLoading
      }
      description={summaryTexts.join('\n')}
      sx={sx}
      onEdit={onEdit}
      onDelete={onDelete}
      disabled={disabled}
    />
  );
};

export default SegmentationSelectionSummaryCard;