import { Suspense } from 'react';
import { useQuery } from 'react-query';
import { useParams } from 'react-router-dom';

import { useServerPagination } from '@material-hu/hooks/useServerPagination';
import SearchOffOutlined from '@material-hu/icons/material/SearchOffOutlined';
import Grid from '@material-hu/mui/Grid';
import Paper from '@material-hu/mui/Paper';
import Stack from '@material-hu/mui/Stack';
import Table from '@material-hu/mui/Table';
import TableBody from '@material-hu/mui/TableBody';
import TableCell from '@material-hu/mui/TableCell';
import TableContainer from '@material-hu/mui/TableContainer';
import TableHead from '@material-hu/mui/TableHead';
import TableRow from '@material-hu/mui/TableRow';
import Typography from '@material-hu/mui/Typography';

import Info from 'src/pages/dashboard/Learning/Courses/components/Info';
import { coursesKeys } from 'src/pages/dashboard/Learning/Courses/queries';
import SurveysMetrics from 'src/pages/dashboard/Learning/Courses/Report/components/SurveysMetrics';
import { getSurveys } from 'src/pages/dashboard/Learning/Courses/services';
import { ReportTypes } from 'src/pages/dashboard/Learning/Courses/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CircularProgress from 'src/components/CircularProgress';
import CenteredCircularProgress from 'src/components/CircularProgress';

export const Surveys = () => {
  const { t } = useLokaliseTranslation('learning');
  const { id } = useParams();
  const courseId = Number(id) || 0;

  const {
    paginationController,
    pagination,
    query: search,
  } = useServerPagination({
    labelRowsPerPage: t('general:rows_per_page'),
    limitOptions: [10, 20],
  });

  const { data, isLoading, isError, isPreviousData } = useQuery(
    coursesKeys.detail.reports.surveys.list(courseId, {
      ...pagination,
      search,
    }),
    () => getSurveys(courseId, { ...pagination, search }),
    {
      select: response => response.data,
      keepPreviousData: true,
      enabled: !!id,
    },
  );

  return (
    <Suspense fallback={<CenteredCircularProgress centered />}>
      <Grid
        container
        justifyContent="space-between"
        sx={{ gap: 2, p: 3 }}
      >
        <Grid
          item
          xs
        >
          <Typography
            variant="h5"
            sx={{ display: 'inline' }}
          >
            {t(`reports.type.${ReportTypes.SURVEYS}`)}
          </Typography>
        </Grid>
      </Grid>
      <Stack sx={{ gap: 3, p: 3 }}>
        <SurveysMetrics />
        <Typography variant="h6">
          {t('reports.survey.feedback_label')}
        </Typography>
        <Stack sx={{ gap: 2 }}>
          <Paper elevation={3}>
            <TableContainer sx={{ overflowX: 'auto' }}>
              <Table>
                <TableHead>
                  <TableRow>
                    <TableCell>{t('general:comment')}</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody sx={{ opacity: isPreviousData ? 0.5 : 1 }}>
                  {data?.items?.map(survey => (
                    <TableRow key={survey.comment}>
                      <TableCell sx={{ whiteSpace: 'wrap' }}>
                        {survey.comment}
                      </TableCell>
                    </TableRow>
                  ))}
                  {isLoading && (
                    <TableRow>
                      <TableCell
                        align="center"
                        colSpan={1}
                      >
                        <CircularProgress centered />
                      </TableCell>
                    </TableRow>
                  )}
                  {data?.items?.length === 0 && !search && (
                    <TableRow>
                      <TableCell
                        align="center"
                        colSpan={1}
                      >
                        <Info
                          title={t('empty.reports.surveys.title')}
                          description={t('empty.reports.surveys.description')}
                        />
                      </TableCell>
                    </TableRow>
                  )}
                  {data?.items?.length === 0 && search && (
                    <TableRow>
                      <TableCell
                        align="center"
                        colSpan={1}
                      >
                        <Info
                          Icon={SearchOffOutlined}
                          title={t('empty.reports.no_search.title')}
                          description={t('empty.reports.no_search.description')}
                        />
                      </TableCell>
                    </TableRow>
                  )}
                  {isError && (
                    <TableRow>
                      <TableCell
                        align="center"
                        colSpan={1}
                      >
                        <Info
                          title={t('reports.error.title')}
                          description={t('reports.error.description')}
                        />
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </TableContainer>
            {paginationController(data?.count || 0)}
          </Paper>
        </Stack>
      </Stack>
    </Suspense>
  );
};

export default Surveys;
