"use client"

import React, { useEffect, useMemo, useState } from "react"
import { find } from "lodash"
import { useTranslations } from "next-intl"
import type { MenuProps } from "antd"
import Image from "next/image"
import classNames from "classnames"
import { useRecoilValue } from "recoil"

import CardItemKuisine from "../ItemKuisine"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import { useRouter } from "@/i18n/routing"
import Rate from "@component/Common/Rate"
import { PAGINATION, kuisineOptions } from "@/config/constant"
import { typeKuisineState } from "@/recoil"
import { CustomDropDownMenuCss, DropDownMenu } from "@/component/Common/DropDownMenu"
import { useGetKuisineFavourites, useRemoveFavourite } from "@/hook/useKuisine"
import { LoadingResult } from "@/component/Common/LoadingResult/LoadingResult"
import { useNotificationContext } from "@/component/Layout/NotificationContext"
import { formatCurrency } from "@/util/Common"
import { renderLabelItem } from "@/component/Common/LabelItem"

const MyFavorites = () => {
  const router = useRouter()
  const options = kuisineOptions()
  const { notify } = useNotificationContext()
  const typeKuisine = useRecoilValue(typeKuisineState)

  const trans = useTranslations("kuisine")
  const transBook = useTranslations("book")
  const transButton = useTranslations("button")
  const transMessage = useTranslations("message")

  const [searchValue, setSearchValue] = useState("")
  const [activeButtons, setActiveButtons] = useState<any>("")

  const [page, setPage] = useState(PAGINATION.DEFAULT_CURRENT_PAGE)
  const [totalPage, setTotalPage] = useState(0)
  const [query, setQuery] = useState({ pageNum: page, pageSize: PAGINATION.DEFAULT_PAGE_SIZE })

  const { data: kuisineFavourites, isLoading, refetch } = useGetKuisineFavourites(query)
  const removeFavourite = useRemoveFavourite()

  const dataKuisineFavourites = useMemo(() => {
    setTotalPage(kuisineFavourites?.data?.total_pages || 0)

    return kuisineFavourites?.data?.kuisines
  }, [kuisineFavourites?.data?.kuisines, kuisineFavourites?.data?.total_pages])

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

  const handleRemoveFavorite = (id: string) => {
    removeFavourite
      .mutateAsync(id)
      .then((res) => {
        if (res?.status === 200) {
          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 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/${item?.category?.id}/${item?.id}`)
        },
      },
      {
        label: renderLabelItem(transBook("remove_from_favorite"), "/img/icon/broken_heart.svg", "remove_from_favorite"),
        key: "1",
        onClick: () => handleRemoveFavorite(item?.id),
      }
    ]

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

  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: find(options, { value: typeKuisine as string })?.label || "",
            href: "#",
            title: find(options, { value: typeKuisine as string })?.label || "",
          },
        ]}
        subtitle={`${dataKuisineFavourites?.length || 0} ${dataKuisineFavourites && dataKuisineFavourites?.length > 1 ? trans("kuisines") : trans("kuisine")}`}
        showButton={false}
      />
      <LoadingResult
        isLoading={isLoading && !dataKuisineFavourites?.length}
        isShowResult={Boolean(dataKuisineFavourites?.length)}
        result={
          <div
            className="overflow-y-auto"
            onScroll={handleScroll}>
            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-2 p-4">
              {dataKuisineFavourites?.map((item: any) => {
                const isSpecial = item?.category?.name === "Cooking Class"
                return (
                  <CardItemKuisine
                    key={item?.id}
                    keyProps={item?.id}
                    keyActive={activeButtons}
                    className="col-span-1 flex md:block"
                    type={isSpecial ? "special" : "favourites"}
                    url={`/kuisine/${item?.category?.id}/${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)]" : "!text-[var(--danger-70)] hover:!text-[var(--danger-70)]"
                    }`}
                    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={`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} ${trans("available_seats")}`,
                          `/img/icon/${isSpecial ? "user_tag_outline" : "user_tag"}.svg`,
                          "user_tag",
                          isSpecial,
                        )}
                      </div>
                    }
                  />
                )
              })}
            </div>
          </div>
        }
      />
    </div>
  )
}

export default MyFavorites