"use client"

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

import { CardItemMarket, renderTags } from "../common"
import { CustomDropDownMenuCss, DropDownMenu } from "@/component/Common/DropDownMenu"
import { useGetFavouriteMarketList, useRemoveMarketFavourite } from "@/hook/useMarket"
import { IMarketItems } from "@/type/Market"
import {useCopyToClipboard} from "@/hook/useCommon"
import { useNotificationContext } from "@/component/Layout/NotificationContext"
import { useQueryClient } from "@tanstack/react-query"
import { LoadingResult } from "@/component/Common/LoadingResult/LoadingResult"
import { LoadMoreInfinite } from "@/component/Common/LoadMoreInfinite"
import { typeMarketState } from "@/recoil"
import { marketOptions } from "@/config/constant"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import { useRouter } from "@/i18n/routing"
import { renderLabelItem } from "@/component/Common/LabelItem"

const MyFavorite = () => {
  const router = useRouter()
  const options = marketOptions()
  const queryClient = useQueryClient()
  const typeMarket = useRecoilValue(typeMarketState)
  const { notify } = useNotificationContext()
  const { renderLabelBottom } = renderTags()
  const { handleCopy } = useCopyToClipboard()

  const transBook = useTranslations("book")
  const transButton = useTranslations("button")
  const transGeneral = useTranslations("general")
  const transMessage = useTranslations("message")
  const transContact = useTranslations("contact")

  const [isNextPage, setIsNextPage] = useState(true)
  const [activeButtons, setActiveButtons] = useState<any>("")

  const { data, isLoading, fetchNextPage, hasNextPage } = useGetFavouriteMarketList()
  const removeFavourite = useRemoveMarketFavourite()

  const dataMarkets = useMemo(
    () => (flattenDeep(data?.pages.map((e: any) => e.data!)).length > 0 ? flattenDeep(data?.pages.map((e: any) => e?.data?.data?.items)) : []),
    [data?.pages],
  )

  useEffect(() => {
    if (Number(data?.pageParams?.at(-1)) >= Number(data?.pages?.at(-1)?.data?.data?.total_pages)) {
      setIsNextPage(false)
    }
    if (!isNextPage && Number(data?.pageParams?.at(-1)) < Number(data?.pages?.at(-1)?.data?.data?.total_pages)) {
      setIsNextPage(true)
    }
  }, [isNextPage, data?.pages, data?.pageParams])

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

  const buttonTopRight = (item: IMarketItems, 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(`/market/${activeButtons}`)
        },
      },
      {
        label: renderLabelItem(transContact("remove_favorite"), "/img/icon/broken_heart.svg", transContact("remove_favorite")),
        key: "1",
        onClick: () => handleRemoveFavorite(item.id),
      },
      {
        label: renderLabelItem(transGeneral("share"), "/img/icon/redo.svg", "redo"),
        key: "2",
        onClick: () => {
          handleCopy(`${window.location.origin}/market/${activeButtons}`)
        },
      }
    ]

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

  const buttonTopleft = () => {
    return (
      <button className={`absolute top-[6px] left-[6px] w-[35px] h-[35px] flex justify-center items-center z-[11] shadow-lg`}>
        <Image
          src={"/img/icon/heart.svg"}
          alt={"esllipsis vertical"}
          width={24}
          height={24}
        />
      </button>
    )
  }

  const handleRemoveFavorite = (id: string) => {
    removeFavourite
      .mutateAsync(id)
      .then(() => {
        notify({
          type: "success",
          message: transMessage("congratulation"),
          description: transMessage("remove_favorite_success"),
        })
        queryClient.invalidateQueries({ queryKey: ["market.get_favourite_list"] })
      })
      .catch((error) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: error?.response?.data.msgs || transMessage("fail"),
        })
      })
  }

  return (
    <div className="h-full flex flex-col">
      <HeaderBreadcrumb
        items={[
          {
            aria_label: find(options, { value: typeMarket as string })?.label || "",
            href: "#",
            title: find(options, { value: typeMarket as string })?.label || "",
          },
        ]}
        showButton={false}
      />
      <LoadingResult
        isLoading={isLoading && !dataMarkets?.length}
        isShowResult={Boolean(dataMarkets?.length)}
        icon="/img/gif/Market.gif"
        result={
          <div className="overflow-y-auto">
            <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
              {dataMarkets?.map((item: IMarketItems) => (
                <CardItemMarket
                  keyProps={item?.id}
                  keyActive={activeButtons}
                  className="col-span-1"
                  type={item?.is_favourite ? "favorite" : "default"}
                  url={item?.web_url ? item?.web_url : `/market/${item?.id}`}
                  target={item?.web_url ? "_blank" : "_self"}
                  url_image={item?.picture1}
                  alt_image={item?.title}
                  category={item?.category?.name}
                  title={item?.title}
                  classNameTitle="text-[var(--danger-70)]"
                  desc={item?.description}
                  location={item?.country}
                  buttonTopleft={buttonTopleft()}
                  buttonTopRight={buttonTopRight(item, "absolute top-[6px] right-[6px]")}
                  labelBottom={renderLabelBottom(item?.trade_type, "absolute bottom-0 left-0 right-0 py-2 mx-2")}
                />
              ))}
            </div>
          </div>
        }
      />
      <LoadMoreInfinite
        isLoading={isLoading}
        isNextPage={isNextPage}
        hasNextPage={hasNextPage}
        fetchNextPage={fetchNextPage}
      />
    </div>
  )
}

export default MyFavorite