import { Helmet } from 'react-helmet-async';
import { useQuery } from 'react-query';
import { useLocation, useParams } from 'react-router';

import Box from '@material-hu/mui/Box';
import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';

import { DialogLayerProvider } from '@material-hu/components/layers/Dialogs';

import useNewTheme from 'src/hooks/useNewTheme';
import { getReviewCycle } from 'src/services/performanceService';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { reviewsKeys } from '../../../queries';
import { isCycleFinished, isCycleInProgress } from '../../../utils';
import { LimitedEditProvider } from '../../context/LimitedEditContext';
import { NavigationProvider } from '../../context/NavigationContext';
import { ReadOnlyProvider } from '../../context/ReadOnlyContext';

import CycleEditContent from './CycleEditContent';

const CycleEdit = () => {
  const { t } = useLokaliseTranslation('performance');
  const NewThemeProvider = useNewTheme();
  const { state } = useLocation() as {
    state: { backLink: string; readonly?: boolean; limitedEdit?: boolean };
  };
  const { id } = useParams();
  const cycleId = parseInt(id || '0');

  const { data: cycle } = useQuery(
    reviewsKeys.cycle(cycleId, false),
    () => getReviewCycle(cycleId, false),
    {
      select: r => r.data,
      enabled: !!cycleId,
      staleTime: Infinity,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
    },
  );

  const isReadOnly = state?.readonly || false;
  const isCycleLoaded = !!cycle;
  const isLimitedEdit =
    state?.limitedEdit ||
    !isCycleLoaded ||
    isCycleInProgress(cycle) ||
    isCycleFinished(cycle);

  return (
    <NewThemeProvider>
      <DialogLayerProvider>
        <Stack
          direction="column"
          sx={{ height: '100%' }}
        >
          <Helmet>
            <title>{t('cycles.new_cycle')}</title>
          </Helmet>
          <Box sx={{ backgroundColor: 'background.default', flex: 1, pt: 1 }}>
            <Container
              maxWidth={false}
              disableGutters
            >
              <ReadOnlyProvider isReadOnly={isReadOnly}>
                <LimitedEditProvider isLimitedEdit={isLimitedEdit}>
                  <NavigationProvider>
                    <CycleEditContent />
                  </NavigationProvider>
                </LimitedEditProvider>
              </ReadOnlyProvider>
            </Container>
          </Box>
        </Stack>
      </DialogLayerProvider>
    </NewThemeProvider>
  );
};

export default CycleEdit;