import { Box, Heading, Stack, Text } from '@chakra-ui/react'
import ResponsiveImage from 'components/ResponsiveImage'
import SEO from 'components/SEO'
import { getAllNotasWithImages, getNotaWithImage, INotaWithImage, login } from 'lib/api'
import ReactMarkdown from 'react-markdown'

const NotePage: React.FC<{ data: INotaWithImage }> = ({ data }) => {
  console.log(data)
  return (
    <>
      <SEO title={`${data.titulo} | Notas`} />
      <Box w={['100%', '100%', '880px']} pt="2rem" px="1rem" mx="auto" pb="6rem">
        <Heading fontSize="2xl"> {data.titulo}</Heading>
        <Text as="small" fontSize="sm" pb="2rem">
          {data.tiempo_lectura} min de lectura
        </Text>
        <Stack
          w="100%"
          wrap="wrap"
          direction="row"
          spacing="1rem"
          fontSize="md"
          pb="2rem"
        >
          {data.tags.map((tag) => (
            <Text key={tag}> {tag} </Text>
          ))}
        </Stack>
        <Text as={ReactMarkdown} pb="3rem">
          {data.cuerpo}
        </Text>
        <ResponsiveImage
          borderRadius="primary"
          w="100%"
          h="auto"
          alt={`Imagen de nota ${data.titulo}`}
          url={`notas/${data.imagen_file}`}
        />
      </Box>
    </>
  )
}

export default NotePage

export async function getStaticPaths() {
  await login()
  const notas = await getAllNotasWithImages()

  return {
    paths: notas.map((nota) => `/notas/${nota.slug}`),
    fallback: false,
  }
}

export async function getStaticProps({ params }) {
  await login()

  const notaWithImage = await getNotaWithImage(params.slug)

  return { props: { data: notaWithImage } }
}
