import { BlogList } from '@/components/content';

import { EmptyResult } from '@/UI/common';
import { Searchbar } from '@/UI/inputs';
import { Hero, LayoutPage } from '@/UI/templates';
import type { LayoutPageProps } from '@/UI/templates';

import { getContents } from '@/services';

import { SECRET_KEY, isDev, isProd } from '@/libs/constants/environmentState';
import { generateOgImage, getMetaPage } from '@/libs/metapage';
import { getMostPopularBlog, getNewestBlog } from '@/libs/sorters';
import { twclsx } from '@/libs/twclsx';

import { useSearchBlog } from '@/hooks';

import axios from 'axios';
import { GetStaticProps, NextPage } from 'next';
import { useEffect, useMemo } from 'react';
import readingTime from 'reading-time';
import type { Blog, PageViewResponse } from 'hamoodihajjiri';

type BlogPageProps = {
    allBlogs: Array<Blog>;
};

const BlogPage: NextPage<BlogPageProps> = ({ allBlogs }) => {
    const search = useSearchBlog(allBlogs);
    const mostViewdBlogs = useMemo(() => allBlogs.slice(0).sort(getMostPopularBlog).slice(0, 2), [allBlogs]);

    useEffect(() => {
        if (typeof window === 'undefined' || !isProd) return;
        ;(async () => {
            try {
                await axios.get(`https://hamoodihajjiri.com/api/revalidate?slug=/blog&secret=${SECRET_KEY}`)
            } catch (err) {
                console.info('Could not revalidate')
            };
        })();
    }, []);

    return (
        <LayoutPage {...(meta as LayoutPageProps)}>
            <Hero title={meta.title as string} description={meta.description as string} />

            <Searchbar onChange={search.handleChange} value={search.query} />

            {allBlogs.length > 0 ? (<p>1</p>) : null}
            {search.query.length === 0 ? (<p>2</p>) : null}

            {allBlogs.length > 0 && search.query.length === 0 ? (
                <div className={twclsx('flex flex-col', 'gap-24')}>
                    <BlogList displayViews posts={mostViewdBlogs} title='Most Viewed' description='Allow me to bring your attention to my extensively viewed blog post, which has garnered a significant amount of traction. I invite you to partake in the immersive reading experience and indulge in the enthralling content.' />

                    <BlogList posts={allBlogs} displayViews title='All Post' description="It appears that my posts have caught your attention. I invite you to explore them at your leisure, sorted chronologically for your convenience. Indulge in the latest entries and savor the thought-provoking content." />
                </div>
            ) : null}

            {search.query.length > 0 && (<>{search.filteredBlog.length > 0 ? (<BlogList description="I've found some possible results for your search." displayViews posts={search.filteredBlog} title='Search Post' />) : (<EmptyResult />)}</>)}
        </LayoutPage>
    );
};

export const getStaticProps: GetStaticProps<BlogPageProps> = async () => {
    const response = await getContents<Blog>('/blog');

    console.log(response)

    if (isDev) return { props: { allBlogs: response.map((r) => ({ ...r.header, est_read: readingTime(r.content).text })).sort(getNewestBlog) } };

    const baseURL = isDev ? 'http://localhost:3000' : process.env.NEXT_PUBLIC_SITE_URL ?? 'https://hamoodihajjiri.com';

    const blogs: Blog[] = [];

    const requests = response.map(async (r) => {
        const res = await axios.get<PageViewResponse>(baseURL + '/api/pageviews?slug=' + r.header.slug);
        const est_read = readingTime(r.content).text;
        const views = res.data.view ?? 0;

        return { ...r.header, views, est_read } as Blog;
    });

    const settles = await Promise.allSettled(requests);

    settles.forEach((settle) => {
        if (settle.status === 'fulfilled') blogs.push(settle.value);
    });

    return { props: { allBlogs: blogs.sort(getNewestBlog) } };
};

export default BlogPage;