import { useState } from 'react';

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

import { useGetManagerTypes } from 'src/hooks/queryHooks/vacations';
import { DowloadReportMenu } from 'src/pages/dashboard/timeOff/components/shared';
import { type VacationsFilterReturn } from 'src/pages/dashboard/timeOff/components/shared/useVacationsFilter';
import { type ReportType } from 'src/types/vacations';

type ManagerViewHeaderProps = {
  filters: VacationsFilterReturn;
  countRequestManager?: number;
  title: string;
  reportType?: ReportType;
  isManagerView?: boolean;
};

const ManagerViewHeader = (props: ManagerViewHeaderProps) => {
  const {
    filters,
    title,
    reportType = null,
    countRequestManager,
    isManagerView = true,
  } = props;

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const { isAdmin, isManager } = useGetManagerTypes();

  const handleCloseMenu = () => setAnchorEl(null);

  const canShowDownloadButton = (isAdmin || isManager) && isManagerView;

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        mt: 3,
        mb: 2,
        gap: 1,
        justifyContent: 'space-between',
        width: '100%',
      }}
    >
      <Typography
        fontWeight="fontWeightBold"
        variant="globalL"
      >
        {title}
      </Typography>
      <Stack
        sx={{
          flexDirection: 'row',
          flexWrap: 'wrap',
          flex: 1,
          gap: 1,
          justifyContent: 'flex-end',
        }}
      >
        {filters.component}
        {canShowDownloadButton && reportType && (
          <DowloadReportMenu
            filters={filters.values}
            reportType={reportType}
            open={open}
            anchorEl={anchorEl}
            onClose={handleCloseMenu}
            countRequestManager={countRequestManager}
          />
        )}
      </Stack>
    </Stack>
  );
};

export default ManagerViewHeader;