import { Box, Flex, Heading, Spacer, Stack, Text } from '@chakra-ui/react'
import ResponsiveImage from 'components/ResponsiveImage'
import SEO from 'components/SEO'
import { getAllWorks, getWorkWithImages, IWorkWithImages, login } from 'lib/api'

const WorkPage: React.FC<{ data: IWorkWithImages }> = ({ data }) => {
  return (
    <>
      <SEO title={`${data.titulo} | Work`} />
      <ResponsiveImage
        url={`work/${data.banner_file}`}
        alt={`Imagen de ${data.titulo}`}
        w="100%"
        minH="580px"
        maxH="70vh"
        mb="1rem"
      />
      <Box w={['100%', '100%', '1220px']} pt="2rem" px="1rem" mx="auto">
        <Flex pb="4rem" direction={['column', 'column', 'row']}>
          <Box pb="2rem">
            <Heading as="h3" fontSize="xl" pb="0.5rem">
              {data.titulo}
            </Heading>
            <Text
              fontSize="md"
              sx={{
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                overflow: 'hidden',
                wordSpacing: '0.5rem',
              }}
            >
              {data.tags.map((tag) => `${tag} `)}
            </Text>
          </Box>
          <Spacer />
          <Flex direction="column" w={['100%', '100%', '40%']} px={['1rem', '1rem', '0']}>
            <Stack
              direction="row"
              wrap="wrap"
              spacing="0"
              justify="space-between"
              pb="6rem"
            >
              <Box fontSize="md">
                <Heading fontSize="inherit" as="h4" pb="0.5rem">
                  Cliente
                </Heading>
                <Text>{data.cliente}</Text>
              </Box>
              <Box fontSize="md">
                <Heading fontSize="inherit" as="h4" pb="0.5rem">
                  País
                </Heading>
                <Text>{data.pais}</Text>
              </Box>
              <Box fontSize="md">
                <Heading fontSize="inherit" as="h4" pb="0.5rem">
                  Año
                </Heading>
                <Text>{data.year}</Text>
              </Box>
            </Stack>
            <Box w="100%" h="8px" mb="calc(3rem + 8px)">
              <Box display="inline-block" w="60%" h="100%" bg={data.color1} />
              <Box display="inline-block" w="15%" h="100%" bg={data.color2} />
            </Box>
            <Heading as="h4" fontSize="md" pb="1rem">
              El proyecto
            </Heading>
            <Text fontSize={['md', 'md', 'lg']}>{data.texto_descripcion}</Text>
          </Flex>
        </Flex>
        {data.imagenes_files.map((imagen, index) => (
          <ResponsiveImage
            key={imagen}
            width="100%"
            height="auto"
            url={`work/${imagen}`}
            alt={`Imagen ${index} ilustrativa de ${data.titulo}`}
            mb="2rem"
          />
        ))}
      </Box>
    </>
  )
}

export default WorkPage

export async function getStaticPaths() {
  await login()
  const works = await getAllWorks()

  return {
    paths: works.data.map((work) => `/work/${work.slug}`),
    fallback: false,
  }
}

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

  const workWithImages = await getWorkWithImages(params.slug)

  return { props: { data: workWithImages } }
}
