"use client"

import Header from "@/component/Layout/Header"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import SegmentedHeader from "@/component/Layout/SegmentedHeader"
import DetailPostWGN from "@/component/WGN/Detail"
import { LIST_FORUM, PAGINATION, wgnOptions } from "@/config/constant"
import { useGetGameForums } from "@/hook/useGames"
import { useRouter } from "@/i18n/routing"
import { titleState, typeWGNState } from "@/recoil"
import { IGameForums, IMyGamePost } from "@/type/Games"
import { isEmpty } from "lodash"
import { useEffect, useMemo } from "react"
import { useRecoilState, useSetRecoilState } from "recoil"

type IProps = {
  post: IMyGamePost
}

export default function DetailPostContainer({ post }: IProps) {
  const router = useRouter()
  const options = wgnOptions()
  const setPageTitle = useSetRecoilState(titleState)
  const [optionHeader, setOptionHeader] = useRecoilState(typeWGNState)

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

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

  const defaultQuery = {
    pageNum: 1,
    pageSize: PAGINATION.DEFAULT_PAGE_SIZE,
  }

  const { data: gameForums } = useGetGameForums(defaultQuery)

  const dataGameForums = useMemo(() => {
    const arrGameForums = new Map(gameForums?.data?.data?.forums?.map((item: IGameForums) => [item.id, item]))

    const mergedArrayForum = !isEmpty(arrGameForums)
      ? LIST_FORUM.map((item) => ({
          ...item,
          ...arrGameForums.get(item.id),
        }))
      : []

    return mergedArrayForum
  }, [gameForums?.data?.data?.forums])

  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 pb-6 overflow-x-hidden">
        <div className="md:border border-[var(--secondary-20)] rounded-lg h-full flex flex-col">
          <HeaderBreadcrumb
            items={[
              {
                aria_label: dataGameForums?.find((item) => item?.id === post?.forum_id)?.name,
                href: `/wgn/${post?.forum_id}`,
                title: dataGameForums?.find((item) => item?.id === post?.forum_id)?.name || "Forum",
                classChevron: "hidden md:block",
              },
              {
                aria_label: post?.title,
                href: "#",
                title: post?.title,
                className: "!hidden md:!flex",
              },
            ]}
            className="!px-0 md:!px-4"
          />
          <DetailPostWGN post={post} />
        </div>
      </main>
    </>
  )
}