import { Helmet } from 'react-helmet-async';
import { 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 useSettings from 'src/contexts/SettingsContext';
import useNewTheme from 'src/hooks/useNewTheme';
import * as performanceService from 'src/services/performanceService';
import { ReviewQuestionOrigin } from 'src/types/performance';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

import TemplatesTable from './components/TemplatesTable';

const ReviewsQuestions = () => {
  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 paginationAndOrder = {
    ...pagination,
    order,
    orderBy,
    q: query || undefined,
  };
  const formatFilter = {
    ...paginationAndOrder,
    origin: ReviewQuestionOrigin.PERFORMANCE_REVIEW,
  };

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

  return (
    <NewThemeProvider>
      <Stack
        direction="column"
        sx={{ height: '100%' }}
      >
        <Helmet>
          <title>{formatTitle(t('templates.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('templates.title')}
                </Typography>
              </Grid>
              <Grid item>
                <Button
                  variant="contained"
                  onClick={() => navigate('new')}
                >
                  {t('templates.new_template')}
                </Button>
              </Grid>
            </Grid>
            <Box sx={{ mt: 3 }}>
              <TemplatesTable
                templatesQuery={{
                  paginationController,
                  TableSortingHeader,
                  list: templates?.items || [],
                  refetch,
                  isLoading,
                  count: templates?.count || 0,
                  query,
                  searchBar: (
                    <Searchbar
                      placeholder={t('cycle_review.search_by_name')}
                      sx={{ p: 1 }}
                    />
                  ),
                }}
              />
            </Box>
          </Container>
        </Box>
      </Stack>
    </NewThemeProvider>
  );
};

export default ReviewsQuestions;