import { useQuery } from 'react-query';

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

import { getAudienceCount } from 'src/services/usersService';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { formatTextDate } from 'src/utils/timeUtils';

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

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

  const summaryTexts = [];

  const audienceCountQuery = useQuery({
    queryKey: audienceKeys.count(),
    queryFn: () =>
      getAudienceCount(
        {
          page: 0,
          limit: 10,
        },
        true,
      ),
  });

  if (contractStartDate) {
    summaryTexts.push(
      [
        t('all_users_that_start_their_contract'),
        formatTextDate(contractStartDate),
      ].join(' '),
    );
  }

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

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

export default AllSelectionSummaryCard;