import MainLayout from '@/layouts/main-layout'
import React from 'react'
import { Box, Typography, Button, Stack } from '@mui/material'
import { Client } from '@notionhq/client'
import { ListBlockChildrenResponse } from '@notionhq/client/build/src/api-endpoints'
import Link from 'next/link'
import slugify from 'slugify'
import SEO from '@/components/SEO'
import dayjs from 'dayjs'
import { useCustomTheme } from '@/themes/useCustomTheme'

type BlogsProps = {
  id: string;
  title: string;
  authoringDate: string;
  excerpt: string;
}

const Blog = ({ blogs }: { blogs: BlogsProps[] }) => {
  const theme = useCustomTheme()
  return (
    <>
      <SEO pageTitle='Blog' />
      <MainLayout>
        <Stack spacing={4} sx={{ maxWidth: '1400px', mx: 'auto', px: theme.customProperties.sectionPaddingX, mt: '50px'}}>
          {blogs.map((blog, index) => (
            <Box key={index}>
              <Link href={`/blogs/${slugify(blog.title).toLowerCase()}`}>
                <Typography variant='h3'>{blog.title}</Typography>
              </Link>
              <Typography variant='body1' sx={{ opacity: '0.5', mt: '-20px', mb: '20px'}}>{dayjs(blog.authoringDate).format('DD/MM/YYYY')}</Typography>
              <Typography variant='body1' sx={{mb: '30px', width: '1000px', maxWidth: '100%'}}>{blog.excerpt}</Typography>
              <Link href={`/blogs/${slugify(blog.title).toLowerCase()}`} key={index}>
                <Button variant='basic'>Read More</Button>
              </Link>
            </Box>
          ))}
        </Stack>
      </MainLayout>
    </>
  )
}

export const getStaticProps = async () => {
  const notion = new Client({
    auth: process.env.NOTION_SECRET,
  })

  let results = []

  let data = await notion.blocks.children.list({
    block_id: process.env.BLOG_PAGE_ID,
  });

  results = [...data.results]

  while (data.has_more) {
    data = await notion.blocks.children.list({
      block_id: process.env.BLOG_PAGE_ID,
      start_cursor: data.next_cursor || undefined
    });

    results = [...results, ...data.results];
  }

  //@ts-ignore
  const promises = results.filter(result => !result.archived).map(async result => {
    const blocks = await notion.blocks.children.list({
      block_id: result.id
    })

    // @ts-ignore
    if (result.type === 'child_page') {
      // @ts-ignore
      const excerpt = blocks.results.find(block => block.type === 'paragraph')
      
      return {
        id: result.id,
        // @ts-ignore
        title: result.child_page.title,
        // @ts-ignore
        authoringDate: result.created_time,
        // @ts-ignore
        excerpt: excerpt?.paragraph.rich_text[0].plain_text
      }
    }
  })

  const blogs: BlogsProps[] = (await Promise.all(promises)).filter(blog => blog !== undefined) as BlogsProps[];

  return {
    props: {
      blogs: blogs.sort((a, b) => new Date(b.authoringDate).getTime() - new Date(a.authoringDate).getTime())
    },
    revalidate: 3600,
  }
}

export default Blog