import React, { Suspense } from 'react';
import { unstable_setRequestLocale } from 'next-intl/server';
import { notFound } from 'next/navigation';
import { AccountMenu, SessionDetails, SessionsTabs } from '../../../../../../components/Account';
import { SessionType } from '../../../../../../types/sessions';

const SESSION_ROUTES = [SessionType.UPCOMING, SessionType.REQUESTED, SessionType.RECENT];

export async function generateStaticParams({
    params: { locale },
}: { params: { locale: string } }) {
    return [{ locale, slug: [SessionType.UPCOMING] }];
}

export default function SessionDetailItem({ params: { locale, slug } }: { params: { locale: string, slug?: string[] } }) {
    unstable_setRequestLocale(locale);
    const sessionType: string = slug?.length > 0 && slug[0] || '';
    const sessionId: number | null = slug?.length > 1 && Number(slug[1]) || null;

    if (!slug?.length || slug?.length > 2) {
        notFound();
    }

    if (SESSION_ROUTES.includes(sessionType as SessionType) && Number.isInteger(sessionId)) {
        return (
            <Suspense fallback={<p>Loading...</p>}>
                <SessionDetails
                    locale={locale}
                    sessionId={sessionId as number}
                    activeType={sessionType as SessionType}
                />
            </Suspense>
        );
    }

    if (SESSION_ROUTES.includes(sessionType as SessionType) && !Number.isInteger(sessionId)) {
        return (
            <>
                <div className="col-xl-3 col-lg-4 d-none d-lg-block">
                    <AccountMenu locale={locale}/>
                </div>
                <div className="col-xl-9 col-lg-8 ">
                    <div className="page-account__inner">
                        <Suspense fallback={<p>Loading...</p>}>
                            <SessionsTabs
                                locale={locale}
                                activeTab={sessionType as SessionType}
                            />
                        </Suspense>
                    </div>
                </div>
            </>
        );
    }

    return notFound();
};