import { Link } from '@chakra-ui/next-js'
import { Card, CardBody, Heading, Image, LinkBox, LinkOverlay, SimpleGrid, Skeleton } from '@chakra-ui/react'
import { useQuery } from '@tanstack/react-query'
import { useRouter } from 'next/router'
import Pagination from '~/components/pagination'

const PER_PAGE = 12

export default function VendorsPage() {
  const router = useRouter()
  const {
    query: { page = 1 },
  } = router

  const { data, isFetching } = useQuery({
    queryKey: ['vendors', page],
    queryFn: async (...props2) => {
      const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`)
      url.searchParams.append('fields[]', '*')
      url.searchParams.append('limit', PER_PAGE)
      url.searchParams.append('page', page)
      url.searchParams.append('sort', 'name')
      url.searchParams.append('meta[]', 'filter_count')

      const res = await fetch(url.toString())
      if (!res.ok) {
        throw new Error('Oops')
      }

      return res.json()
    },
    keepPreviousData: true,
    cacheTime: 1000 * 60 * 30,
    staleTime: 1000 * 60 * 30,
  })

  const { meta, data: vendors } = data || { meta: {}, data: [] }

  return (
    <div>
      <Heading size="lg" my={8}>
        Vendors
      </Heading>

      <SimpleGrid columns={[1, 2, 3, 4]} spacing={3}>
        {isFetching &&
          new Array(PER_PAGE).fill(true).map((v, k) => (
            <Card key={k}>
              <Skeleton h="40" />
              <CardBody>
                <Skeleton h="4" />
              </CardBody>
            </Card>
          ))}
        {!isFetching &&
          vendors.map((v) => (
            <LinkBox as={Card} rounded={4} key={v.id}>
              <Image
                roundedTop={4}
                objectFit="cover"
                src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80"
                alt={v.name}
              />
              <CardBody>
                <LinkOverlay as={Link} href={`/vendors/${v.slug}`} prefetch={false}>
                  {v.name}
                </LinkOverlay>
              </CardBody>
            </LinkBox>
          ))}
      </SimpleGrid>

      <Pagination page={Number(page)} itemsPerPage={PER_PAGE} totalItems={meta.filter_count} />
    </div>
  )
}