import { Link } from '@chakra-ui/next-js'
import { Box, Button, Flex, Heading, Image, List, ListIcon, ListItem, SimpleGrid, Text } from '@chakra-ui/react'
import { FaFacebookSquare, FaLinkedin, FaTwitterSquare } from 'react-icons/fa'
import { TbWorldWww } from 'react-icons/tb'

export const getStaticPaths = async () => {
  const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`)
  url.searchParams.append('fields[]', 'slug')
  url.searchParams.append('limit', -1)
  const res = await fetch(url.toString())

  const { data: vendors } = await res.json()

  return {
    paths: vendors.map((v) => ({ params: { slug: v.slug } })),
    fallback: false, // false or "blocking"
  }
}

export const getStaticProps = async ({ params: { slug } }) => {
  const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`)
  url.searchParams.append('fields[]', '*')
  url.searchParams.append('fields[]', 'categories.categories_id.slug')
  url.searchParams.append('fields[]', 'categories.categories_id.name')
  url.searchParams.append('fields[]', 'categories.categories_id.parent_id')
  url.searchParams.append('fields[]', 'categories.categories_id.subcategories.slug')
  url.searchParams.append('fields[]', 'categories.categories_id.subcategories.name')
  url.searchParams.append('limit', 1)
  url.searchParams.append('filter', JSON.stringify({ slug: { _eq: slug } }))

  const res = await fetch(url.toString())

  const {
    data: [vendor],
  } = await res.json()

  return { props: vendor }
}

export default function VendorPage(vendor) {
  return (
    <>
      <Flex justifyContent="space-between" direction={['column', 'column', 'row']}>
        <Heading marginY="6">{vendor.name}</Heading>
        <Image
          rounded={4}
          objectFit="contain"
          src={`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/assets/${vendor.logo}?key=logo-page`}
          alt={vendor.name}
          width="350px"
          height="150px"
          bg="#fff"
        />
      </Flex>
      <Box
        dangerouslySetInnerHTML={{ __html: vendor.long_description }}
        sx={{
          h5: {
            fontFamily: 'var(--chakra-fonts-heading)',
            fontWeight: 'var(--chakra-fontWeights-bold)',
            fontSize: 'var(--chakra-fontSizes-xl)',
            marginTop: 'var(--chakra-space-6)',
            marginBottom: 'var(--chakra-space-1)',
          },
        }}
      ></Box>

      <SimpleGrid columns={[1, 2, 3]} spacing={10}>
        <Box>
          <Heading size="md" mt="6" mb="1">
            Address
          </Heading>
          <Text>
            {vendor.address_line_1 && (
              <>
                {vendor.address_line_1}
                <br />
              </>
            )}
            {vendor.address_line_2 && (
              <>
                {vendor.address_line_2}
                <br />
              </>
            )}
            {vendor.city && (
              <>
                {vendor.city}
                <br />
              </>
            )}
            {vendor.state && (
              <>
                {vendor.state}
                <br />
              </>
            )}
            {vendor.country && (
              <>
                {vendor.country}
                <br />
              </>
            )}
          </Text>
        </Box>
        <Box>
          {(vendor.website || vendor.facebook || vendor.linkedin || vendor.twitter) && (
            <>
              <Heading size="md" mt="6" mb="1">
                Social
              </Heading>
              <List>
                {vendor.website && (
                  <ListItem>
                    <ListIcon as={TbWorldWww} />
                    {vendor.website}
                  </ListItem>
                )}
                {vendor.linkedin && (
                  <ListItem>
                    <ListIcon as={FaLinkedin} />
                    {vendor.linkedin}
                  </ListItem>
                )}
                {vendor.twitter && (
                  <ListItem>
                    <ListIcon as={FaTwitterSquare} />
                    {vendor.twitter}
                  </ListItem>
                )}
                {vendor.facebook && (
                  <ListItem>
                    <ListIcon as={FaFacebookSquare} />
                    {vendor.facebook}
                  </ListItem>
                )}
              </List>
            </>
          )}
        </Box>
        <Box>
          {vendor.categories.length > 0 && (
            <>
              <Heading size="md" mt="6" mb="1">
                Categories
              </Heading>
              <List spacing="3">
                {vendor.categories.map((cat) => (
                  <ListItem key={cat.categories_id.slug}>
                    <Button
                      as={Link}
                      fontSize="11"
                      href={{
                        pathname: '/vendors',
                        query: {
                          category: cat.categories_id.slug,
                        },
                      }}
                      paddingX="0.5rem"
                      height="1.5rem"
                    >
                      {cat.categories_id.name}
                    </Button>
                  </ListItem>
                ))}
              </List>
            </>
          )}
        </Box>
      </SimpleGrid>
    </>
  )
}