import { useState } from 'react';
import { FormProvider } from 'react-hook-form';
import { useQuery } from 'react-query';

import CheckIcon from '@material-hu/icons/material/Check';
import CloseIcon from '@material-hu/icons/material/Close';
import Alert from '@material-hu/mui/Alert';
import Box from '@material-hu/mui/Box';
import CircularProgress from '@material-hu/mui/CircularProgress';
import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogContentText from '@material-hu/mui/DialogContentText';
import DialogTitle from '@material-hu/mui/DialogTitle';
import Fab from '@material-hu/mui/Fab';
import LinearProgress from '@material-hu/mui/LinearProgress';
import Typography from '@material-hu/mui/Typography';

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

import useGeneralError from 'src/hooks/useGeneralError';
import * as organizationChartsService from 'src/services/organizationChartsService';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { UserPermissions } from 'src/utils/permissions';

import { appsKeys } from './queries';

type Props = {
  form: any;
  onlyValidation: boolean;
  onClose: () => void;
};

const ValidateOrgModal = ({ form, onlyValidation = false, onClose }: Props) => {
  const { t } = useLokaliseTranslation('apps');
  const capabilities = form?.watch('capabilities');
  const showGeneralError = useGeneralError();
  const [status, setStatus] = useState(true);
  const [percentage, setPercentage] = useState(0);

  const { isFetching, isLoading } = useQuery(
    appsKeys.orgChartStats(),
    () => organizationChartsService.validateOrgChart(),
    {
      select: response => response.data,
      onSuccess: response => {
        if (!response.data?.hasCycle) {
          setStatus(true);
          setPercentage(
            Math.floor(
              (response.usersWithBossesAmount / response.usersAmount) * 100,
            ),
          );
          if (!onlyValidation) {
            form.setValue(
              'capabilities',
              {
                ...capabilities,
                [UserPermissions.VIEW_ORGANIZATION_CHARTS]: true,
              },
              { shouldDirty: true },
            );
          }
        } else {
          setStatus(false);
        }
      },
      onError: err => {
        showGeneralError(err);
        onClose();
      },
    },
  );

  if (isFetching || isLoading) {
    return (
      <>
        <DialogTitle
          align="center"
          mt={1}
        >
          <div>
            <Typography variant="h6">{t('VALIDATING')}</Typography>
          </div>
        </DialogTitle>
        <DialogContent sx={{ textAlign: 'center' }}>
          <Box sx={{ m: 1 }}>
            <CircularProgress
              size={68}
              color="primary"
            />
          </Box>
        </DialogContent>
      </>
    );
  }

  return (
    <FormProvider {...form}>
      <DialogTitle
        align="center"
        mt={1}
      >
        <div>
          <Typography variant="h6">
            {t('VALIDATION_STATUS', { context: status.toString() })}
          </Typography>
        </div>
      </DialogTitle>
      <DialogContent sx={{ textAlign: 'center' }}>
        <Box sx={{ m: 1 }}>
          {status && (
            <Fab
              aria-label="save"
              color="success"
            >
              <CheckIcon />
            </Fab>
          )}
          {!status && (
            <Fab
              aria-label="save"
              color="error"
            >
              <CloseIcon />
            </Fab>
          )}
        </Box>
        {!onlyValidation && (
          <DialogContentText
            variant="body1"
            mb={2}
          >
            {t('VALIDATION_SUB_STATUS', { context: status.toString() })}
          </DialogContentText>
        )}
        {status && (
          <Alert
            variant="standard"
            severity="info"
            icon={false}
            sx={{ mt: 2 }}
          >
            <DialogContentText variant="subtitle2">
              {t('VALIDATION_PERCENTAGE', {
                percentage: percentage.toString(),
              })}
            </DialogContentText>
            <LinearProgress
              variant="determinate"
              value={percentage}
              sx={{ m: 1 }}
              color="info"
            />
            <DialogContentText variant="body2">
              {t('VALIDATION_PERCENTAGE_2')}
            </DialogContentText>
          </Alert>
        )}
      </DialogContent>
      <DialogActions>
        <Button
          onClick={onClose}
          variant="contained"
        >
          {t('CONTINUE')}
        </Button>
      </DialogActions>
    </FormProvider>
  );
};

export default ValidateOrgModal;