"use client"
import type { Children } from "@/core/types/common";
import type { ProductFiltersDTO } from "@/core/types/dto";

import { useLayoutEffect, useRef, type JSX } from "react";
import useSurfaceProtect from "@/app/(visualization)/project/@modals/(.)customization/_utils/hooks/useSurfaceProtect";
import useScreen from "@/core/utils/hooks/useScreen";
import useDetailsView from "@/app/(visualization)/project/@modals/(.)customization/_utils/hooks/useDetailsView";
import usePageSubcategory from "@/app/(visualization)/project/@modals/(.)customization/_utils/hooks/usePageSubcategory";

import Breadcrumb from "@/app/(visualization)/project/@modals/(.)customization/_components/_navigation/Breadcrumb";
import FilterDrawer from "@/app/(visualization)/project/@modals/(.)customization/_components/_filter/FilterDrawer";

interface PrimarySectionProps extends Children {
  initialFilters?: ProductFiltersDTO;
}
/**
 * The wrapper for display the **left-side** UI components on the **customization** modal window.
 * This wrapper includes the sliding sidebar filter container, and breadcrumbs provider.
 * @param {Readonly<PrimarySectionProps>} props
 * @return {JSX.Element}
 */
export default function PrimarySection(props: Readonly<PrimarySectionProps>): JSX.Element {
  const containerRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const { screenHeight } = useScreen();
  const details = useDetailsView();
  const subcategory = usePageSubcategory();

  useSurfaceProtect();

  useLayoutEffect(() => {
    if (containerRef.current && contentRef.current) {
      contentRef.current.style.height = (containerRef.current?.offsetHeight - 28 - 20) + "px";
    }
  }, [screenHeight]);

  return (
    <div
      ref={containerRef}
      className={`
        flex-1 min-w-[280px] max-w-max max-h-[740px] overflow-hidden relative flex flex-col gap-5 
        ${details && subcategory?.includes("tile") ? "!gap-3" : ""}
      `}
    >
      <div ref={contentRef} className={"flex-1 max-w-max flex flex-col gap-4 relative"}>
        {props.children}
      </div>
      <FilterDrawer initialFilters={props.initialFilters} />
      <Breadcrumb />
    </div>
  );
}