import Breadcrumb from '@theme/views/breadcrumb';
import { ProductInfoSlider } from '@theme/views/product';
import ChromeSlot from '@akinon/pz-theme/src/chrome/chrome-slot';
import { PLACEHOLDER_SLUGS } from '@akinon/pz-theme/src/chrome/placeholder-slugs';
import { BreadcrumbResultType, ProductResult } from '@akinon/next/types';
import { buildProductPageContext } from '@akinon/pz-theme/src/chrome/page-context';

interface DeliveryReturnItem {
  product_delivery_returns?: {
    value: string;
    kwargs: object;
  };
}

export interface ProductPageProps {
  children?: React.ReactNode;
  data: ProductResult;
  breadcrumbData?: BreadcrumbResultType[];
  deliveryReturn?: DeliveryReturnItem | null;
}

export default async function ProductLayout({
  data,
  breadcrumbData,
  children
}: ProductPageProps) {
  // Breadcrumbs travel with the product context so the PDP is not the one
  // page type whose composition cannot build a trail.
  const productPageContext = buildProductPageContext(data, breadcrumbData);
  const categoryIds = breadcrumbData
    ?.map((item) => item.extra_context?.attributes?.category_id)
    .filter(Boolean)
    .join(',');

  const categoryPaths = breadcrumbData
    ?.map((item) => item.path)
    .filter(Boolean)
    .join(',');

  // The brand markup must be the slot's fallback, not a sibling: outside it
  // the designer never gets the takeover affordance, and a published
  // composition would render underneath the brand page instead of replacing it.
  return (
    <ChromeSlot
      slug={PLACEHOLDER_SLUGS.productDetail}
      pageContext={productPageContext}
      fallback={
        <div className="container mx-auto px-3 py-16 lg:px-0">
          <div className="my-5">
            <Breadcrumb breadcrumbList={breadcrumbData} />
          </div>
          <div className="grid grid-cols-5 lg:gap-10 mx-auto">
            <div className="mb-10 col-span-5 lg:col-span-3 lg:mb-0">
              <ProductInfoSlider product={data.product} />
            </div>
            <div
              className="flex flex-col items-center col-span-5 lg:col-span-2"
              data-category-ids={categoryIds}
              data-category-paths={categoryPaths}
            >
              <div className="w-full">{children}</div>
            </div>
          </div>
        </div>
      }
    />
  );
}