import { Helmet } from 'react-helmet-async';
import { useQuery } from 'react-query';

import { useModal } from '@material-hu/hooks/useModal';
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 { ReviewQuestion, ReviewQuestionOrigin } from 'src/types/performance';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

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

import QuestionsTable from './components/QuestionsTable';
import ReviewQuestionModal from './components/ReviewQuestionModal';

const ReviewsQuestions = () => {
  const { t } = useLokaliseTranslation(['performance', 'general']);
  const { settings } = useSettings();

  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 { modal: questionModal, showModal: showQuestionModal } = useModal<{
    question?: ReviewQuestion;
    refetch: Function;
  }>(ReviewQuestionModal);

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

  return (
    <NewThemeProvider>
      {questionModal}
      <Stack
        direction="column"
        sx={{ height: '100%' }}
      >
        <Helmet>
          <title>{formatTitle(t('questions.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('questions.title')}
                </Typography>
              </Grid>
              <Grid item>
                <Button
                  variant="contained"
                  onClick={() => showQuestionModal({ refetch })}
                >
                  {t('questions.new_question')}
                </Button>
              </Grid>
            </Grid>
            <Box sx={{ mt: 3 }}>
              <QuestionsTable
                questionQuery={{
                  paginationController,
                  TableSortingHeader,
                  list: questions?.items,
                  refetch,
                  isLoading,
                  count: questions?.count,
                  query,
                  searchBar: (
                    <Searchbar
                      placeholder={t('questions.query_placeholder')}
                      sx={{ p: 1 }}
                    />
                  ),
                }}
                newQuestion={showQuestionModal}
              />
            </Box>
          </Container>
        </Box>
      </Stack>
    </NewThemeProvider>
  );
};

export default ReviewsQuestions;