import odooApi from '@/core/api/odooApi'
import { createSlug } from '@/core/utils/slug'
import {
  Breadcrumb as ChakraBreadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  Skeleton
} from '@chakra-ui/react'
import Link from 'next/link'
import React from 'react'
import { useQuery } from 'react-query'

/**
 * Render a breadcrumb component.
 *
 * @param {object} categoryId - The ID of the category.
 * @return {JSX.Element} The breadcrumb component.
 */
const Breadcrumb = ({ categoryId }) => {
  const breadcrumbs = useQuery(
    `category-breadcrumbs/${categoryId}`,
    async () => await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`)
  )

  return (
    <div className='container mx-auto py-4 md:py-6'>
      <Skeleton isLoaded={!breadcrumbs.isLoading} className='w-2/3'>
        <ChakraBreadcrumb>
          <BreadcrumbItem>
            <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
              Home
            </BreadcrumbLink>
          </BreadcrumbItem>

          {breadcrumbs.data?.map((category, index) => (
            <BreadcrumbItem key={index} isCurrentPage={index === breadcrumbs.data.length - 1}>
              {index === breadcrumbs.data.length - 1 ? (
                <BreadcrumbLink className='whitespace-nowrap'>{category.name}</BreadcrumbLink>
              ) : (
                <BreadcrumbLink
                  as={Link}
                  href={createSlug('/shop/category/', category.name, category.id)}
                  className='!text-danger-500 whitespace-nowrap'
                >
                  {category.name}
                </BreadcrumbLink>
              )}
            </BreadcrumbItem>
          ))}
        </ChakraBreadcrumb>
      </Skeleton>
    </div>
  )
}

export default Breadcrumb