"use client"

import HeaderCalendarPage from "../Calendar/HeaderCalendarPage"
import Image from "next/image"
import { Link, useRouter } from "@/i18n/routing"
import { useGetExperienceSummary, useGetKuisineCategories, useListKuisine } from "@/hook/useKuisine"
import { Spin } from "antd"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faSpinner } from "@fortawesome/free-solid-svg-icons"
import NotFoundBox from "../Notfound"
import { useTranslations } from "next-intl"
import { useEffect, useMemo, useState } from "react"
import { useSetRecoilState } from "recoil"
import { typeKuisineState } from "@/recoil"
import dayjs from "dayjs"
import { numberFormatter } from "@/util/Common"
import HeaderBreadcrumb from "../Layout/HeaderBreadcrumb"
import SearchBox from "../Layout/SearchBox"
import { useSearchParams } from "next/navigation"

type Props = {
  className?: string
}

export const categories = [
  {
    id: 1,
    name: "Wizzor Cooking Class",
    thumbnail: "/img/kuisine_cooking.jpg",
    time: "06:00 PM",
    address: "D123 Bitex st, Dist 3000, California, USA",
  },
  {
    id: 2,
    name: "Barbecue",
    thumbnail: "/img/kuisine_barbecue.jpg",
    time: "",
    address: "",
  },
  {
    id: 3,
    name: "Fried",
    thumbnail: "/img/kuisine_fried.jpg",
    time: "",
    address: "",
  },
  {
    id: 4,
    name: "Beef",
    thumbnail: "/img/kuisine_beef.jpg",
    time: "",
    address: "",
  },
  {
    id: 5,
    name: "Green Kuisine",
    thumbnail: "/img/kuisine_green.jpg",
    time: "",
    address: "",
  },
  {
    id: 6,
    name: "Steam",
    thumbnail: "/img/kuisine_steam.jpg",
    time: "",
    address: "",
  },
  {
    id: 7,
    name: "Pork",
    thumbnail: "/img/kuisine_pork.jpg",
    time: "",
    address: "",
  },
  {
    id: 8,
    name: "Poultry",
    thumbnail: "/img/kuisine_poultry.jpg",
    time: "",
    address: "",
  },
  {
    id: 9,
    name: "Seafood",
    thumbnail: "/img/kuisine_seafood.jpg",
    time: "",
    address: "",
  },
  {
    id: 10,
    name: "Drink",
    thumbnail: "/img/kuisine_drink.jpg",
    time: "",
    address: "",
  },
  {
    id: 11,
    name: "Dessert",
    thumbnail: "/img/kuisine_dessert.jpg",
    time: "",
    address: "",
  },
  {
    id: 12,
    name: "Wizzor Experiences",
    thumbnail: "/img/kuisine_experiences.jpg",
    time: "",
    address: "",
    posted: "1,288 experience posted",
  },
]

export default function KuisineCategories({ className }: Props) {
  const { data: cateData, isLoading, error } = useGetKuisineCategories()
  const transMusic = useTranslations("music")
  const trans = useTranslations("kuisine")
  const router = useRouter()
  const searchParams = useSearchParams()
  const setOptionHeader = useSetRecoilState(typeKuisineState)
  const [keyword, setKeyword] = useState(searchParams.get("search") || "")

  const { data: dataKuisine } = useListKuisine()
  const { data: dataSummary } = useGetExperienceSummary()

  const kuisineLastest = useMemo(() => dataKuisine?.data?.kuisines?.[0], [dataKuisine?.data?.kuisines])

  useEffect(() => {
    if (searchParams && searchParams.get("search") && (searchParams.get("search") || "").length >= 3) {
      router.push(`/kuisine/all?search=${keyword}`)
    }
    setKeyword(searchParams.get("search") || "")
  }, [searchParams])

  const handleSearch = (keyword: string) => {
    setKeyword(keyword)
    if (keyword) {
      router.push(`/kuisine/all?search=${keyword}`)
    }
  }

  useEffect(() => {
    if (error) {
      console.log("error", error)
    }
  }, [error])

  useEffect(() => {
    if (dataSummary) {
      console.log(dataSummary)
    }
  }, [dataSummary])

  return (
    <div className={`h-full flex flex-col ${className}`}>
      {/* <HeaderCalendarPage
        title=""
        onSearch={handleSearch}
      /> */}
      <HeaderBreadcrumb
        showButton={false}
        items={[
          {
            aria_label: "MyKuisine Categories",
            href: "#",
            title: "MyKuisine Categories",
          },
        ]}
        className="flex-col !items-start lg:flex-row lg:items-center"
        slot={
          <SearchBox
            value={keyword}
            onSearch={handleSearch}
            onChange={setKeyword}
            placeholder={trans("search")}
            className="h-12"
            classInput="!h-12 lg:!w-56 xl:!w-56"
            classButton="!h-12 md:!pl-2"
          />
        }
      />
      <div className="grow px-4 py-6 overflow-y-auto">
        {isLoading ? (
          <div className="h-full flex justify-center items-center py-4">
            <Spin
              indicator={
                <FontAwesomeIcon
                  icon={faSpinner}
                  spin
                />
              }
              size="large"
            />
          </div>
        ) : cateData?.data.length ? (
          <ul className="grid gap-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7">
            <li className="relative rounded-lg overflow-hidden group col-span-2 md:row-span-2">
              <Link
                href={`/kuisine/${kuisineLastest?.category?.id}/${kuisineLastest?.id}`}
                className="absolute z-30 w-full h-full"></Link>
              <Image
                src={kuisineLastest?.picture1 || "/img/default_image.jpg"}
                alt=""
                width={255}
                height={466}
                style={{
                  width: "100%",
                  height: "100%",
                }}
                onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
                className="object-cover group-hover:scale-105 transition-transform duration-300"
              />
              <div className="absolute bottom-0 left-0 h-2/5 w-full bg-gradient-to-b from-white/0 to-black z-10">
                <div className="text-white flex h-full w-full justify-center items-end px-4 pb-8">
                  <div className="w-full">
                    <p className="mb-6 text-5xl">{kuisineLastest?.recipe}</p>
                    <p className="text-base mb-2 grid grid-cols-5">
                      <Image
                        src="/img/icon/time_outline.svg"
                        width={24}
                        height={24}
                        alt="time"
                      />
                      <span className="col-span-4">
                        {kuisineLastest?.eventdate ? dayjs.unix(Number(kuisineLastest?.eventdate)).format("MMM DD, YYYY") : ""} {kuisineLastest?.eventtime}
                      </span>
                    </p>
                    <p className="text-base grid grid-cols-5">
                      <Image
                        src="/img/icon/location_outline.svg"
                        alt="location"
                        width={32}
                        height={32}
                        className="-ml-1"
                      />
                      <span className="col-span-4">
                        {kuisineLastest?.address}, {kuisineLastest?.city}, {kuisineLastest?.country}
                      </span>
                    </p>
                  </div>
                </div>
              </div>
            </li>
            {cateData?.data.map((category, index) => (
              <li
                key={category.id}
                className="relative rounded-lg overflow-hidden group">
                <Link
                  href={`/kuisine/${category.id}`}
                  className="absolute z-30 w-full h-full"></Link>
                <Image
                  src={category.icon}
                  alt={category.name}
                  width={255}
                  height={466}
                  style={{
                    width: "100%",
                    height: "100%",
                  }}
                  onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
                  className="object-cover group-hover:scale-105 transition-transform duration-300 aspect-[2/3]"
                />
                <div className="absolute bottom-0 left-0 h-2/5 w-full bg-gradient-to-b from-white/0 to-black z-10">
                  <div className="text-white flex h-full w-full justify-center items-end px-4 pb-8">
                    <span className="font-semibold text-base">{category.name}</span>
                  </div>
                </div>
              </li>
            ))}
            <li className="relative rounded-lg overflow-hidden group col-span-2 md:col-span-4 lg:col-span-5 xl:col-span-7">
              <Link
                href="#"
                onClick={() => setOptionHeader("experiences")}
                className="absolute z-30 w-full h-full"></Link>
              <Image
                src="/img/kuisine_experiences.jpg"
                alt="Wizzor Experiences"
                width={255}
                height={466}
                style={{
                  width: "100%",
                  height: "166px",
                }}
                onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
                className="object-cover group-hover:scale-105 transition-transform duration-300"
              />
              <div className="absolute bottom-0 left-0 h-2/5 w-full bg-gradient-to-b from-white/0 to-black z-10">
                <div className="text-white flex h-full w-full justify-center items-end px-4 pb-4">
                  <div className="w-full flex items-end justify-between">
                    <p className="text-xl md:text-2xl lg:text-3xl xl:text-5xl">Wizzor Experiences</p>
                    <p className="lg:text-base whitespace-nowrap">{numberFormatter(dataSummary?.data?.total || 0)} experience posted</p>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        ) : (
          <NotFoundBox
            className="!bg-[var(--secondary-10)] py-8 rounded-3xl"
            backHome={false}
            message={transMusic("we_found_nothing_here")}
          />
        )}
      </div>
    </div>
  )
}