import { lazy, Suspense, useState } from 'react';

import { useModal } from '@material-hu/hooks/useModal';
import { IconChevronDown } from '@material-hu/icons/tabler';

import MenuList, {
  type MenuListProps,
} from '@material-hu/components/composed-components/MenuList';
import Button from '@material-hu/components/design-system/Buttons/Button';
import Skeleton from '@material-hu/components/design-system/Skeleton';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useDownloadCourseReport } from 'src/pages/dashboard/Learning/Courses/hooks/useDownloadCourseReport';
import {
  type DownloadReportFnParams,
  type DownloadReportType,
} from 'src/pages/dashboard/Learning/Courses/types';
import { insertIf } from 'src/utils/arrayUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useBulkCertificatesDrawer } from './BulkCertificatesDrawer';

const DownloadReportsModal = lazy(() => import('./DownloadReportsModal'));

type DownloadReportsProps = {
  courseId: number;
  isDigitalSignature: boolean;
  issueCertificate: boolean;
  totalFinishedCourseUsers: number;
};

export const DownloadReports = ({
  courseId,
  isDigitalSignature,
  issueCertificate,
  totalFinishedCourseUsers,
}: DownloadReportsProps) => {
  const HugoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation('learning');
  const [downloadType, setDownloadType] =
    useState<DownloadReportType>('general');

  const downloadCourseReport = useDownloadCourseReport(courseId);

  const { drawer: bulkCertificatesDrawer, showBulkCertificatesDrawer } =
    useBulkCertificatesDrawer({ courseId });

  const {
    closeModal,
    showModal: showDownloadModal,
    modal: downloadModal,
  } = useModal(
    () => (
      <Suspense
        fallback={
          <Skeleton
            height={360}
            width="100%"
          />
        }
      >
        <DownloadReportsModal
          onClose={closeModal}
          loading={downloadCourseReport.isLoading}
          onDownloadReport={handleDownloadReport}
        />
      </Suspense>
    ),
    {
      fullWidth: true,
      maxWidth: 'sm',
      sx: { '& .MuiDialogContent-root': { pt: 0 } },
    },
  );

  const handleDownloadReport = (params: DownloadReportFnParams) => {
    downloadCourseReport.mutate({ downloadType, downloadParams: params });
  };

  const handleSelectDownloadType = (reportType: DownloadReportType) => {
    setDownloadType(reportType);
    if (reportType === 'bulk_certificates') {
      showBulkCertificatesDrawer({});
    } else {
      showDownloadModal();
    }
  };

  const options: MenuListProps['options'] = [
    {
      title: t('reports.type.general'),
      onClick: () => handleSelectDownloadType('general'),
    },
    ...insertIf(isDigitalSignature, {
      title: t('reports.type.attendance'),
      onClick: () => handleSelectDownloadType('attendance'),
    }),
    ...insertIf(issueCertificate && totalFinishedCourseUsers > 0, {
      title: t('reports.type.bulk_certificates'),
      onClick: () => handleSelectDownloadType('bulk_certificates'),
    }),
  ];

  return (
    <HugoThemeProvider>
      {downloadModal}
      {bulkCertificatesDrawer}
      <MenuList
        position="right"
        size="small"
        options={options}
        customButton={
          <Button
            variant="contained"
            endIcon={<IconChevronDown />}
          >
            {t('general:download')}
          </Button>
        }
      />
    </HugoThemeProvider>
  );
};
