import * as React from 'react';
import type { NextPage } from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
import { useSnackbar } from 'notistack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
import TablePagination from '@mui/material/TablePagination';
import Skeleton from '@mui/material/Skeleton';

import 'github-markdown-css/github-markdown-light.css';

import Layout from 'src/components/Layout';
import { Pages } from 'src/constants';
import { ZendeskComment, Users } from 'src/types/zendesk';
import axios from 'src/lib/axios';
import RequestDetailsCard from 'src/components/Card/RequestDetailsCard';
import RequestCommentCard, {
  AddRequestCommentCard,
} from 'src/components/Card/RequestCommentCard';
import { fetchUsersByIds } from 'src/utils';
import logger from 'next-pino/logger';

import { zendeskDataState } from 'src/atom';
import { useRecoilValue } from 'recoil';

const RequestDetailsPage: NextPage = () => {
  const [request, setRequest] = React.useState<any>(null);
  const [loading, setLoading] = React.useState<boolean>(true);
  // const [mdx, setMdx] = React.useState<any>(null);
  const [firstComment, setFirstComment] = React.useState<ZendeskComment | null>(
    null
  );
  const [comments, setComments] = React.useState<ZendeskComment[] | null>(null);
  const [users, setUsers] = React.useState<Users[]>([]);
  const [page, setPage] = React.useState(0);
  const [count, setCount] = React.useState(0);

  // const auth0Meta = useRecoilValue(auth0MetaState);
  const zendeskData = useRecoilValue(zendeskDataState);
  const { t } = useTranslation();
  const router = useRouter();

  const { id } = router.query;
  const { enqueueSnackbar } = useSnackbar();

  React.useEffect(() => {
    const func = async () => {
      try {
        const { data } = await fetchRequestDetails(
          `${id}`,
          zendeskData.token || ''
        );
        // // https://nextjs.org/blog/markdown
        // const mdxSource = await serialize(data?.request?.description || '');
        // setMdx(mdxSource);
        setRequest(data?.request);
        const { data: commentsData } = await fetchRequsetComments(
          `${id}`,
          zendeskData.token || '',
          page
        );
        const commentsItems: ZendeskComment[] = commentsData?.comments || [];
        // for (let i = 0; i < commentsItems.length; i++) {
        //   const comment = commentsItems[i];
        //   const commentMdxSource = await serialize(comment?.body || '');
        //   commentsItems[i].mdx = commentMdxSource;
        // }
        const commentUserIds = commentsItems.map((item) => item.author_id);
        const uniqueCommentUserIds = Array.from(new Set(commentUserIds));
        const { users: userList } = await fetchUsersByIds(
          uniqueCommentUserIds,
          zendeskData.token || ''
        );
        setUsers(userList);
        page === 0 && setFirstComment(commentsItems[0] || null);
        setComments(commentsItems);
        setCount(commentsData?.count - 1 || 0);
      } catch (error: any) {
        logger.error(
          { error, name: `requests[${id}]` },
          'Error fetching request details'
        );
        enqueueSnackbar(
          `${error?.response?.data?.message || error?.message || error}`,
          { variant: 'error' }
        );
      } finally {
        setLoading(false);
      }
    };
    if (id && zendeskData.token) {
      setLoading(true);
      func();
    }
  }, [enqueueSnackbar, id, zendeskData.token, page]);

  const handleChangePage = (
    event: React.MouseEvent<HTMLButtonElement> | null,
    newPage: number
  ) => {
    setPage(newPage);
  };

  return (
    <Layout
      title="Request Details"
      description="View and manage your requests"
      breadcrumbs={[
        { id: 'home', path: Pages.Home, label: t('pages.home') },
        { id: 'requests', path: Pages.Requests, label: t('pages.requests') },
        { id: 'request-details', label: `${id || request.description}` },
      ]}
    >
      {loading && (
        <Box sx={{ width: '100%', height: '100vh' }}>
          <Typography variant="h5" component="div">
            <Skeleton />
          </Typography>
          <Grid
            container
            spacing={4}
            sx={{
              pt: '2rem',
              '& .markdown-body': {
                backgroundColor: 'transparent',
              },
              flexDirection: {
                xs: 'column-reverse',
                md: 'row',
              },
            }}
          >
            <Grid
              xs={12}
              md={8}
              sx={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'flex-start',
                gap: '1rem',
              }}
            >
              <Skeleton variant="rounded" height={402} />
            </Grid>
            <Grid xs={12} md={4}>
              <Skeleton variant="rounded" height={258} />
            </Grid>
          </Grid>
          <Grid
            container
            spacing={4}
            sx={{
              pt: '2rem',
              pb: '2rem',
            }}
          >
            <Grid xs={12} md={8}>
              <Skeleton variant="rounded" height={128} />
            </Grid>
            <Grid xs={12} md={8}>
              <Skeleton variant="rounded" height={128} />
            </Grid>
          </Grid>
        </Box>
      )}

      {!loading && request && (
        <Box>
          <Typography variant="h5" component="h2" gutterBottom>
            {request.subject}
          </Typography>
          <Divider />
          <Grid
            container
            spacing={4}
            sx={{
              pt: '2rem',
              '& .markdown-body': {
                backgroundColor: 'transparent',
              },
              flexDirection: {
                xs: 'column-reverse',
                md: 'row',
              },
            }}
          >
            <Grid
              xs={12}
              md={8}
              sx={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between',
              }}
            >
              <AddRequestCommentCard requestId={id as string} />
            </Grid>
            <Grid xs={12} md={4}>
              <RequestDetailsCard data={request} />
            </Grid>
          </Grid>
          <Grid
            container
            spacing={4}
            sx={{
              pt: '2rem',
            }}
          >
            <Grid xs={12} md={8}>
              <Typography variant="h5" component="h2" gutterBottom>
                {t('requests.comment_title')}
              </Typography>
              <Divider />
              {comments && (
                <>
                  <Box
                    sx={{
                      pt: '1rem',
                      display: 'flex',
                      flexDirection: 'column-reverse',
                      gap: '1rem',
                    }}
                  >
                    {comments.map((comment: ZendeskComment, index: number) => (
                      <RequestCommentCard
                        key={index}
                        item={comment}
                        users={users}
                      />
                    ))}
                  </Box>
                  <TablePagination
                    component="div"
                    rowsPerPageOptions={[50]}
                    count={count}
                    page={page}
                    onPageChange={handleChangePage}
                    rowsPerPage={50}
                  />
                </>
              )}
            </Grid>
          </Grid>
        </Box>
      )}
    </Layout>
  );
};

const fetchRequestDetails = async (id: number | string, token: string) => {
  const data = await axios
    .get(`/api/zendesk/v2/requests/${id}`, {
      headers: {
        Authorization: token,
      },
    })
    .then((res) => res.data);
  return data;
};

export interface CommentRes {
  comments: ZendeskComment[];
  users: Users[];
  organizations: { id: number; name: string }[];
  next_page: string | null;
  previous_page: string | null;
  count: number;
}

const fetchRequsetComments = async (
  id: number | string,
  token: string,
  page: number
) => {
  const data: { data: CommentRes } = await axios
    .get(`/api/zendesk/v2/requests/${id}/comments`, {
      headers: {
        Authorization: token,
      },
      params: {
        page: page + 1,
      },
    })
    .then((res) => res.data);
  return data;
};

export async function getStaticPaths() {
  return {
    paths: [], //indicates that no page needs be created at build time
    fallback: 'blocking', //indicates the type of fallback
  };
}

export async function getStaticProps(context: any) {
  return {
    props: {
      ...(await serverSideTranslations(context.locale, ['common'])),
      // Will be passed to the page component as props
    },
  };
}

export default RequestDetailsPage;