"use client"

import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { find, isEmpty, omit } from "lodash"
import { useTranslations } from "next-intl"
import { Form, Modal } from "antd"
import type { MenuProps } from "antd"
import classNames from "classnames"
import { useRecoilValue } from "recoil"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faPlus } from "@fortawesome/free-solid-svg-icons"
import dayjs from "dayjs"
import { useSearchParams } from "next/navigation"

import CardItemExperience from "../ItemExperience"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import { Link, usePathname, useRouter } from "@/i18n/routing"
import { PAGINATION, kuisineOptions } from "@/config/constant"
import { typeKuisineState } from "@/recoil"
import { SelectRate } from "@/component/Common/SelectRate"
import { CustomDropDownMenuCss, DropDownMenu } from "@/component/Common/DropDownMenu"
import { useDeleteKuisineExperiences, useGetKuisineExperiences } from "@/hook/useKuisine"
import { LoadingResult } from "@/component/Common/LoadingResult/LoadingResult"
import { IKuisineExperienceQuery } from "@/type/Kuisines"
import { renderLabelItem } from "@/component/Common/LabelItem"
import { DatePickerCustom } from "@/component/Common/DatePickerCustom"
import { useNotificationContext } from "@/component/Layout/NotificationContext"

const MyExperience = () => {
  const searchParams = useSearchParams()
  const pathname = usePathname()
  const oldSearch = Object.fromEntries(searchParams.entries())
  const { notify } = useNotificationContext()
  const [formRef] = Form.useForm()
  const router = useRouter()
  const options = kuisineOptions()
  const typeKuisine = useRecoilValue(typeKuisineState)
  const datePickerRef = useRef<null | { updateDatePicker: (start: number, end: number) => void }>(null)
  const [modal, modalContextHolder] = Modal.useModal()

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

  const [valueRate, setValueRate] = useState("")
  const [activeButtons, setActiveButtons] = useState<any>("")
  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<IKuisineExperienceQuery>(defaultQuery)

  const { data: kuisineExperiences, isLoading, refetch } = useGetKuisineExperiences(query)
  const deleteKuisine = useDeleteKuisineExperiences()

  const dataKuisineExperiences = useMemo(() => {
    setTotalPage(kuisineExperiences?.data?.total_pages || 0)

    return kuisineExperiences?.data?.experiences
  }, [kuisineExperiences?.data?.experiences, kuisineExperiences?.data?.total_pages])

  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(`${pathname}?${params.toString()}`, { scroll: false })
    },
    [searchParams, pathname, query],
  )

  const handleFilterRate = (value: number) => {
    const updatedQuery = { ...oldSearch, rating: value } as IKuisineExperienceQuery
    setQuery(updatedQuery)
    updateSearchQuery(updatedQuery)
  }

  const handleClearFilter = (arrKey?: string[]) => {
    const removeKey = omit(oldSearch, arrKey || []) as IKuisineExperienceQuery
    setQuery(removeKey)
    updateSearchQuery(removeKey)
  }

  const handleDateChange = (start: number, end: number) => {
    if (start && end) {
      const updatedQuery = { ...query, startDate: dayjs(start).unix(), endDate: dayjs(end).unix() }
      setQuery(updatedQuery)
      updateSearchQuery(updatedQuery)
    }
  }

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

      if (searchParams.has("startDate") && searchParams.has("endDate")) {
        datePickerRef.current?.updateDatePicker(Number(oldSearch?.startDate), Number(oldSearch?.endDate))
      }
      formRef.setFieldsValue({
        ...oldSearch,
        ...(searchParams.has("rating") && {
          rating: Number(oldSearch?.rating),
        }),
      })
    }
  }, [])

  const handleDeleteKuisine = () => {
    deleteKuisine
      .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() {
        handleDeleteKuisine()
      },
    })
  }

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

  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/experience/${item?.id}`)
        },
      },
      {
        label: renderLabelItem(transBook("edit"), "/img/icon/edit.svg", "edit"),
        key: "1",
        onClick: () => {
          router.push(`/kuisine/update-experience/${item?.id}`)
        },
      },
      {
        label: renderLabelItem(transBook("delete"), "/img/icon/trash_outline.svg", "trash_outline"),
        key: "3",
        onClick: () => confirmDelete(),
      },
    ]

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

  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 || "",
          },
        ]}
        slot={
          <div>
            <Link
              aria-label={trans("post_experience")}
              href="/kuisine/post-experience"
              className="inline-flex items-center 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}
                className="mr-2"
              />
              <span>{trans("post_experience")}</span>
            </Link>
          </div>
        }
        showButton={false}
      />
      <div className="md:flex px-4 pt-4 gap-4">
        {/* <RangPickerCustom
          id="Kuisine_experience_RangPicker"
          className="mr-0 mb-6 md:mr-4"
          classBox="w-full h-[50px]"
          onClear={() => {
            handleClearFilter(["startDate", "endDate"])
          }}
          ref={datePickerRef}
        /> */}
        <DatePickerCustom
          ref={datePickerRef}
          onDateChange={handleDateChange}
        />

        <Form form={formRef}>
          <Form.Item name="rating">
            <SelectRate
              onChange={handleFilterRate}
              value={valueRate}
              setValue={setValueRate}
              formRef={formRef}
              onClear={() => {
                handleClearFilter(["rating"])
              }}
            />
          </Form.Item>
        </Form>
      </div>
      <LoadingResult
        isLoading={isLoading && !dataKuisineExperiences?.length}
        isShowResult={Boolean(dataKuisineExperiences?.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 px-4 pb-4">
              {dataKuisineExperiences?.map((item: any) => (
                <CardItemExperience
                  key={item?.id}
                  keyProps={item?.id}
                  keyActive={activeButtons}
                  classNameDecs="!mb-0"
                  type={item?.type}
                  url={`/kuisine/experience/${item?.id}`}
                  url_image={item?.thumbnail}
                  alt_image={item?.eventhost}
                  title={item?.eventhost}
                  classNameTitle="text-[var(--danger-70)] hover:text-[var(--danger-70)] mb-[13px]"
                  decs={item?.description}
                  className="col-span-1 flex md:block"
                  buttonTopRight={buttonTopRight(item, "absolute top-[6px] right-[6px]")}
                  date={item?.eventdate}
                  author={item?.eventtype}
                  rate={item?.ratings}
                />
              ))}
            </div>
          </div>
        }
      />
      {modalContextHolder}
    </div>
  )
}

export default MyExperience