"use client"

import React, { useCallback, useEffect, useMemo, useState } from "react"
import { find, isEmpty, omitBy } from "lodash"
import { useTranslations } from "next-intl"
import CardItemPostWGN from "./ItemPostWGN"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import { Link, usePathname, useRouter } from "@/i18n/routing"
import { Modal, type MenuProps } from "antd"
import Image from "next/image"
import classNames from "classnames"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { PAGINATION, wgnOptions } from "@/config/constant"
import { typeWGNState } from "@/recoil"
import { useRecoilValue } from "recoil"
import { faPlus } from "@fortawesome/free-solid-svg-icons"
import dayjs from "dayjs"
import { CustomDropDownMenuCss, DropDownMenu } from "@/component/Common/DropDownMenu"
import { useDeleteGameMyPost, useGetGameMyPost } from "@/hook/useGames"
import { IGameMyPostQuery, IMyGamePost } from "@/type/Games"
import { useSearchParams } from "next/navigation"

import advancedFormat from "dayjs/plugin/advancedFormat"
import utc from "dayjs/plugin/utc"
import timezone from "dayjs/plugin/timezone"
import SearchBox from "@/component/Layout/SearchBox"
import { LoadingResult } from "@/component/Common/LoadingResult/LoadingResult"
import { useNotificationContext } from "@/component/Layout/NotificationContext"
import { renderLabelItem } from "@/component/Common/LabelItem"

dayjs.extend(advancedFormat)
dayjs.extend(utc)
dayjs.extend(timezone)

const MyPostWGN = () => {
  const [modal, modalContextHolder] = Modal.useModal()
  const router = useRouter()
  const options = wgnOptions()
  const typeWGN = useRecoilValue(typeWGNState)
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const { notify } = useNotificationContext()
  const oldSearch = Object.fromEntries(searchParams.entries())
  const defaultQ = { pageNum: 1, pageSize: 25 }

  const trans = useTranslations("wgn")
  const transBook = useTranslations("book")
  const transButton = useTranslations("button")
  const transMessage = useTranslations("message")
  const transGeneral = useTranslations("general")

  const [activeButtons, setActiveButtons] = useState<any>("")
  const [keyword, setKeyword] = useState<string>("")
  const [page, setPage] = useState(PAGINATION.DEFAULT_CURRENT_PAGE)
  const [totalPage, setTotalPage] = useState(0)
  const defaultQuery = {
    pageNum: page,
    pageSize: PAGINATION.DEFAULT_PAGE_SIZE,
  }
  const [query, setQuery] = useState<IGameMyPostQuery>(defaultQuery)

  const { data: gameMyPosts, isLoading, refetch } = useGetGameMyPost(query)
  const deleteMyPost = useDeleteGameMyPost()

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

  const dataGameMyPosts = useMemo(() => {
    setTotalPage(gameMyPosts?.data?.data?.total_pages || 0)

    return gameMyPosts?.data?.data?.posts
  }, [gameMyPosts?.data?.data?.posts, gameMyPosts?.data?.data?.total_pages])

  const countData = useMemo(() => dataGameMyPosts?.length || 0, [dataGameMyPosts?.length])

  const updateSearchQuery = useCallback(
    (updatedQuery: any) => {
      const params = new URLSearchParams(searchParams)

      Object.entries(updatedQuery).forEach(([key, value]) => {
        value ? params.set(key, String(value)) : params.delete(key)
      })

      Array.from(params.keys()).forEach((key) => {
        if (!(key in updatedQuery)) {
          params.delete(key)
        }
      })

      router.push(`?${params.toString()}`, { scroll: false })
    },
    [searchParams, pathname, query],
  )

  const handleSearchKeyword = (keyword: string) => {
    if (keyword && keyword?.length >= 3) {
      const updatedQuery = { ...defaultQ, ...oldSearch, search: keyword?.trim() }
      const cleanedObj = omitBy(updatedQuery, (value) => value === null || value === undefined || value === "")

      setQuery(cleanedObj)
      updateSearchQuery(cleanedObj)
    }
    if (keyword === "" && query?.search) {
      setPage(1)
      setQuery(defaultQ)
      updateSearchQuery(defaultQ)
    }
  }

  const handleDeleteMyPost = () => {
    deleteMyPost
      .mutateAsync(activeButtons)
      .then((res: any) => {
        if (res?.status === 200) {
          notify({
            type: "success",
            message: transMessage("congratulation"),
            description: transGeneral("deleted_successfully"),
          })
          if (page === 1) refetch()
          else {
            setPage(1)
            setQuery({ ...query, pageNum: 1 })
          }
        }
      })
      .catch((errors) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: errors?.response?.data.msgs || transMessage("fail"),
        })
      })
  }

  const confirmDelete = () => {
    modal.confirm({
      title: transGeneral("confirm_delete"),
      okText: transButton("ok"),
      cancelText: transButton("cancel"),
      onOk() {
        handleDeleteMyPost()
      },
    })
  }

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

  const buttonTopRight = (item: IMyGamePost, 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(`/wgn/detail/${item?.id}`)
        },
      },
      {
        label: renderLabelItem(transBook("edit"), "/img/icon/edit.svg", "edit"),
        key: "1",
        onClick: () => {
          router.push(`/wgn/edit-question/${item?.id}`)
        },
      },
      {
        label: renderLabelItem(transBook("delete"), "/img/icon/trash_outline.svg", "trash_outline"),
        key: "2",
        onClick: () => confirmDelete(),
      }
    ]

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

  useEffect(() => {
    if (!isEmpty(Object.fromEntries(searchParams.entries()))) {
      const updatedQuery = { ...oldSearch } as IGameMyPostQuery
      setQuery(updatedQuery)
      updateSearchQuery(updatedQuery)

      if (searchParams.has("search")) {
        handleSearchKeyword(oldSearch?.search)
      }
    }
  }, [])

  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("list-my-game-posts")

    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: typeWGN as string })?.label || "",
            href: "#",
            title: find(options, { value: typeWGN as string })?.label || "",
          },
        ]}
        slot={
          <div className="flex items-center">
            <SearchBox
              value={keyword}
              onSearch={handleSearchKeyword}
              onChange={setKeyword}
              placeholder={trans("search_forum_here")}
              className="h-12"
              classInput="!h-12 lg:!w-56 xl:!w-56"
              classButton="!h-12 md:!pl-2"
            />
            <span className="hidden md:block mx-2 lg:mx-4 h-10 w-[1px] bg-[var(--secondary-20)]"></span>
            <Link
              aria-label="post question"
              href={"/wgn/post-question"}
              className="rounded-lg border border-solid border-[var(--primary--70)] px-4 py-[14px] font-bold bg-[var(--primary--70)] !text-white text-base hover:opacity-80 whitespace-nowrap">
              <FontAwesomeIcon icon={faPlus} />
              {` ${trans("post_question")}`}
            </Link>
          </div>
        }
        showButton={false}
      />
      <LoadingResult
        isLoading={isLoading && !dataGameMyPosts?.length}
        isShowResult={Boolean(dataGameMyPosts?.length)}
        icon="/img/gif/WGN.gif"
        result={
          <>
            <div className="px-5 pt-6 pb-2">{`${trans("you_have")} ${countData} ${countData > 1 ? trans("posts") : trans("post")}`}</div>
            <div
              onScroll={handleScroll}
              id="list-my-game-posts"
              className="overflow-y-auto">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 p-4">
                {dataGameMyPosts?.map((item: IMyGamePost) => (
                  <CardItemPostWGN
                    key={item?.id}
                    keyProps={item?.id}
                    keyActive={activeButtons}
                    className="col-span-1 flex"
                    type={"me"}
                    url={`/wgn/detail/${item?.id}`}
                    url_image={item?.thumbnail}
                    alt_image={item?.bannerimage_org}
                    classNameImage="rounded-lg"
                    title={item?.title}
                    classNameTitle="mr-7"
                    decs={item?.content}
                    date={dayjs.unix(Number(item?.created)).format("ddd, MMM DD, YYYY")}
                    time={dayjs.unix(Number(item?.created)).format("HH:mm")}
                    numberView={item?.views}
                    numberComment={item?.replied}
                    buttonTopRight={buttonTopRight(item, "absolute top-[6px] right-[6px]")}
                  />
                ))}
              </div>
            </div>
          </>
        }
      />
      {modalContextHolder}
    </div>
  )
}

export default MyPostWGN