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

import Dialog from '@material-hu/components/design-system/Dialog';

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

import useKnowledgeBaseAudience from '../../../hooks/useKnowledgeBaseAudience';
import { type KnowledgeBaseAudienceForm } from '../../../types';

type UploadConfirmDialogProps = KnowledgeBaseAudienceForm & {
  isLoading?: boolean;
  onCancel: () => void;
  onConfirm: () => void;
};

const UploadConfirmDialog = ({
  audienceType,
  segmentation,
  isLoading,
  onCancel,
  onConfirm,
}: UploadConfirmDialogProps) => {
  const { t } = useLokaliseTranslation('agents');

  const { totalCount: collaboratorsCount } = useKnowledgeBaseAudience({
    audienceType,
    segmentation,
  });

  return (
    <Dialog
      onClose={onCancel}
      title={t('upload.confirm_upload_title')}
      body={
        <Stack sx={{ minWidth: 492 }}>
          <Typography variant="globalS">
            {t('upload.confirm_upload_body', {
              count: collaboratorsCount,
            })}
          </Typography>
        </Stack>
      }
      primaryButtonProps={{
        children: t('general:upload_file'),
        onClick: onConfirm,
        loading: isLoading,
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        onClick: onCancel,
      }}
    />
  );
};

export default UploadConfirmDialog;