import { useState } from 'react';

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

import HuMenuList from '@material-hu/components/composed-components/MenuList';
import Button from '@material-hu/components/design-system/Buttons/Button';
import HuDialog from '@material-hu/components/design-system/Dialog';
import { MenuProps } from '@material-hu/components/design-system/Menu/types';

import { FileExtensions } from 'src/constants/filesPreview';
import { useDownloadReport } from 'src/hooks/queryHooks/vacations';
import { AdvancedReport } from 'src/pages/dashboard/timeOff/components/shared';
import {
  ReportType,
  TabManagementType,
  VacationsFilterValues,
} from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type DowloadReportMenuProps = Pick<MenuProps, 'open' | 'anchorEl'> & {
  onClose: () => void;
  reportType: ReportType;
  filters: VacationsFilterValues;
  countRequestManager?: number;
};

export const DowloadReportMenu = (props: DowloadReportMenuProps) => {
  const {
    onClose = () => null,
    reportType,
    filters,
    countRequestManager,
  } = props;

  const [openAdvancedReport, setOpenAdvancedReport] = useState(false);

  const { t } = useLokaliseTranslation('time_off');

  const {
    modal: sendedByEmailModal,
    showModal: showSendedByEmailModal,
    closeModal: closeSendedByEmailModal,
  } = useModal(
    HuDialog,
    {},
    {
      title: t('WE_WILL_SEND_THE_REPORT_TITLE'),
      textBody: t('WE_WILL_SEND_THE_REPORT_DESCRIPTION'),
      primaryButtonProps: {
        children: t('ACCEPT'),
        onClick: () => closeSendedByEmailModal(),
      },
    },
  );

  const downloadReportMutation = useDownloadReport(
    filters,
    reportType,
    onClose,
    TabManagementType.MANAGEMENT_TAB_SIMPLE_DOWNLOAD,
    showSendedByEmailModal,
  );

  const downloadXlsxDocument = () => {
    downloadReportMutation.mutate({
      fileExtension: FileExtensions.XLSX,
      countRequestManager: countRequestManager ?? 0,
    });
  };

  const downloadCsvDocument = () => {
    downloadReportMutation.mutate({
      fileExtension: FileExtensions.CSV,
      countRequestManager: countRequestManager ?? 0,
    });
  };

  const handleOnClose = () => setOpenAdvancedReport(false);
  const handleOnClick = () => {
    setOpenAdvancedReport(true);
    onClose();
  };

  const options = [
    {
      title: t('DOWNLOAD_XLSX'),
      onClick: downloadXlsxDocument,
      disabled: downloadReportMutation.isLoading,
    },
    {
      title: t('DOWNLOAD_CSV'),
      onClick: downloadCsvDocument,
      disabled: downloadReportMutation.isLoading,
    },
    {
      title: t('ADVANCED_OPTIONS'),
      onClick: handleOnClick,
      disabled: downloadReportMutation.isLoading,
    },
  ];

  return (
    <>
      {sendedByEmailModal}
      <HuMenuList
        options={options}
        customButton={
          <Button
            variant="secondary"
            startIcon={<IconDownload />}
          >
            {t('DOWNLOAD_REPORT')}
          </Button>
        }
      />
      <AdvancedReport
        filters={filters}
        reportType={reportType}
        open={openAdvancedReport}
        onClose={handleOnClose}
        countRequestManager={countRequestManager}
        showSendedByEmailModal={showSendedByEmailModal}
      />
    </>
  );
};

export default DowloadReportMenu;