import { Comic } from '@prisma/client';
import { GetServerSideProps } from 'next';
import { useSession } from 'next-auth/react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { ParsedUrlQuery } from 'querystring';
import { LinkButton } from '../../../components/Button';
import CompletionBar from '../../../components/CompletionBar';
import { prisma } from '../../../src/db';

interface Params extends ParsedUrlQuery {
    comic: string;
}

interface Props {
    comic: Comic;
    completion: {
        completePages: number;
        totalPages: number;
    };
}

export default function ComicPage({ comic, completion }: Props) {
    const { status } = useSession();
    const router = useRouter();

    return (
        <main className='p-4'>
            <Head>
                <title>{`${comic.title}`}</title>
            </Head>
            <h1 className='text-4xl pb-2'>{comic.title}</h1>

            <section>
                <p>
                    So far, a total of {completion.completePages} out of{' '}
                    {completion.totalPages} pages have been transcribed!
                </p>
                <div className='max-w-md'>
                    <CompletionBar
                        total={completion.totalPages}
                        completed={completion.completePages}
                    />
                </div>
            </section>

            <nav>
                {status === 'authenticated' && (
                    <ul>
                        <li>
                            <LinkButton
                                href={`/comic/${comic.slug}/transcribe/random`}
                            >
                                Random page
                            </LinkButton>
                        </li>
                        <li>
                            <LinkButton
                                href={`/comic/${comic.slug}/transcribe/random?completed=true`}
                            >
                                Random page (complete)
                            </LinkButton>
                        </li>
                        <li>
                            <LinkButton
                                href={`/comic/${comic.slug}/transcribe/random?completed=false`}
                            >
                                Random page (incomplete)
                            </LinkButton>
                        </li>
                    </ul>
                )}

                {status === 'loading' && <>Loading...</>}

                {status === 'unauthenticated' && (
                    <>
                        Please{' '}
                        <LinkButton
                            href={`/login?return=${encodeURIComponent(
                                router.asPath
                            )}`}
                        >
                            Log in
                        </LinkButton>{' '}
                        to contribute.
                    </>
                )}
            </nav>
        </main>
    );
}

export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
    params,
}) => {
    const { comic: comicId } = params!;

    const comic = await prisma.comic.findFirst({
        where: {
            slug: comicId,
        },
    });

    if (!comic) return { notFound: true };

    const pages = await prisma.comicPage.findMany({
        where: {
            comicId: comic.id,
        },
        select: {
            _count: {
                select: {
                    bubbles: true,
                },
            },
        },
    });

    return {
        props: {
            comic,
            completion: {
                totalPages: pages.length,
                completePages: pages.filter((page) => page._count.bubbles !== 0)
                    .length,
            },
        },
    };
};
