import { Helmet } from 'react-helmet-async';
import { useMutation, useQuery } from 'react-query';
import { useNavigate } from 'react-router';

import { useServerPagination } from '@material-hu/hooks/useServerPagination';
import Box from '@material-hu/mui/Box';
import Container from '@material-hu/mui/Container';
import Grid from '@material-hu/mui/Grid';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import { DialogLayerProvider } from '@material-hu/components/layers/Dialogs';

import useSettings from 'src/contexts/SettingsContext';
import useNewTheme from 'src/hooks/useNewTheme';
import * as performanceService from 'src/services/performanceService';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { reviewsKeys } from '../queries';
import { reviewRoutes } from '../routes';

import CyclesTable from './components/CyclesTable';

const ReviewsCycles = () => {
  const { t } = useLokaliseTranslation(['performance', 'general']);
  const { settings } = useSettings();
  const navigate = useNavigate();
  const NewThemeProvider = useNewTheme();

  const {
    paginationController,
    pagination,
    Searchbar,
    TableSortingHeader,
    query,
    order,
    orderBy,
  } = useServerPagination({
    labelRowsPerPage: t('general:rows_per_page'),
    defaultOrderBy: 'ID',
    defaultOrder: 'DESC',
  });
  const formatFilter = { ...pagination, order, orderBy, q: query || undefined };

  const {
    data: cycles,
    refetch,
    isLoading,
  } = useQuery(
    reviewsKeys.cycles(formatFilter),
    () => performanceService.getReviewsCycles(formatFilter),
    {
      select: r => r.data,
    },
  );

  const createCycleMutation = useMutation(
    () => performanceService.createCycle(`${t('cycles.new_cycle')}`),
    {
      onSuccess: ({ data }) => {
        navigate(reviewRoutes.newCycle(data.id));
      },
    },
  );

  return (
    <NewThemeProvider>
      <DialogLayerProvider>
        <Stack
          direction="column"
          sx={{ height: '100%' }}
        >
          <Helmet>
            <title>{formatTitle(t('cycles.title'))}</title>
          </Helmet>
          <Box
            sx={{
              backgroundColor: 'background.default',
              flex: 1,
              py: 3,
            }}
          >
            <Container maxWidth={settings.compact ? 'xl' : false}>
              <Grid
                container
                spacing={3}
              >
                <Grid
                  item
                  xs
                >
                  <Typography
                    variant="h4"
                    color="textPrimary"
                    sx={{ display: 'inline' }}
                  >
                    {t('cycles.title')}
                  </Typography>
                </Grid>
                <Grid item>
                  <Button
                    variant="contained"
                    onClick={() => createCycleMutation.mutateAsync()}
                  >
                    {t('cycles.new_cycle')}
                  </Button>
                </Grid>
              </Grid>
              <Box sx={{ mt: 3 }}>
                <CyclesTable
                  cyclesQuery={{
                    paginationController,
                    TableSortingHeader,
                    list: cycles?.items || [],
                    refetch,
                    isLoading,
                    count: cycles?.count || 0,
                    query,
                    searchBar: (
                      <Searchbar
                        placeholder={t('cycles.search_bar_placeholder')}
                        sx={{ p: 1 }}
                      />
                    ),
                  }}
                />
              </Box>
            </Container>
          </Box>
        </Stack>
      </DialogLayerProvider>
    </NewThemeProvider>
  );
};

export default ReviewsCycles;