import { useMemo } from 'react';

import useSelectedCollaboratorsDrawer from '@material-hu/components/composed-components/audience/hooks/useSelectedCollaboratorsDrawer';
import Alert from '@material-hu/components/design-system/Alert';

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

import useGetAudienceCount from 'src/components/Audience/hooks/useGetAudienceCount';
import {
  type AudienceQuery,
  type SegmentationExpressionPayload,
} from 'src/components/Audience/types';
import { audienceQueryToSegmentationExpression } from 'src/components/Audience/utils/audienceQueryToSegmentationExpression';
import { getCollaboratorsService } from 'src/components/Audience/utils/getCollaboratorsService';

import { librariesKeys } from '../../queries';

type ArticleAudienceListDrawerProps = {
  articleId: number;
  titleKey: string;
  audiencesQuery: AudienceQuery;
};

const ArticleAudienceListDrawer = ({
  audiencesQuery,
  articleId,
  titleKey,
}: ArticleAudienceListDrawerProps) => {
  const { t } = useLokaliseTranslation('libraries');

  const expression: SegmentationExpressionPayload | null = useMemo(
    () => audienceQueryToSegmentationExpression(audiencesQuery),
    [audiencesQuery],
  );

  const { data: audienceCount = 0, isLoading: isCountLoading } =
    useGetAudienceCount(expression, articleId);

  const { selectedCollaboratorsDrawer, showSelectedCollaboratorsDrawer } =
    useSelectedCollaboratorsDrawer();

  const handleOpenSelectedCollaboratorsDrawer = () => {
    showSelectedCollaboratorsDrawer({
      queryKey: `${librariesKeys.audience.selectedCollaborators().join(', ')}-${articleId}`,
      totalCount: audienceCount,
      service: expression ? getCollaboratorsService(expression) : undefined,
    });
  };

  return (
    <>
      {selectedCollaboratorsDrawer}
      <Alert
        loading={isCountLoading}
        severity="info"
        title={t(titleKey, { count: audienceCount })}
        action={{
          text: t('article.collaborators.see'),
          onClick: handleOpenSelectedCollaboratorsDrawer,
        }}
        sx={{ '& .MuiSkeleton-root': { minHeight: '36px' } }}
      />
    </>
  );
};

export default ArticleAudienceListDrawer;