import { useMutation, UseMutationResult } from 'react-query';
import { useNavigate } from 'react-router-dom';

import { IconFlag3 } from '@material-hu/icons/tabler';

import { useModal } from '@material-hu/hooks/useModal';
import DownloadIcon from '@material-hu/icons/material/DownloadOutlined';
import { IconUpload } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { colorPalette } from '@material-hu/theme/hugo/colors';

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { goalRoutes } from 'src/pages/dashboard/Goals/routes';
import { sendReport } from 'src/services/goalsService';
import { GoalCycle } from 'src/types/goals';
import { useLokaliseTranslation } from 'src/utils/i18n';

import ReviewReportFilter from 'src/components/ReviewReportFilter';

import { isFinishedCycle, isLockedCycle } from '../../../../utils';

import Employee from './components/Employee';

type Props = {
  cycle: GoalCycle;
};

const ParticipationStep = ({ cycle }: Props) => {
  const { enqueueSnackbar } = useHuSnackbar();
  const { t } = useLokaliseTranslation('goals');
  const HuGoThemeProvider = useHuGoTheme();
  const navigate = useNavigate();

  const isBulkUploadLocked = isFinishedCycle(cycle.status);
  const isCycleLocked = isLockedCycle(cycle.status);

  const sendEmailMutation = useMutation(
    ({
      includedUserFields,
      email,
    }: {
      includedUserFields: [];
      includedGroups: [];
      email: string;
    }) => sendReport(cycle.id, includedUserFields, email),
    {
      onSuccess: () => {
        enqueueSnackbar({ title: t('reports.email_sent'), variant: 'success' });
      },
    },
  );

  const { modal: reportModal, showModal: showReportModal } = useModal(
    ReviewReportFilter,
    { fullWidth: true, maxWidth: 'xs' },
    {
      sendEmailMutation: sendEmailMutation as UseMutationResult,
      showGroups: false,
    },
  );

  return (
    <Stack sx={{ gap: 3 }}>
      {reportModal}
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
        <Stack
          sx={{
            backgroundColor: colorPalette.hugoBackground.primaryBgLighter,
            borderRadius: '50%',
            p: 1,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <IconFlag3 color={colorPalette.textColors.primaryText} />
        </Stack>
        <Typography
          variant="globalL"
          fontWeight="fontWeightSemiBold"
          sx={{ display: 'inline' }}
        >
          {t('participation')}
        </Typography>
        <HuGoThemeProvider>
          <Stack sx={{ flexDirection: 'row', marginLeft: 'auto', gap: 2 }}>
            <Button
              variant="secondary"
              startIcon={<IconUpload fontSize="small" />}
              disabled={isBulkUploadLocked}
              onClick={() => {
                if (isBulkUploadLocked) return;
                navigate(goalRoutes.bulkUploadGoals(cycle.id));
              }}
            >
              {t('bulk_upload.upload_file')}
            </Button>
            {isCycleLocked && (
              <Button
                variant="primary"
                onClick={() => showReportModal()}
                startIcon={<DownloadIcon fontSize="small" />}
              >
                {t('reports.download')}
              </Button>
            )}
          </Stack>
        </HuGoThemeProvider>
      </Stack>
      <Employee cycle={cycle} />
    </Stack>
  );
};

export default ParticipationStep;