import {
  Pagination,
  PaginationContainer,
  PaginationNext,
  PaginationPage,
  PaginationPageGroup,
  PaginationPrevious,
  usePagination,
} from '@ajna/pagination'
import { Link } from '@chakra-ui/next-js'
import { Card, CardBody, Heading, Image, LinkBox, LinkOverlay, SimpleGrid, Text } from '@chakra-ui/react'
import { useRouter } from 'next/navigation'
import directus from '~/lib/directus'

const PER_PAGE = 12

export const getServerSideProps = async ({ query }) => {
  const page = query?.page || 1
  const sort = query?.sort || 'name'

  const { data: vendors, meta } = await directus.items('vendors').readByQuery({
    fields: [
      //
      '*',
    ],
    limit: PER_PAGE,
    page,
    meta: ['filter_count'],
    sort,
  })
  return { props: { vendors, meta, page } }
}

export default function VendorsPage({ vendors, meta, page }) {
  const router = useRouter()

  const { pages, pagesCount, currentPage, setCurrentPage, isDisabled } = usePagination({
    total: meta.filter_count,
    limits: {
      outer: 1,
      inner: 1,
    },
    initialState: {
      pageSize: PER_PAGE,
      isDisabled: false,
      currentPage: page,
    },
  })

  const handlePageChange = (nextPage) => {
    setCurrentPage(nextPage)
    router.replace(`/vendors?page=${nextPage}`)
  }

  return (
    <div>
      <Heading size="lg" my={8}>
        Vendors
      </Heading>
      <SimpleGrid columns={[1, 2, 3, 4]} spacing={3}>
        {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="Chakra UI"
            />
            <CardBody>
              <LinkOverlay as={Link} href={`/vendors/${v.slug}`} prefetch={false}>
                {v.name}
              </LinkOverlay>
            </CardBody>
          </LinkBox>
        ))}
      </SimpleGrid>

      <Pagination
        pagesCount={pagesCount}
        currentPage={currentPage}
        isDisabled={isDisabled}
        onPageChange={handlePageChange}
      >
        <PaginationContainer align="center" my={4} w={'full'} justifyContent={'space-between'}>
          <PaginationPrevious>
            <Text>«</Text>
          </PaginationPrevious>
          <PaginationPageGroup align="center" mx={4}>
            {pages.map((page) => (
              <PaginationPage
                w={10}
                key={`pagination_page_${page}`}
                page={page}
                fontSize="sm"
                _current={{
                  bg: 'gray.400',
                }}
              />
            ))}
          </PaginationPageGroup>
          <PaginationNext>
            <Text>»</Text>
          </PaginationNext>
        </PaginationContainer>
      </Pagination>
    </div>
  )
}