"use client"

import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import ReminderItem from "@/component/Reminder/ReminderItem"
import { PAGINATION } from "@/config/constant"
import { useGetReminder } from "@/hook/useReminder"
import { Link } from "@/i18n/routing"
import { titleState } from "@/recoil"
import { IReminderItem } from "@/type/Reminders"
import { faPlus } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useTranslations } from "next-intl"
import { useEffect, useState } from "react"
import { useSetRecoilState } from "recoil"

export default function ReminderContainer() {
  const setPageTitle = useSetRecoilState(titleState)
  const trans = useTranslations("reminder")
  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 { data: reminderData, refetch, isLoading } = useGetReminder(query)
  const [reminders, setReminders] = useState<IReminderItem[]>([])

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

  useEffect(() => {
    if (reminderData?.data) {
      setTotalPage(reminderData?.data?.total_pages)
      if (page === 1) setReminders(reminderData?.data?.remiders)
      else setReminders([...reminders, ...reminderData?.data?.remiders])
    } else {
      setTotalPage(0)
      setPage(1)
      setReminders([])
    }
  }, [reminderData])

  const handleReload = () => {
    if (page !== 1) setPage(1)
    else refetch()
  }

  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("home-screen")

    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="border border-[var(--secondary-20)] rounded-lg h-full flex flex-col">
      <HeaderBreadcrumb
        showButton={false}
        items={[
          {
            aria_label: trans("my_reminder"),
            href: "#",
            title: trans("my_reminder"),
          },
        ]}
        slot={
          <Link
            href="/reminder/add-reminder"
            className="whitespace-nowrap rounded-lg border border-solid border-[var(--primary--70)] h-12 px-2 md:px-3 xl:px-8 font-semibold bg-[var(--primary--70)] text-white hover:opacity-80 ml-2 inline-flex items-center justify-center">
            <FontAwesomeIcon
              icon={faPlus}
              className="mr-1 md:mr-2"
            />
            {trans("add_reminder")}
          </Link>
        }
      />
      <div
        className="grow px-4 py-6 overflow-y-auto"
        onScroll={handleScroll}>
        <ul>
          {reminders.map((item, index) => (
            <li
              key={index}
              className="mb-4 last:mb-0">
              <ReminderItem
                reminder={item}
                onReload={handleReload}
              />
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}