"use client"

import Image from "next/image"
import { useEffect, useState } from "react"
import Rate from "../Common/Rate"
import { IKuisineDetailExperiences } from "@/type/DetailKuisine"
import { useTranslations } from "next-intl"
import { useCookies } from "next-client-cookies"
import { useDeleteKuisineExperiences } from "@/hook/useKuisine"
import { useRouter } from "@/i18n/routing"
import { useNotificationContext } from "@component/Layout/NotificationContext"
import { Modal } from "antd"
import { useSetRecoilState } from "recoil"
import { typeKuisineState } from "@/recoil"
import {useCopyToClipboard} from "@/hook/useCommon"

type IProps = {
  kuisineDetail: IKuisineDetailExperiences
  revalidate: (id: number | string) => Promise<void>
}

export default function DetailExperienceConent({ kuisineDetail, revalidate }: IProps) {
  const router = useRouter()
  const cookies = useCookies()
  const user = JSON.parse(cookies.get("logged_user") || "null")
  const { notify } = useNotificationContext()
  const [modal, modalContextHolder] = Modal.useModal()

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

  const [startSize, setStartSize] = useState(24)
  const setOptionHeader = useSetRecoilState(typeKuisineState)
  const deleteKuisine = useDeleteKuisineExperiences()

  const urlCurrent = typeof window !== "undefined" ? window.location.href : ""
  const { isCopied, handleCopy } = useCopyToClipboard()

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 992) {
        setStartSize(32)
      } else {
        setStartSize(24)
      }
    }
    handleResize()
    window.addEventListener("resize", handleResize)

    return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [])

  const handleDeleteKuisine = () => {
    deleteKuisine
      .mutateAsync(+kuisineDetail?.id)
      .then((res: any) => {
        if (res?.status === 200) {
          notify({
            type: "success",
            message: transMessage("congratulation"),
            description: transGeneral("deleted_successfully"),
          })
          revalidate(+kuisineDetail.id)
          setOptionHeader("experiences")
          router.push(`/kuisine`)
        }
      })
      .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()
      },
    })
  }

  return (
    <div className="grow overflow-y-auto md:px-4 py-6">
      <div className="lg:flex items-center justify-between xl:hidden">
        <div>
          <h2 className="text-base font-bold mb-2">{kuisineDetail?.eventhost}</h2>
          <div className="text-[var(--primary--70)] flex items-center gap-2 text-xs md:text-sm lg:text-base">
            <Image
              src="/img/icon/user_octagon.svg"
              alt="user"
              width={24}
              height={24}
            />
            <span>{kuisineDetail?.eventtype}</span>
          </div>
          <p
            className="text-xs md:text-sm lg:text-base xl:text-lg"
            dangerouslySetInnerHTML={{ __html: kuisineDetail?.description || "" }}></p>
        </div>
        <div className="mt-6 flex gap-2 items-center xl:hidden lg:mt-0">
          {user?.id === kuisineDetail?.user_id && (
            <button
              onClick={confirmDelete}
              type="button"
              className="group text-[var(--secondary-100)] bg-[var(--secondary-10)] border inline-flex justify-center items-center border-[var(--secondary-20)] rounded hover:bg-[var(--primary--70)] w-12 h-12">
              <Image
                src="/img/icon/trash_outline.svg"
                alt="share"
                width={24}
                height={24}
                className="group-hover:hidden"
              />
              <Image
                src="/img/icon/trash_outline_white.svg"
                alt="share"
                width={24}
                height={24}
                className="hidden group-hover:block"
              />
            </button>
          )}
          <button
            onClick={() => handleCopy(urlCurrent)}
            disabled={isCopied}
            type="button"
            className={`group text-[var(--secondary-100)] bg-[var(--secondary-10)] border inline-flex justify-center items-center border-[var(--secondary-20)] rounded hover:bg-[var(--primary--70)] w-12 h-12 ${
              isCopied ? "opacity-50" : ""
            }`}>
            <Image
              src="/img/icon/refresh.svg"
              alt="share"
              width={24}
              height={24}
              className="group-hover:hidden"
            />
            <Image
              src="/img/icon/refresh_white.svg"
              alt="share"
              width={24}
              height={24}
              className="hidden group-hover:block"
            />
          </button>
        </div>
      </div>
      <div className="md:flex items-start gap-6 pt-10 md:pt-6 xl:pt-0">
        <div className="md:w-[276px] md:shrink-0 flex flex-col items-center">
          <div className="w-48 h-[301px] md:w-full xl:h-[301px] xl:mb-3">
            <Image
              src={`${kuisineDetail?.thumbnail || "/img/default_image.jpg"}`}
              alt={`${kuisineDetail?.eventhost || "no-image"}`}
              width={276}
              height={301}
              style={{
                width: "100%",
                height: "100%",
              }}
              className="object-cover"
            />
          </div>
          <div className="hidden xl:flex pb-4 flex-col gap-4 w-full">
            <button
              onClick={() => handleCopy(urlCurrent)}
              disabled={isCopied}
              type="button"
              className={`group text-[var(--secondary-100)] bg-[var(--secondary-10)] border inline-flex justify-center gap-3 items-center border-[var(--secondary-20)] rounded hover:bg-[var(--primary--70)] hover:text-white group w-full py-4 ${
                isCopied ? "opacity-50" : ""
              }`}>
              <Image
                src="/img/icon/redo.svg"
                alt="share"
                width={24}
                height={24}
                className="group-hover:hidden"
              />
              <Image
                src="/img/icon/redo_white.svg"
                alt="share"
                width={24}
                height={24}
                className="hidden group-hover:block"
              />
              <span>{trans("share_experience_link")}</span>
            </button>
            {user?.id === kuisineDetail?.user_id && (
              <button
                onClick={confirmDelete}
                disabled={isCopied}
                type="button"
                className="group text-[var(--secondary-100)] bg-[var(--secondary-10)] border inline-flex justify-center gap-3 items-center border-[var(--secondary-20)] rounded hover:bg-[var(--primary--70)] hover:text-white group w-full py-4">
                <Image
                  src="/img/icon/trash_outline.svg"
                  alt="share"
                  width={24}
                  height={24}
                  className="group-hover:hidden"
                />
                <Image
                  src="/img/icon/trash_outline_white.svg"
                  alt="share"
                  width={24}
                  height={24}
                  className="hidden group-hover:block"
                />
                <span>{trans("remove_experience")}</span>
              </button>
            )}
          </div>
          {user?.id === kuisineDetail?.user_id && (
            <div className="text-center">
              <Rate
                value={5}
                color="#db9a1d"
                size={startSize}
              />
              <p className="text-xs md:text-sm lg:text-base">
                {trans("your_rate")} <span className="font-bold text-base md:text-xl lg:text-2xl">{Number(kuisineDetail?.ratings)?.toFixed(1)}</span>
              </p>
            </div>
          )}
        </div>
        <div className="pt-8 md:pt-0 grow">
          <div className="hidden xl:block">
            <h2 className="text-4xl font-bold mb-2">{kuisineDetail?.eventhost}</h2>
            <div className="text-[var(--primary--70)] flex items-center gap-2 text-base">
              <Image
                src="/img/icon/user_octagon.svg"
                alt="user"
                width={24}
                height={24}
              />
              <span>{kuisineDetail?.eventtype}</span>
            </div>
            <p
              className="text-lg"
              dangerouslySetInnerHTML={{ __html: kuisineDetail?.description || "" }}></p>
            <hr className="my-6" />
          </div>
          <div dangerouslySetInnerHTML={{ __html: kuisineDetail?.message || "" }}></div>
          {/* <ul
            className="grid grid-cols-2 lg:grid-cols-4 gap-2 md:gap-3">
            {images.map((item, index) => (
              <li key={index}>
                <Image
                  src={item}
                  alt="kuisine"
                  width={172}
                  height={229}
                  style={{
                    width: "100%",
                    height: "100%",
                  }}
                  className="onject-cover"
                />
              </li>
            ))}
          </ul> */}
        </div>
      </div>
      {modalContextHolder}
    </div>
  )
}