import React, { Fragment } from 'react';
import { useQuery } from 'react-query';
import { getProductCategoryBreadcrumb } from '~/services/product';
import Link from 'next/link';
import { createSlug } from '~/libs/slug';

type Props = {
  id: number;
  name: string;
};

const MAX_VISIBLE_CATEGORIES = 2; // tampilkan 2 level terakhir

const Breadcrumb = ({ id, name }: Props) => {
  const { data: breadcrumbs = [] } = useQuery({
    queryKey: ['product-category-breadcrumb', id], // penting: ikutkan id
    queryFn: () => getProductCategoryBreadcrumb(id),
    refetchOnWindowFocus: false,
  });

  const total = breadcrumbs.length;
  const showEllipsis = total > MAX_VISIBLE_CATEGORIES;
  const visible = showEllipsis
    ? breadcrumbs.slice(total - MAX_VISIBLE_CATEGORIES)
    : breadcrumbs;
  const hiddenText = showEllipsis
    ? breadcrumbs
        .slice(0, total - MAX_VISIBLE_CATEGORIES)
        .map((c) => c.name)
        .join(' / ')
    : '';

  return (
    <div className='flex items-center whitespace-nowrap overflow-hidden text-caption-1 leading-7'>
      <Link href='/' className='text-danger-500 shrink-0'>
        Home
      </Link>
      <span className='mx-2 shrink-0'>/</span>

      {showEllipsis && (
        <>
          <span className='text-danger-500 shrink-0' title={hiddenText}>
            …
          </span>
          <span className='mx-2 shrink-0'>/</span>
        </>
      )}

      {visible.map((category, index) => (
        <Fragment key={category.id ?? index}>
          <Link
            href={createSlug(
              '/shop/category/',
              category.name,
              String(category.id)
            )}
            className='text-danger-500 shrink-0'
          >
            {category.name}
          </Link>
          <span className='mx-2 shrink-0'>/</span>
        </Fragment>
      ))}

      <span className='truncate min-w-0 flex-1'>{name}</span>
    </div>
  );
};

export default Breadcrumb;