import { useMutation } from 'react-query';

import { useModal } from '@material-hu/hooks/useModal';
import ContentCopyIcon from '@material-hu/icons/material/ContentCopy';
import DeleteIcon from '@material-hu/icons/material/Delete';
import Card from '@material-hu/mui/Card';
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 TableHead from '@material-hu/mui/TableHead';
import TableRow from '@material-hu/mui/TableRow';
import Typography from '@material-hu/mui/Typography';

import IconsMenu from '@material-hu/components/deprecated/IconsMenu';
import NewModal from '@material-hu/components/deprecated/NewModal';
import useSnackbarUtils from '@material-hu/components/deprecated/Snackbar';

import PencilAltIcon from 'src/icons/PencilAlt';
import * as performanceService from 'src/services/performanceService';
import {
  PerformanceQuery,
  ReviewCommentableStatus,
  ReviewQuestion,
  ReviewQuestionStatus,
  ReviewQuestionType,
} from 'src/types/performance';
import { insertIf } from 'src/utils/arrayUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { namedFormatUTCDate } from 'src/utils/timeUtils';

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

type Props = {
  newQuestion: Function;
  questionQuery: PerformanceQuery<ReviewQuestion>;
};

const QuestionsTable = ({ newQuestion, questionQuery }: Props) => {
  const { t } = useLokaliseTranslation(['performance', 'general']);
  const { showSnackbar } = useSnackbarUtils();
  const {
    TableSortingHeader,
    paginationController,
    searchBar,
    list: questions,
    refetch,
    isLoading,
    count,
    query,
  } = questionQuery;

  const deleteMutation = useMutation(
    ({ id }: { id: number }) => performanceService.deleteQuestion(id),
    {
      onSuccess: () => {
        showSnackbar(t('questions.questions_table.deleted_question'));
        refetch();
      },
    },
  );

  const {
    modal: deleteModal,
    showModal: showDeleteModal,
    closeModal: closeDeleteModal,
  } = useModal(
    ({ id }) => (
      <NewModal
        title={t('questions.questions_table.delete_question_sure')}
        textBody={t('questions.questions_table.delete_question_body')}
        primaryButtonProps={{
          loading: deleteMutation.isLoading,
          children: t('general:delete'),
          onClick: () =>
            deleteMutation.mutateAsync({ id }, { onSettled: closeDeleteModal }),
        }}
        secondaryButtonProps={{
          children: t('general:cancel'),
          onClick: closeDeleteModal,
        }}
        onClose={closeDeleteModal}
      />
    ),
    { fullWidth: true },
  );

  const duplicateMutation = useMutation(
    async ({ questionId }: { questionId: number }) => {
      return performanceService.duplicateQuestion(questionId);
    },
    {
      onSuccess: () => {
        showSnackbar(t('questions.questions_table.duplicated_question'));
        refetch();
      },
    },
  );

  const labelWithComment = question =>
    question.type !== ReviewQuestionType.TEXT &&
    question.commentableStatus !== ReviewCommentableStatus.NONE;

  return (
    <Card>
      {deleteModal}
      {searchBar}
      <Scrollbar>
        {isLoading ? (
          <CenteredCircularProgress centered />
        ) : (
          questions?.length !== 0 && (
            <Table>
              <TableHead>
                <TableRow>
                  <TableSortingHeader id="TITLE">
                    {t('questions.question')}
                  </TableSortingHeader>
                  <TableSortingHeader id="STATUS">
                    {t('general:state')}
                  </TableSortingHeader>
                  <TableSortingHeader id="UPDATED_AT">
                    {t('questions.questions_table.last_update')}
                  </TableSortingHeader>
                  <TableCell />
                </TableRow>
              </TableHead>
              <TableBody>
                {questions.map(question => (
                  <TableRow
                    hover
                    key={question.id}
                  >
                    <TableCell
                      sx={{ py: 0, pr: 0 }}
                      variant="titleField"
                    >
                      <Stack maxWidth="90%">
                        <Typography variant="subtitle2">
                          {question.title}
                        </Typography>
                        <Typography
                          variant="body2"
                          color="textSecondary"
                        >
                          {t(`questions.question_type.${question.type}`)}
                          {labelWithComment(question) && (
                            <Typography
                              variant="body2"
                              color="textSecondary"
                              sx={{ display: 'inline' }}
                            >
                              {t('questions.questions_table.with_comment')}
                            </Typography>
                          )}
                        </Typography>
                      </Stack>
                    </TableCell>
                    <TableCell variant="shortField">
                      <ReviewQuestionLabelStatus
                        status={question.status as ReviewQuestionStatus}
                      />
                    </TableCell>
                    <TableCell variant="shortField">
                      <Typography variant="body2">
                        {namedFormatUTCDate(question.updatedAt)}
                      </Typography>
                    </TableCell>
                    <TableCell
                      align="center"
                      variant="shortField"
                    >
                      <IconsMenu
                        options={[
                          {
                            onClick: () => newQuestion({ question, refetch }),
                            icon: <PencilAltIcon fontSize="small" />,
                            label: t('general:edit'),
                          },
                          ...insertIf(
                            question.status === ReviewQuestionStatus.DRAFT,
                            {
                              onClick: () =>
                                showDeleteModal({ id: question.id }),
                              icon: <DeleteIcon fontSize="small" />,
                              label: t('general:delete'),
                              disabled:
                                question.status === ReviewQuestionStatus.IN_USE,
                            },
                          ),
                          {
                            onClick: () =>
                              duplicateMutation.mutate({
                                questionId: question.id,
                              }),
                            icon: <ContentCopyIcon fontSize="small" />,
                            label: t('general:duplicate'),
                          },
                        ]}
                      />
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          )
        )}
      </Scrollbar>
      {questions?.length === 0 && (
        <Stack
          justifyContent="center"
          alignItems="center"
          py={6}
          mb={3}
        >
          <Typography variant="h6">
            {t(
              query
                ? 'questions.questions_table.no_questions'
                : 'questions.questions_table.empty_questions',
            )}
          </Typography>
          <Typography
            variant="body1"
            color="textSecondary"
            mt={1}
          >
            {t(
              query
                ? 'questions.questions_table.no_questions_subtitle'
                : 'questions.questions_table.empty_questions_subtitle',
            )}
          </Typography>
        </Stack>
      )}
      {questions?.length !== 0 && paginationController(count || 0)}
    </Card>
  );
};

export default QuestionsTable;