import React from 'react'
import {
  Box,
  Heading,
  Image,
  Text,
  Container,
  VStack,
  SimpleGrid,
  Flex,
} from '@chakra-ui/react'
import { getDatabase } from '../../lib/notion'
import {
  DatePropertyValue,
  Page,
  RichText,
  RichTextPropertyValue,
  TitlePropertyValue,
} from '@notionhq/client/build/src/api-types'
import { NotionText } from 'notion-blocks-chakra-ui'
import { Footer } from 'components/common/Footer'
import { Navbar } from 'components/common/Navbar/Navbar'
import { NextChakraLink } from 'components/common/nextChakraAdapters/NextChakraLink'
import { SocialMetaTags } from 'components/common/SocialMetaTags'

const ArticleList = ({ posts }: { posts: Page[] }) => {
  return (
    <>
      <Flex
        alignItems="center"
        justifyContent="space-between"
        w="full"
        flexDir="column"
      >
        <SocialMetaTags
          title="Blog"
          description="Keep up to date with the latest news related to Typebot. Learn
            about conversationnal forms and how to convert more."
          currentUrl={`https://www.typebot.io/blog`}
          imagePreviewUrl={`https://www.typebot.io/images/previews/blog.png`}
        />
        <Navbar />
        <VStack maxW="1200px" mt={20} pb={56}>
          <VStack maxW="700px">
            <Heading as="h1" fontSize="5xl">
              Blog
            </Heading>
            <Heading
              fontSize="md"
              fontWeight="normal"
              textAlign="center"
              textColor="gray.500"
            >
              Keep up to date with the latest news related to Typebot. Learn
              about conversationnal forms and how to convert more.
            </Heading>
          </VStack>

          <Container maxW="1200px">
            <SimpleGrid columns={[1, 2, 3]} mt={6} py={4} spacing={10}>
              {posts.map((post) => (
                <BlogPost
                  key={post.id}
                  slug={`/${
                    (post.properties.Slug as RichTextPropertyValue).rich_text[0]
                      ?.plain_text
                  }`}
                  title={
                    (post.properties.Name as TitlePropertyValue).title[0]
                      ?.plain_text
                  }
                  description={
                    (post.properties.Description as RichTextPropertyValue)
                      .rich_text
                  }
                  imageSrc={
                    (post.properties.Thumbnail as RichTextPropertyValue)
                      .rich_text[0]?.plain_text
                  }
                  date={
                    new Date(
                      (post.properties.Created as DatePropertyValue)?.date
                        ?.start ?? ''
                    )
                  }
                />
              ))}
            </SimpleGrid>
          </Container>
        </VStack>
      </Flex>
      <Footer />
    </>
  )
}

type BlogPostProps = {
  slug: string
  title: string
  description: RichText[]
  imageSrc: string
  date: Date
}

const BlogPost = ({
  slug,
  title,
  description,
  imageSrc,
  date,
}: BlogPostProps) => (
  <NextChakraLink
    href={'/blog' + slug}
    w="100%"
    shadow="lg"
    p={4}
    rounded="lg"
    _hover={{ textDecoration: 'none' }}
  >
    <Box borderRadius="lg" overflow="hidden">
      <Image
        transform="scale(1.0)"
        src={imageSrc}
        objectFit="contain"
        width="100%"
        transition="0.3s ease-in-out"
        _hover={{
          transform: 'scale(1.05)',
        }}
        alt="title thumbnail"
      />
    </Box>
    <Heading fontSize="xl" marginTop="4">
      {title}
    </Heading>
    <NotionText text={description} as="p" fontSize="md" marginTop="2" />
    <Text textColor="gray.400" fontSize="sm" mt={2}>
      {date.toDateString()}
    </Text>
  </NextChakraLink>
)

export const getStaticProps = async () => {
  if (!process.env.NOTION_DATABASE_ID)
    throw new Error("Couldn't find NOTION_DATABASE_ID")
  const database = await getDatabase(process.env.NOTION_DATABASE_ID)
  return {
    props: {
      posts: database,
    },
    revalidate: 1,
  }
}

export default ArticleList