import ScrollBar from 'react-perfect-scrollbar';
import { useInfiniteQuery } from 'react-query';

import { uniqueId } from 'lodash-es';

import { useServerPagination } from '@material-hu/hooks/useServerPagination';
import Box from '@material-hu/mui/Box';
import Card from '@material-hu/mui/Card';
import CardActions from '@material-hu/mui/CardActions';
import Skeleton from '@material-hu/mui/Skeleton';
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 * as performanceService from 'src/services/performanceService';
import {
  ReviewCommentableStatus,
  ReviewQuestion,
  ReviewQuestionOrigin,
  ReviewQuestionType,
} from 'src/types/performance';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { flatPages } from 'src/utils/tableUtils';

import CenteredCircularProgress from 'src/components/CircularProgress';
import EmptyList from 'src/components/EmptyList';
import { InfiniteList } from 'src/components/InfiniteList';
import ReviewQuestionLabelStatus from 'src/components/ReviewQuestionLabelStatus';

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

type Props = {
  append: Function;
  notIncludingIds: number[];
  setNotIncludingIds: Function;
};

const QuestionsBank = ({
  append,
  notIncludingIds,
  setNotIncludingIds,
}: Props) => {
  const { t } = useLokaliseTranslation(['performance', 'general']);

  const { pagination, Searchbar, query } = useServerPagination({
    defaultOrderBy: 'TITLE',
  });
  const paginationAndOrder = { ...pagination, q: query || undefined };
  const formatFilter = {
    ...paginationAndOrder,
    origin: ReviewQuestionOrigin.PERFORMANCE_REVIEW,
    limit: 10,
    notIncludingIds: notIncludingIds.toString(),
  };

  const addBankQuestion = (question: ReviewQuestion) => {
    append({
      ...question,
      new: false,
      commentRequired:
        question.commentableStatus === ReviewCommentableStatus.REQUIRED,
      hasComment: question.commentableStatus !== ReviewCommentableStatus.NONE,
      hasAnswer: question.type !== ReviewQuestionType.TEXT,
      possibleAnswers: question.possibleAnswers.length
        ? question.possibleAnswers.map(ans => ({
            value: ans,
            id: uniqueId(),
          }))
        : [{ value: `${t('questions.ANSWER')} 1`, id: uniqueId() }],
    });
    setNotIncludingIds(notIncludingIds.concat(question.id));
  };

  const {
    data: infiniteQuestions,
    isLoading: infiniteQuestionsLoading,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteQuery(
    reviewsKeys.questions(formatFilter),
    ({ pageParam = 0 }) =>
      performanceService.getReviewsQuestions({
        ...formatFilter,
        page: pageParam,
      }),
    {
      getNextPageParam: lastPage =>
        lastPage.data.page === lastPage.data.totalPages
          ? undefined
          : lastPage.data.page,
    },
  );

  const questions = flatPages(infiniteQuestions);
  const labelWithComment = (question: ReviewQuestion) =>
    question.type !== ReviewQuestionType.TEXT &&
    question.commentableStatus !== ReviewCommentableStatus.NONE;

  return (
    <>
      <Box sx={{ maxHeight: '20vh', mb: 2 }}>
        <Typography variant="h5">{t('templates.bank')}</Typography>
        <Typography
          variant="body1"
          color="textSecondary"
          my={0.5}
        >
          {t('templates.bank_subtitle')}
        </Typography>
        <Card sx={{ boxShadow: 0, m: 0, p: 0, borderRadius: 1 }}>
          <Searchbar placeholder={t('questions.query_placeholder')} />
        </Card>
      </Box>
      {infiniteQuestionsLoading && <CenteredCircularProgress centered />}
      {questions?.length !== 0 && (
        <ScrollBar>
          <Box
            sx={{
              height: '100vh',
              overflow: 'auto',
              overscrollBehaviorY: 'contain',
              px: 0.5,
              '::-webkit-scrollbar': {
                width: '5px',
                background: 'transparent',
              },
              '::-webkit-scrollbar-thumb': {
                borderRadius: '5px',
                backgroundColor: '#C1C1C1',
              },
            }}
          >
            {!infiniteQuestionsLoading &&
              questions.map(question => (
                <Card
                  sx={{ px: 2, pt: 2, mb: 2 }}
                  key={question.id}
                >
                  <ReviewQuestionLabelStatus status={question.status} />
                  <Typography
                    variant="subtitle1"
                    mt={1}
                    ml="5px"
                  >
                    {question.title}
                  </Typography>
                  <CardActions sx={{ justifyContent: 'space-between' }}>
                    <Typography variant="body2">
                      {t(`questions.question_type.${question.type}`)}
                      {labelWithComment(question) && (
                        <Typography
                          variant="body2"
                          sx={{ display: 'inline' }}
                        >
                          {t('questions.questions_table.with_comment')}
                        </Typography>
                      )}
                    </Typography>
                    <Button
                      onClick={() => addBankQuestion(question)}
                      variant="text"
                    >
                      {t('general:add')}
                    </Button>
                  </CardActions>
                </Card>
              ))}
            <InfiniteList
              isSuccess={!!infiniteQuestions}
              isLoading={infiniteQuestionsLoading}
              isEmpty={
                infiniteQuestions?.pages &&
                !infiniteQuestions?.pages[pagination.page]?.data?.count
              }
              fetchNextPage={fetchNextPage}
              hasNextPage={hasNextPage}
              isFetchingNextPage={isFetchingNextPage}
              renderSkeleton={
                <Card sx={{ p: 2, height: 120 }}>
                  <Skeleton
                    animation="wave"
                    height={20}
                    width={50}
                  />
                  <Skeleton
                    animation="wave"
                    height={25}
                    width={150}
                  />
                  <Stack
                    direction="row"
                    justifyContent="space-between"
                    pt={3}
                    pr={2}
                  >
                    <Skeleton
                      animation="wave"
                      height={18}
                      width={40}
                      style={{ marginLeft: 1 }}
                    />
                    <Skeleton
                      animation="wave"
                      height={18}
                      width={40}
                      style={{ marginRight: 3 }}
                    />
                  </Stack>
                </Card>
              }
            >
              <div />
            </InfiniteList>
          </Box>
        </ScrollBar>
      )}
      {questions?.length === 0 && !infiniteQuestionsLoading && (
        <EmptyList
          title={t(
            query
              ? 'templates.no_bank_questions'
              : 'questions.questions_table.empty_questions',
          )}
          subtitle={t(
            query
              ? 'templates.no_bank_questions_subtitle'
              : 'questions.questions_table.empty_questions_subtitle',
          )}
        />
      )}
    </>
  );
};

export default QuestionsBank;