"use client"

import React, { useEffect, useMemo, useState } from "react"
import { useTranslations } from "next-intl"
import CardItemKuisine from "../ItemKuisine"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import { useRouter } from "@/i18n/routing"
import { Spin, type MenuProps } from "antd"
import Image from "next/image"
import classNames from "classnames"
import { useParams, useSearchParams } from "next/navigation"
import SearchBox from "@/component/Layout/SearchBox"
import Rate from "@component/Common/Rate"
import { CustomDropDownMenuCss, DropDownMenu } from "@/component/Common/DropDownMenu"
import { useAddFavourite, useListKuisine, useRemoveFavourite } from "@/hook/useKuisine"
import { PAGINATION } from "@/config/constant"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faSpinner } from "@fortawesome/free-solid-svg-icons"
import NotFoundBox from "@/component/Notfound"
import { formatCurrency } from "@/util/Common"
import { useNotificationContext } from "@/component/Layout/NotificationContext"
import { renderLabelItem } from "@/component/Common/LabelItem"
import { LoadingBox } from "@/component/Common/LoadingBox"

const WizzorKuisine = () => {
  const { cateid } = useParams()
  const searchParams = useSearchParams()
  const router = useRouter()
  const trans = useTranslations("kuisine")
  const transBook = useTranslations("book")
  const transButton = useTranslations("button")
  const transMusic = useTranslations("music")
  const tranContact = useTranslations("contact")
  const [searchValue, setSearchValue] = useState(searchParams.get("search") || "")
  const [activeButtons, setActiveButtons] = useState<any>("")
  const [page, setPage] = useState(PAGINATION.DEFAULT_CURRENT_PAGE)
  const [totalPage, setTotalPage] = useState(0)
  const [query, setQuery] = useState<any>({
    pageNum: page,
    pageSize: PAGINATION.DEFAULT_PAGE_SIZE,
    categoryId: Number(cateid) ? cateid : "",
    search: searchValue,
  })
  const { data: dataKuisine, isLoading, refetch } = useListKuisine(query)
  const [kuisines, setKuisines] = useState<any[]>([])
  const { notify } = useNotificationContext()

  const addFavourite = useAddFavourite()
  const removeFavourite = useRemoveFavourite()
  const transMessage = useTranslations("message")

  useEffect(() => {
    if (dataKuisine?.data) {
      setTotalPage(dataKuisine?.data?.total_pages)
      if (page === 1) setKuisines(dataKuisine?.data?.kuisines)
      else setKuisines((prevKuisines) => [...prevKuisines, ...dataKuisine?.data?.kuisines])
    }
  }, [dataKuisine])

  useEffect(() => {
    if (searchParams.get("search")) {
      handleSearchKeyword(searchParams.get("search") || "")
    }
  }, [searchParams])

  const handleSearchKeyword = (keyword: string) => {
    setSearchValue(keyword)
    const params = new URLSearchParams(searchParams)
    if (keyword) params.set("search", keyword)
    else params.delete("search")
    router.push(`?${params.toString()}`, { scroll: false })
    if (keyword.length > 2) {
      setPage(1)
      setQuery({ ...query, pageNum: 1, search: keyword })
    } else if (keyword.length === 0) {
      setPage(1)
      setQuery({ ...query, pageNum: 1, search: ""})
    }
  }

  const handleOpenChange = (open: boolean, index: any) => {
    setActiveButtons((prevId: any) => (prevId === index || !open ? null : index))
  }

  const buttonTopRight = (item: any, className?: string) => {
    const items: MenuProps["items"] = [
      {
        label: renderLabelItem(transBook("go_detail"), "/img/icon/information_circle_outline.svg", "information_circle_outline"),
        key: "0",
        onClick: () => {
          router.push(`/kuisine/${cateid}/${item.id}`)
        },
      },
      item?.is_favourite
        ? {
            label: renderLabelItem(tranContact("remove_favorite"), "/img/icon/broken_heart.svg", tranContact("remove_favorite")),
            key: "1",
            onClick: () => handleRemoveFavorite(item.id),
          }
        : {
            label: renderLabelItem(transBook("add_to_favorite"), "/img/icon/heart_outline.svg", transBook("add_to_favorite")),
            key: "2",
            onClick: () => handleAddFavorite(item.id),
          }
    ]

    return (
      <DropDownMenu
        className={`${className || ""}`}
        menu={{ items, className: classNames(CustomDropDownMenuCss) }}
        onOpenChange={(open) => handleOpenChange(open, item.id)}
      />
    )
  }

  const handleAddFavorite = (id: string) => {
    addFavourite
      .mutateAsync(id)
      .then(() => {
        notify({
          type: "success",
          message: transMessage("congratulation"),
          description: transMessage("add_favorite_success"),
        })
        if (page === 1) {
          refetch()
        } else {
          setPage(1)
          setQuery({ ...query, pageNum: 1 })
        }
      })
      .catch((error) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: error?.response?.data.msgs || transMessage("fail"),
        })
      })
  }

  const handleRemoveFavorite = (id: string) => {
    removeFavourite
      .mutateAsync(id)
      .then(() => {
        notify({
          type: "success",
          message: transMessage("congratulation"),
          description: transMessage("remove_favorite_success"),
        })
        if (page === 1) {
          refetch()
        } else {
          setPage(1)
          setQuery({ ...query, pageNum: 1 })
        }
      })
      .catch((error) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: error?.response?.data.msgs || transMessage("fail"),
        })
      })
  }

  const renderLabelContent = (title: string, src_icon: string, alt_icon: string, isSpecial: boolean) => {
    return (
      <div
        className={`text-sm flex items-center font-normal	text-[var(--secondary-60)] mb-3.5 ${
          isSpecial ? "text-[var(--secondary-30)]" : "text-[var(--secondary-60)]"
        }`}>
        <Image
          src={src_icon}
          alt={alt_icon}
          width={24}
          height={24}
        />
        <div className="pl-1.5 h-5 line-clamp-1 flex-1">{title}</div>
      </div>
    )
  }

  const handleScroll = (e: any) => {
    const { scrollTop, scrollHeight, clientHeight } = e.target
    if (scrollTop + clientHeight >= scrollHeight - 5) {
      if (page < totalPage && !isLoading) {
        setPage(page + 1)
        setQuery({ ...query, pageNum: page + 1 })
      }
    }
  }

  useEffect(() => {
    const mainElement = document.getElementById("layout-content")

    const handleScroll = () => {
      if (mainElement) {
        const { scrollTop, scrollHeight, clientHeight } = mainElement
        if (scrollTop + clientHeight >= scrollHeight - 5) {
          if (page < totalPage && !isLoading) {
            setPage(page + 1)
            setQuery({ ...query, pageNum: page + 1 })
          }
        }
      }
    }

    if (mainElement) {
      mainElement.addEventListener("scroll", handleScroll)
    }

    return () => {
      if (mainElement) {
        mainElement.removeEventListener("scroll", handleScroll)
      }
    }
  }, [])

  return (
    <div className="h-full flex flex-col">
      <HeaderBreadcrumb
        items={[
          {
            aria_label: trans("wizzor_kuisine_categories"),
            href: "/kuisine",
            title: trans("wizzor_kuisine_categories"),
            classChevron: "hidden md:block",
          },
          {
            aria_label: Number(cateid) ? kuisines[0]?.category?.name || "" : "All Kuisine",
            href: `/kuisine/${cateid}`,
            title: Number(cateid) ? kuisines[0]?.category?.name || "" : "All Kuisine",
            classChevron: "hidden md:block",
            className: "!hidden md:!flex",
          },
        ]}
        slot={
          <div className="flex items-center justify-end">
            <SearchBox
              value={searchValue}
              onSearch={handleSearchKeyword}
              onChange={setSearchValue}
              placeholder={trans("search")}
              className="h-12"
              classInput="!h-12 lg:!w-56 xl:!w-56"
              classButton="!h-12 md:!pl-2"
            />
          </div>
        }
      />
      <div
        className="overflow-y-auto grow"
        onScroll={handleScroll}>
        {isLoading && !kuisines.length ? (
          <LoadingBox icon="/img/gif/Kuisine.gif" />
        ) : kuisines.length ? (
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-2 p-4">
            {kuisines?.map((item: any) => {
              const isSpecial = item?.category?.name === "Cooking Class"
              return (
                <CardItemKuisine
                  key={item.id}
                  keyActive={activeButtons}
                  keyProps={item?.id}
                  className="col-span-1 flex md:block"
                  type={isSpecial ? "special" : "default"}
                  url={`/kuisine/${cateid}/${item?.id}`}
                  url_image={item?.picture1}
                  alt_image={item?.picture1_org_name}
                  classNameImage="rounded-lg"
                  title={item?.recipe}
                  classNameTitle={`${isSpecial ? "text-[var(--primary--30)] hover:text-[var(--primary--30)]" : ""}`}
                  decs={item?.description}
                  classNameDecs={`${isSpecial ? "text-[var(--secondary-30)]" : ""}`}
                  nation={item?.theme}
                  foodType={item?.seatingtype}
                  classNameNation={`${isSpecial ? "text-[var(--secondary-30)]" : ""}`}
                  buttonTopRight={buttonTopRight(item, "absolute top-[6px] right-[6px]")}
                  priceElement={
                    <p className={`${isSpecial ? "text-[var(--primary--30)]" : "text-[var(--primary--70)]"} text-2xl font-medium mb-3.5`}>{`$${formatCurrency(
                      item.cost,
                    )}`}</p>
                  }
                  footerContent={
                    <div>
                      <div className={`flex items-center gap-1 mb-3.5`}>
                        <span className={`text-base font-semibold leading-[22px] ${isSpecial ? "text-[var(--primary--30)]" : "text-[var(--secondary-100)]"}`}>
                          {item?.ratings?.average}
                        </span>
                        <Rate
                          value={Number(item?.ratings?.average)}
                          color={`${isSpecial ? "#FFDA94" : "#030712"}`}
                        />
                        <span
                          className={`${
                            isSpecial ? "text-[var(--secondary-30)]" : "text-[var(--secondary-60)]"
                          } text-sm font-light`}>{` (${item?.ratings?.count} reviews)`}</span>
                      </div>
                      {renderLabelContent(item?.country, `/img/icon/${isSpecial ? "location_outline_2" : "location"}.svg`, "location", isSpecial)}
                      {renderLabelContent(
                        `${item.additionalinfo} - ${item?.address} - ${item?.city}`,
                        `/img/icon/${isSpecial ? "flag_outline" : "flag"}.svg`,
                        "flag",
                        isSpecial,
                      )}
                      {renderLabelContent(
                        `${item?.noofseats} available seats`,
                        `/img/icon/${isSpecial ? "user_tag_outline" : "user_tag"}.svg`,
                        "user_tag",
                        isSpecial,
                      )}
                    </div>
                  }
                />
              )
            })}
          </div>
        ) : (
          <NotFoundBox
            className="!bg-white py-8 rounded-3xl"
            backHome={false}
            message={transMusic("we_found_nothing_here")}
          />
        )}
      </div>
    </div>
  )
}

export default WizzorKuisine