"use client"

import { LoadingBox } from "@/component/Common/LoadingBox"
import Header from "@/component/Layout/Header"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import SearchBox from "@/component/Layout/SearchBox"
import SegmentedHeader from "@/component/Layout/SegmentedHeader"
import FormNew from "@/component/News/FormNew"
import HeaderNewsPage from "@/component/News/HeaderNewsPage"
import ListNews from "@/component/News/List"
import NotFoundBox from "@/component/Notfound"
import { newsOptions, PAGINATION } from "@/config/constant"
import { useGetLocalNews, useGetMyBookmarks, useGetMyPosts, useGetNetWorkNews, useGetNewsPage } from "@/hook/useNews"
import { useRouter } from "@/i18n/routing"
import { titleState } from "@/recoil"
import { typeNewsState } from "@/recoil/news"
import { faPlus } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useQueryClient } from "@tanstack/react-query"
import { find } from "lodash"
import { useTranslations } from "next-intl"
import { useSearchParams } from "next/navigation"
import { useEffect, useMemo, useState } from "react"
import { useRecoilState, useSetRecoilState } from "recoil"

export default function NewsContainer() {
  const queryClient = useQueryClient()
  const searchParams = useSearchParams()
  const trans = useTranslations("news")
  const setPageTitle = useSetRecoilState(titleState)
  const [optionHeader, setOptionHeader] = useRecoilState(typeNewsState)
  const router = useRouter()
  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,
  })
  const dataProfile: any = queryClient.getQueryData(["auth.profile"])
  // user, blogger, personel
  const isBusinessAccount = useMemo(() => !["Personel", "Blogger"]?.includes(dataProfile?.data?.group || ""), [dataProfile?.data?.group])
  const options = newsOptions().filter((item) => !(isBusinessAccount && item.value === "my_post"))

  const { data: dataNetWorkNews, isLoading: loadingNetwork } = useGetNetWorkNews(query, optionHeader === "network")
  const { data: dataLocalNews, isLoading: loadingLocal } = useGetLocalNews(query, optionHeader === "local")
  const { data: dataNewsPage, isLoading: loadingnewPage } = useGetNewsPage(query, optionHeader === "news")
  const { data: dataMyBookmarks, isLoading: loadingBookmark } = useGetMyBookmarks(query, optionHeader === "me")
  const { data: dataMyPosts, isLoading: loadingMyPosts, refetch } = useGetMyPosts(query, optionHeader === "my_post")
  const [dataSources, setDataSources] = useState<any[]>([])
  const [keyword, setKeyword] = useState(searchParams.get("search") || "")
  const [addNewPost, setAddNewPost] = useState(false)
  const transMusic = useTranslations("music")
  const [postSelected, setPostSelected] = useState<any>(null)

  useEffect(() => {
    setPageTitle("News Stand")
  }, [])

  useEffect(() => {
    if (searchParams && searchParams.get("search") && (searchParams.get("search") || "").length >= 3) {
      setPage(1)
      setQuery({ ...query, search: searchParams.get("search"), pageNum: 1 })
    } else {
      const params = { ...query }
      delete params.search
      setQuery(params)
    }
    setKeyword(searchParams.get("search") || "")
  }, [searchParams])

  const handleChangeOptionHeader = (value: string | number) => {
    setPage(1)
    setQuery({ ...query, pageNum: 1 })
    setOptionHeader(value as string)
  }

  const handleSearchKeyword = (keyword: string) => {
    setKeyword(keyword)
    const params = new URLSearchParams(searchParams)
    if (keyword && keyword.length >= 3) params.set("search", keyword)
    else params.delete("search")
    router.push(`?${params.toString()}`, { scroll: false })
  }

  useEffect(() => {
    let finalData: any[] = []

    if (optionHeader === "network" && dataNetWorkNews?.data) {
      if (page === 1) finalData = dataNetWorkNews?.data?.data?.items || []
      else if (dataSources.length <= (page - 1) * PAGINATION.DEFAULT_PAGE_SIZE) finalData = [...dataSources, ...(dataNetWorkNews?.data?.data?.items || [])]
      else finalData = dataSources
      setTotalPage(dataNetWorkNews?.data?.data?.total_pages || 0)
    } else if (optionHeader === "local" && dataLocalNews?.data) {
      if (page === 1) finalData = dataLocalNews?.data?.data?.data?.items || []
      else if (dataSources.length <= (page - 1) * PAGINATION.DEFAULT_PAGE_SIZE) finalData = [...dataSources, ...(dataLocalNews?.data?.data?.data?.items || [])]
      else finalData = dataSources
      setTotalPage(dataLocalNews?.data?.data?.data?.total_pages || 0)
    } else if (optionHeader === "news" && dataNewsPage?.data) {
      if (page === 1) finalData = dataNewsPage?.data?.data?.data?.items || []
      else if (dataSources.length <= (page - 1) * PAGINATION.DEFAULT_PAGE_SIZE) finalData = [...dataSources, ...(dataNewsPage?.data?.data?.data?.items || [])]
      else finalData = dataSources
      setTotalPage(dataNewsPage?.data?.data?.data?.total_pages || 0)
    } else if (optionHeader === "me" && dataMyBookmarks?.data) {
      if (page === 1) finalData = dataMyBookmarks?.data?.data?.data?.items || []
      else if (dataSources.length <= (page - 1) * PAGINATION.DEFAULT_PAGE_SIZE)
        finalData = [...dataSources, ...(dataMyBookmarks?.data?.data?.data?.items || [])]
      else finalData = dataSources
      setTotalPage(dataMyBookmarks?.data?.data?.data?.total_pages || 0)
    } else {
      if (page === 1) finalData = dataMyPosts?.data?.data?.data?.items || []
      else if (dataSources.length <= (page - 1) * PAGINATION.DEFAULT_PAGE_SIZE)
        finalData = [...dataSources, ...(dataMyPosts?.data?.data?.data?.items || [])]
      else finalData = dataSources
      setTotalPage(dataMyBookmarks?.data?.data?.data?.total_pages || 0)
    }

    setDataSources(finalData)
  }, [dataNetWorkNews, dataLocalNews, dataNewsPage, dataMyBookmarks, dataMyPosts])

  const handleScrollBox = (e: any) => {
    const { scrollTop, scrollHeight, clientHeight } = e.target
    if (scrollTop + clientHeight >= scrollHeight - 5) {
      if (page < totalPage && !loadingNetwork && !loadingLocal && !loadingnewPage && !loadingBookmark) {
        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 && !loadingNetwork && !loadingLocal && !loadingnewPage && !loadingBookmark) {
            setPage(page + 1)
            setQuery({ ...query, pageNum: page + 1 })
          }
        }
      }
    }

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

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

  const onRefect = () => {
    if (page === 1) refetch()
      else {
        setPage(1)
        setQuery({ ...query, pageNum: 1 })
      }
  }

  const handleEditPost = (post: any) => {
    setPostSelected(post)
    setAddNewPost(true)
  }

  return (
    <>
      <Header
        slot={
          <SegmentedHeader
            value={optionHeader}
            options={options}
            onChange={handleChangeOptionHeader}
          />
        }
      />
      <main
        id="main-content"
        className="flex-1 px-4 lg:px-5 xl:px-6 overflow-y-auto pt-4 pb-6 overflow-x-hidden">
        <div className="border border-[var(--secondary-20)] rounded-lg h-full flex flex-col">
          {/* <HeaderNewsPage
            title={find(options, { value: optionHeader as string })?.label || ""}
            filter={false}
            onSearch={handleSearchKeyword}
          /> */}
          <HeaderBreadcrumb
            showButton={false}
            items={[
              {
                aria_label: find(options, { value: optionHeader as string })?.label || "",
                href: "#",
                title: find(options, { value: optionHeader as string })?.label || "",
              },
            ]}
            className="flex-col !items-start lg:flex-row lg:items-center"
            slot={
              <div>
                {optionHeader === "my_post" ? (
                  <button
                    type="button"
                    onClick={() => {setPostSelected(null);setAddNewPost((pre) => !pre)}}
                    className="rounded-lg border border-solid border-[var(--primary--70)] h-12 px-4 font-semibold bg-[var(--primary--70)] text-white hover:opacity-80 flex items-center gap-1">
                    <FontAwesomeIcon icon={faPlus} />
                    <span className="whitespace-nowrap">Post News</span>
                  </button>
                ) : (
                  <SearchBox
                    value={keyword}
                    onSearch={handleSearchKeyword}
                    onChange={setKeyword}
                    placeholder={`news`}
                    className="h-12"
                    classInput="!h-12 lg:!w-56 xl:!w-56"
                    classButton="!h-12 md:!pl-2"
                  />
                )}
              </div>
            }
          />
          <div
            className="grow overflow-y-auto"
            onScroll={handleScrollBox}>
            {loadingNetwork || loadingLocal || loadingnewPage || loadingBookmark || loadingMyPosts ? (
              <LoadingBox />
            ) : dataSources.length ? (
              <ListNews
                dataSources={dataSources}
                onRefect={onRefect}
                onEditPost={handleEditPost}
              />
            ) : (
              <NotFoundBox
                className="!bg-white py-8 rounded-xl"
                backHome={false}
                message={transMusic("we_found_nothing_here")}
              />
            )}
          </div>
        </div>
        <FormNew
          isOpen={addNewPost}
          post={postSelected}
          setOpen={(value) => {
            setAddNewPost(value)
            if (page === 1) refetch()
            else {
              setPage(1)
              setQuery({ ...query, pageNum: 1 })
            }
          }}
        />
      </main>
    </>
  )
}