import { type AxiosResponse } from 'axios';
import GetAppIcon from '@material-hu/icons/material/GetApp';
import Card from '@material-hu/mui/Card';
import CardContent from '@material-hu/mui/CardContent';
import Typography from '@material-hu/mui/Typography';

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

import useReportModal from 'src/pages/dashboard/Acknowledgements/hooks/useReportModal';
import { type GetReportParams } from 'src/types/acknowledgements';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type ReportProps = {
  fetchFn: (params: GetReportParams) => Promise<AxiosResponse>;
  fileName: string;
  downloadLabel?: string;
  showDateFilter?: boolean;
  showUserFields?: boolean;
  cardWrapper?: boolean;
};

const Report = ({
  fetchFn,
  fileName,
  downloadLabel = '',
  showDateFilter = true,
  showUserFields = false,
  cardWrapper = true,
}: ReportProps) => {
  const { t } = useLokaliseTranslation('acknowledgements');

  const { modal: reportModal, showModal: showReportModal } = useReportModal({
    fetchFn,
    fileName,
    filterProps: { showDateFilter, showUserFields },
  });

  const handleClick = () => showReportModal();

  if (!cardWrapper) {
    return (
      <>
        {reportModal}
        <Button
          onClick={handleClick}
          variant="contained"
          startIcon={<GetAppIcon />}
        >
          {t('report.download_excel')}
        </Button>
      </>
    );
  }

  return (
    <Card sx={{ mb: 2 }}>
      {reportModal}
      <CardContent
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexDirection: { xs: 'column', sm: 'row' },
          gap: 4,
        }}
      >
        <Typography>{downloadLabel}</Typography>
        <Button
          onClick={handleClick}
          variant="contained"
          startIcon={<GetAppIcon />}
        >
          {t('report.download_excel')}
        </Button>
      </CardContent>
    </Card>
  );
};

export default Report;
