"use client"

import PostKuisineContent from "@/component/Kuisine/PostKuisineContent"
import Header from "@/component/Layout/Header"
import HeaderBreadcrumb, { ItemsHead } from "@/component/Layout/HeaderBreadcrumb"
import SegmentedHeader from "@/component/Layout/SegmentedHeader"
import { kuisineOptions } from "@/config/constant"
import { useRouter } from "@/i18n/routing"
import { titleState, typeKuisineState } from "@/recoil"
import { IKuisineDetail } from "@/type/DetailKuisine"
import { useTranslations } from "next-intl"
import { useEffect, useMemo } from "react"
import { useRecoilState, useSetRecoilState } from "recoil"

interface IProps {
  kuisineDetail: IKuisineDetail
  revalidate: (id: number) => Promise<void>
}

export default function DetailPostKuisineContainer({ kuisineDetail, revalidate}: IProps) {
  const router = useRouter()
  const setPageTitle = useSetRecoilState(titleState)
  const trans = useTranslations("kuisine")
  const [optionHeader, setOptionHeader] = useRecoilState(typeKuisineState)
  const options = kuisineOptions()

  useEffect(() => {
    setPageTitle("Kuisine")
  }, [])

  const handleChangeOptionHeader = (value: string | number) => {
    setOptionHeader(value as string)
    router.push("/kuisine")
  }

  const items: ItemsHead[] = useMemo(() => {
    const filterItems = [
      optionHeader === "all" && {
        aria_label: trans("wizzor_kuisine_categories"),
        href: "/kuisine",
        title: trans("wizzor_kuisine_categories"),
        classChevron: "hidden md:block",
      },
      kuisineDetail?.category?.id && {
        aria_label: kuisineDetail?.category?.name,
        href: `/kuisine/${kuisineDetail?.category?.id}`,
        title: kuisineDetail?.category?.name,
        classChevron: "hidden md:block",
        className: "!hidden md:!flex",
      },
      kuisineDetail?.category?.id &&
        kuisineDetail?.id && {
          aria_label: kuisineDetail?.recipe,
          href: `/kuisine/${kuisineDetail?.category?.id}/${kuisineDetail?.id}`,
          title: kuisineDetail?.recipe,
          className: "!hidden md:!flex",
        },
    ].filter(Boolean) as ItemsHead[]
    return filterItems
  }, [kuisineDetail, optionHeader])

  return (
    <>
      <Header
        slot={
          <SegmentedHeader
            value={optionHeader}
            options={options}
            onChange={handleChangeOptionHeader}
          />
        }
      />
      <main
        id="main-content"
        className="flex-1 px-4 lg:px-5 xl:px-6 overflow-y-auto pt-4 pb-6 overflow-x-hidden">
        <div className="md:border border-[var(--secondary-20)] rounded-lg h-full flex flex-col">
          <HeaderBreadcrumb
            items={items}
            className="!px-0 md:!px-4"
          />
          <PostKuisineContent kuisineDetail={kuisineDetail} revalidate={revalidate} />
        </div>
      </main>
    </>
  )
}