"use client"

import Header from "@/component/Layout/Header"
import SegmentedHeader from "@/component/Layout/SegmentedHeader"
import DetailNewsPage from "@/component/News/Detail"
import { newsOptions } from "@/config/constant"
import { useRouter } from "@/i18n/routing"
import { titleState } from "@/recoil"
import { typeNewsState } from "@/recoil/news"
import { useQueryClient } from "@tanstack/react-query"
import { useTranslations } from "next-intl"
import { useEffect, useMemo } from "react"
import { useRecoilState, useSetRecoilState } from "recoil"

type Props = {
  children?: React.ReactNode
  post: any
}

export default function NewDetailContainer(props: Props) {
  const queryClient = useQueryClient()
  const setPageTitle = useSetRecoilState(titleState)
  const trans = useTranslations("news")
  const [optionHeader, setOptionHeader] = useRecoilState(typeNewsState)

  const dataProfile: any = queryClient.getQueryData(["auth.profile"])
  const isBusinessAccount = useMemo(() => !["Personel", "Blogger"]?.includes(dataProfile?.data?.group || ""), [dataProfile?.data?.group])
  const options = newsOptions().filter((item) => !(isBusinessAccount && item.value === "my_post"))
  const router = useRouter()

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

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

  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="border border-[var(--secondary-20)] rounded-lg h-full flex flex-col">
          <DetailNewsPage post={props.post} />
        </div>
      </main>
    </>
  )
}