"use client"

import { useMutationState } from "@tanstack/react-query"
import { Button } from "antd"
import { useTranslations } from "next-intl"
import { useEffect, useMemo, useRef } from "react"
import { useRecoilState, useSetRecoilState } from "recoil"

import Header from "@/component/Layout/Header"
import HeaderBreadcrumb, { ItemsHead } from "@/component/Layout/HeaderBreadcrumb"
import SegmentedHeader from "@/component/Layout/SegmentedHeader"
import FormMarket from "@/component/Market/common/FormMarket"
import { marketOptions } from "@/config/constant"
import { useRouter } from "@/i18n/routing"
import { titleState, typeMarketState } from "@/recoil"
import { useGetVerifyCredit } from "@/hook/useCommon"

export default function CreateMarketContainer() {
  const setPageTitle = useSetRecoilState(titleState)
  const [optionHeader, setOptionHeader] = useRecoilState(typeMarketState)
  const options = marketOptions()
  const router = useRouter()
  const refFormMarket = useRef<null | { onFinish: () => void; onCancel: () => void }>(null)

  const [mutationState] = useMutationState({
    filters: { mutationKey: ["market.create"] },
  })

  const isPending = useMemo(() => mutationState?.status === "pending", [mutationState])

  const trans = useTranslations("market")
  const tranButton = useTranslations("button")

  const { data: dataCredit } = useGetVerifyCredit()

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

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

  const items: ItemsHead[] = useMemo(() => {
    const filterItems = [
      {
        aria_label: options.find((item) => item?.value === optionHeader)?.label,
        href: "/market",
        title: options.find((item) => item?.value === optionHeader)?.label,
        classChevron: "hidden md:block",
      },
    ].filter(Boolean) as ItemsHead[]
    return filterItems
  }, [optionHeader])

  return (
    <>
      <Header
        slot={
          <SegmentedHeader
            value={optionHeader}
            options={options}
            onChange={handleChangeOptionHeader}
          />
        }
      />
      <div className="border border-[var(--secondary-20)] rounded-lg h-full flex flex-col">
        <HeaderBreadcrumb
          items={items}
          slot={
            <div className="hidden lg:flex gap-2">
              <Button
                type="default"
                onClick={() => refFormMarket?.current?.onCancel()}
                loading={isPending}
                className="!rounded-lg border-[var(--secondary-20)] !h-12 !px-8 font-semibold bg-[var(--secondary-10)] hover:border-[var(--primary--70)] hover:text-[var(--primary--70)]">
                {tranButton("cancel")}
              </Button>
              <Button
                type="primary"
                onClick={() => refFormMarket?.current?.onFinish()}
                loading={isPending}
                disabled={dataCredit?.data?.thumbnail_credit_left <= 0}
                className="!rounded-lg border-[var(--primary--70)] !h-12 !px-8 font-semibold bg-[var(--primary--70)] text-white hover:opacity-80">
                {tranButton("submit")}
              </Button>
            </div>
          }
        />
        <FormMarket
          type="create"
          ref={refFormMarket}
        />
      </div>
    </>
  )
}