"use client"

import { Modal } from "antd"
import { useTranslations } from "next-intl"
import { forwardRef, useImperativeHandle, useState } from "react"
import CardItemBook from "@component/Books/ItemBook"
import { IDataSearchResult } from "@/type/Common"
import CardItemKuisine from "@component/Kuisine/List/ItemKuisine"
import Rate from "@component/Common/Rate"
import Image from "next/image"
import { formatCurrency } from "@/util/Common"
import classNames from "classnames"
import { customBookCss, customKuisineCss, customMarketCss } from "./style"
import { IMarketItems } from "@/type/Market"
import { CardItemMarket, renderTags } from "@component/Market/common"
import { isEmpty } from "lodash"
import NotFoundBox from "@component/Notfound"

type IProps = {
  data?: IDataSearchResult
}

export const ModalSearchResult = forwardRef(({ data }: IProps, ref) => {
  const { renderLabelBottom } = renderTags()

  const trans = useTranslations("general")
  const transMusic = useTranslations("music")

  const [openModal, setOpenModal] = useState(false)

  useImperativeHandle(ref, () => ({
    onOpen,
    onCancel,
  }))

  const onOpen = () => {
    setOpenModal(true)
  }
  const onCancel = () => {
    setOpenModal(false)
  }

  const renderLabelContent = (title: string, src_icon: string, alt_icon: string, isSpecial: boolean) => {
    return (
      <div
        className={`text-sm flex items-center font-normal	text-[var(--secondary-60)] mb-3.5 ${
          isSpecial ? "text-[var(--secondary-30)]" : "text-[var(--secondary-60)]"
        }`}>
        <Image
          src={src_icon}
          alt={alt_icon}
          width={24}
          height={24}
        />
        <div className="pl-1.5 h-5 line-clamp-1 flex-1">{title}</div>
      </div>
    )
  }

  return (
    <Modal
      open={openModal}
      title={trans("search_result")}
      maskClosable={false}
      destroyOnClose
      onCancel={onCancel}
      width={860}
      footer={null}>
      <div className="overflow-y-auto">
        <hr className="my-4" />
        {!isEmpty(data?.books) ? (
          <>
            <h3 className="text-base font-bold">{trans("books")}</h3>
            <div className={classNames("grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-2 py-4", customBookCss)}>
              {data?.books?.map((item: any) => (
                <CardItemBook
                  key={item?.id}
                  keyProps={item?.id}
                  type={item?.sell_type}
                  url={`/books/${item?.id}`}
                  url_image={item?.thumbnail}
                  alt_image={item?.title}
                  title={item?.title}
                  className="col-span-1"
                  author={`by ${item?.author}`}
                  rate={item.avg_rating}
                  price={item.price ? Number(item.price) : 0}
                  classNameCover="mb-2"
                  classNameTitle="line-clamp-2 text-sm leading-[20px] h-[40px] text-[var(--book--text-color)] font-semibold"
                  classNamePrice="text-sm font-semibold mt-[2px]"
                  classNameAuthor="text-xs"
                  onClick={onCancel}
                />
              ))}
            </div>
          </>
        ) : null}

        {!isEmpty(data?.kuisines) ? (
          <>
            <h3 className="text-base font-bold">{trans("kuisine")}</h3>
            <div className={classNames("grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-2 py-4", customKuisineCss)}>
              {data?.kuisines?.map((item: any) => {
                const isSpecial = item?.category?.name === "Cooking Class"
                const cateid = item?.category?.id
                return (
                  <CardItemKuisine
                    key={item.id}
                    keyProps={item?.id}
                    className="col-span-1 flex md:block"
                    type={isSpecial ? "special" : "default"}
                    url={`/kuisine/${cateid}/${item?.id}`}
                    url_image={item?.picture1}
                    alt_image={item?.picture1_org_name}
                    classNameImage="rounded-lg"
                    title={item?.recipe}
                    classNameTitle={`${isSpecial ? "text-[var(--primary--30)] hover:text-[var(--primary--30)]" : ""}`}
                    decs={item?.description}
                    classNameDecs={`${isSpecial ? "text-[var(--secondary-30)]" : ""}`}
                    nation={item?.theme}
                    foodType={item?.seatingtype}
                    classNameNation={`${isSpecial ? "text-[var(--secondary-30)]" : ""}`}
                    priceElement={
                      <p className={`${isSpecial ? "text-[var(--primary--30)]" : "text-[var(--primary--70)]"} text-2xl font-medium mb-3.5`}>{`$${formatCurrency(
                        item.cost,
                      )}`}</p>
                    }
                    footerContent={
                      <div>
                        <div className={`flex items-center gap-1 mb-3.5`}>
                          <span className={`text-base font-semibold leading-[22px] ${isSpecial ? "text-[var(--primary--30)]" : "text-[var(--secondary-100)]"}`}>
                            {item?.ratings?.average}
                          </span>
                          <Rate
                            value={Number(item?.ratings?.average)}
                            color={`${isSpecial ? "#FFDA94" : "#030712"}`}
                          />
                          <span
                            className={`${
                              isSpecial ? "text-[var(--secondary-30)]" : "text-[var(--secondary-60)]"
                            } text-sm font-light`}>{` (${item?.ratings?.count} reviews)`}</span>
                        </div>
                        {renderLabelContent(item?.country, `/img/icon/${isSpecial ? "location_outline_2" : "location"}.svg`, "location", isSpecial)}
                        {renderLabelContent(
                          `${item.additionalinfo} - ${item?.address} - ${item?.city}`,
                          `/img/icon/${isSpecial ? "flag_outline" : "flag"}.svg`,
                          "flag",
                          isSpecial,
                        )}
                        {renderLabelContent(
                          `${item?.noofseats} available seats`,
                          `/img/icon/${isSpecial ? "user_tag_outline" : "user_tag"}.svg`,
                          "user_tag",
                          isSpecial,
                        )}
                      </div>
                    }
                    onClick={onCancel}
                  />
                )
              })}
            </div>
          </>
        ) : null}

        {!isEmpty(data?.fleamarket) ? (
          <>
            <h3 className="text-base font-bold">{trans("market")}</h3>
            <div className={classNames("grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-2 py-4", customMarketCss)}>
              {data?.fleamarket?.map((item: IMarketItems) => (
                <CardItemMarket
                  keyProps={item?.id}
                  className="col-span-1"
                  type={"default"}
                  url={item?.web_url ? item?.web_url : `/market/${item?.id}`}
                  target={item?.web_url ? "_blank" : "_self"}
                  url_image={item?.picture1}
                  alt_image={item?.title}
                  category={item?.category?.name}
                  title={item?.title}
                  classNameTitle="text-[var(--market--title-color)]"
                  desc={item?.description}
                  location={item?.country}
                  labelBottom={renderLabelBottom(item?.trade_type, "absolute bottom-0 left-0 right-0 py-2 mx-2")}
                  onClick={onCancel}
                />
              ))}
            </div>
          </>
        ) : null}

        {isEmpty(data?.fleamarket) && isEmpty(data?.kuisines) && isEmpty(data?.books) && (
          <NotFoundBox
            className="!bg-white py-8 rounded-3xl"
            backHome={false}
            message={transMusic("we_found_nothing_here")}
          />
        )}
      </div>
    </Modal>
  )
})