import Breadcrumb from '@theme/views/breadcrumb';
import { ProductInfoSlider } from '@theme/views/product';
import ThemePlaceholder from '@akinon/pz-theme/src/theme-placeholder';
import { BreadcrumbResultType, ProductResult } from '@akinon/next/types';
import { buildProductPageContext } from '@theme/utils/theme-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) {
  const productPageContext = buildProductPageContext(data);
  const categoryIds = breadcrumbData
    ?.map((item) => item.extra_context?.attributes?.category_id)
    .filter(Boolean)
    .join(',');

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

  return (
    <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>
      <ThemePlaceholder
        slug="product-page-new"
        pageContext={productPageContext}
      />
    </div>
  );
}
