"use client"

import Image from "next/image"
import Rate from "../Common/Rate"
import { useEffect, useMemo, useRef, useState } from "react"
import CarouselImage from "../Common/CarouselImage"
import Link from "next/link"
import CommentReport from "../Comment/CommentReport"
import CommentItem from "../Comment/CommentItem"
import { IKuisineDetail } from "@/type/DetailKuisine"
import { useTranslations } from "next-intl"
import dayjs from "dayjs"
import { useAddFavourite, useDeleteKuisine, useGetPostCommentList, useGetReportCommentsKuisine, useRePostKuisine, useRemoveFavourite } from "@/hook/useKuisine"
import { useCookies } from "next-client-cookies"
import { formatCurrency } from "@/util/Common"
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"
import { FromEvaluate } from "./FromEvaluate"
import { flattenDeep } from "lodash"
import { LoadMoreInfinite } from "@/component/Common/LoadMoreInfinite"
import { useOpenChat } from "@/component/Contact/Common"

interface IProps {
  kuisineDetail: IKuisineDetail
  revalidate: (id: number) => Promise<void>
}

export default function PostKuisineContent({ kuisineDetail, revalidate }: IProps) {
  const router = useRouter()
  const { notify } = useNotificationContext()
  const [modal, modalContextHolder] = Modal.useModal()
  const cookies = useCookies()
  const user = JSON.parse(cookies.get("logged_user") || "null")
  const refModalComment = useRef<null | { showModal: () => void }>(null)
  const setOptionHeader = useSetRecoilState(typeKuisineState)
  const urlCurrent = typeof window !== "undefined" ? window.location.href : ""
  const openChat = useOpenChat()

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

  const [startSize, setStartSize] = useState(24)
  const [isNextPage, setIsNextPage] = useState(true)
  const { isCopied, handleCopy } = useCopyToClipboard()

  const rePostKuisine = useRePostKuisine()
  const addFavourite = useAddFavourite()
  const removeFavourite = useRemoveFavourite()
  const deleteKuisine = useDeleteKuisine()

  const isExpired = useMemo(() => {
    return kuisineDetail?.expirydate ? dayjs().isAfter(dayjs.unix(Number(kuisineDetail.expirydate))) : false
  }, [kuisineDetail])

  const { data: kuisineReportComment } = useGetReportCommentsKuisine(kuisineDetail?.id)

  const { data, isLoading, fetchNextPage, hasNextPage } = useGetPostCommentList(kuisineDetail?.id, Boolean(kuisineDetail?.id))

  const dataComments = useMemo(
    () => (flattenDeep(data?.pages.map((e: any) => e.data!)).length > 0 ? flattenDeep(data?.pages.map((e: any) => e?.data?.data?.comments)) : []),
    [data?.pages],
  )

  useEffect(() => {
    if (Number(data?.pageParams?.at(-1)) >= Number(data?.pages?.at(-1)?.data?.data?.total_pages)) {
      setIsNextPage(false)
    }
    if (!isNextPage && Number(data?.pageParams?.at(-1)) < Number(data?.pages?.at(-1)?.data?.data?.total_pages)) {
      setIsNextPage(true)
    }
  }, [isNextPage, data?.pages, data?.pageParams])

  const pictures = useMemo(() => {
    const filterPicture = Object.keys(kuisineDetail)
      .filter((key) => key.startsWith("picture") && key.endsWith("_org_name") === false)
      .map((key) => kuisineDetail[key])
      .filter((item) => item !== "")
    return filterPicture
  }, [kuisineDetail])

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

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

  const handleRePostKuisine = () => {
    rePostKuisine
      .mutateAsync(+kuisineDetail?.id)
      .then((res) => {
        if (res?.status === 200) {
          notify({
            type: "success",
            message: transMessage("congratulation"),
            description: transGeneral("repost_successful"),
          })
          revalidate(+kuisineDetail?.id)
        }
      })
      .catch((errors) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: errors?.response?.data.msgs || transMessage("fail"),
        })
      })
  }

  const handleAddFavorite = () => {
    addFavourite
      .mutateAsync(kuisineDetail?.id)
      .then(() => {
        notify({
          type: "success",
          message: transMessage("congratulation"),
          description: transMessage("add_favorite_success"),
        })
        revalidate(+kuisineDetail?.id)
      })
      .catch((error) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: error?.response?.data.msgs || transMessage("fail"),
        })
      })
  }

  const handleRemoveFavorite = () => {
    removeFavourite
      .mutateAsync(kuisineDetail?.id)
      .then(() => {
        notify({
          type: "success",
          message: transMessage("congratulation"),
          description: transMessage("remove_favorite_success"),
        })
        revalidate(+kuisineDetail?.id)
      })
      .catch((error) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: error?.response?.data.msgs || transMessage("fail"),
        })
      })
  }

  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("me")
          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()
      },
    })
  }

  const handleBuy = (uid?: string) => {
    if (uid) {
      openChat(String(uid) || "", transMessage("you_cant_buy"))
    } else {
      notify({
        type: "error",
        message: transMessage("something_wrong"),
        description: transMessage("you_cant_buy"),
      })
    }
  }

  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?.recipe}</h2>
          <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>
          )}
          {user?.id === kuisineDetail?.user_id && isExpired && (
            <button
              onClick={handleRePostKuisine}
              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/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>
          )}
          {kuisineDetail?.is_favourite ? (
            user?.id !== kuisineDetail?.user_id ? (
              <button
                onClick={handleRemoveFavorite}
                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/broken_heart.svg"
                  alt="broken_heart"
                  width={24}
                  height={24}
                  className="group-hover:hidden"
                />
                <Image
                  src="/img/icon/broken_heart_white.svg"
                  alt="broken_heart"
                  width={24}
                  height={24}
                  className="hidden group-hover:block"
                />
              </button>
            ) : null
          ) : user?.id !== kuisineDetail?.user_id ? (
            <button
              onClick={handleAddFavorite}
              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/heart_outline.svg"
                alt="broken_heart"
                width={24}
                height={24}
                className="group-hover:hidden"
              />
              <Image
                src="/img/icon/heart_outline_white.svg"
                alt="broken_heart"
                width={24}
                height={24}
                className="hidden group-hover:block"
              />
            </button>
          ) : null}

          <button
            type="button"
            onClick={() => refModalComment?.current?.showModal()}
            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-12 h-12">
            <Image
              src="/img/icon/chatbox.svg"
              alt="message"
              width={24}
              height={24}
              className="group-hover:hidden"
            />
            <Image
              src="/img/icon/chatbox_white.svg"
              alt="message"
              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/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"
            />
          </button>
          {user?.id === kuisineDetail?.user_id ? (
            <button
              type="button"
              className="inline-flex justify-center items-center gap-3 rounded bg-[var(--primary--70)] min-w-20 h-12 hover:opacity-80 text-white px-5"
              onClick={() => {
                router.push(`/kuisine/update-kuisine/${kuisineDetail?.id}`)
              }}>
              <Image
                src="/img/icon/edit_white.svg"
                alt="share"
                width={24}
                height={24}
              />
              {trans("edit_kuisine")}
            </button>
          ) : (
            <button
              onClick={() => handleBuy(`${kuisineDetail?.user?.id}`)}
              type="button"
              className="inline-flex justify-center items-center rounded bg-[var(--primary--70)] min-w-20 h-12 hover:opacity-80 text-white px-5">
              {`$${formatCurrency(kuisineDetail?.cost || 0)} - ${transGeneral("contact_seller")}`}
            </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">
          <CarouselImage images={pictures} />
          <div className="hidden xl:flex pb-4 flex-col gap-4 mt-8">
            {user?.id === kuisineDetail?.user_id ? (
              <button
                type="button"
                className="inline-flex justify-center items-center gap-3 rounded bg-[var(--primary--70)] min-w-20 h-12 hover:opacity-80 text-white px-5"
                onClick={() => {
                  router.push(`/kuisine/update-kuisine/${kuisineDetail?.id}`)
                }}>
                <Image
                  src="/img/icon/edit_white.svg"
                  alt="share"
                  width={24}
                  height={24}
                />
                {trans("edit_kuisine")}
              </button>
            ) : (
              <button
                onClick={() => handleBuy(`${kuisineDetail?.user?.id}`)}
                type="button"
                className="inline-flex justify-center items-center rounded bg-[var(--primary--70)] min-w-20 h-12 hover:opacity-80 text-white px-5">
                {`$${formatCurrency(kuisineDetail?.cost || 0)} - ${transGeneral("contact_seller")}`}
              </button>
            )}
            <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_kuisine_link")}</span>
            </button>
            <button
              type="button"
              onClick={() => refModalComment?.current?.showModal()}
              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/chatbox.svg"
                alt="message"
                width={24}
                height={24}
                className="group-hover:hidden"
              />
              <Image
                src="/img/icon/chatbox_white.svg"
                alt="message"
                width={24}
                height={24}
                className="hidden group-hover:block"
              />
              <span>{transGeneral("leave_comment")}</span>
            </button>
            {user?.id === kuisineDetail?.user_id && isExpired && (
              <button
                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"
                onClick={handleRePostKuisine}>
                <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"
                />
                <span>{trans("repost_kuisine")}</span>
              </button>
            )}
            {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 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("delete_kuisine")}</span>
              </button>
            )}
            {kuisineDetail?.is_favourite ? (
              user?.id !== kuisineDetail?.user_id ? (
                <button
                  onClick={handleRemoveFavorite}
                  type="button"
                  className="font-medium text-[var(--secondary-100)] bg-[var(--secondary-20)] inline-flex justify-center items-center gap-3 w-full py-4 hover:bg-[var(--primary--70)] hover:text-white group xl:bg-[var(--secondary-10)] xl:rounded xl:border xl:border-[var(--secondary-20)]">
                  <Image
                    src="/img/icon/broken_heart.svg"
                    alt="share"
                    width={24}
                    height={24}
                    className="group-hover:hidden"
                  />
                  <Image
                    src="/img/icon/broken_heart_white.svg"
                    alt="share"
                    width={24}
                    height={24}
                    className="hidden group-hover:block"
                  />
                  <span>{transContact("remove_favorite")}</span>
                </button>
              ) : null
            ) : user?.id !== kuisineDetail?.user_id ? (
              <button
                onClick={handleAddFavorite}
                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/heart_outline.svg"
                  alt="share"
                  width={24}
                  height={24}
                  className="group-hover:hidden"
                />
                <Image
                  src="/img/icon/heart_outline_white.svg"
                  alt="share"
                  width={24}
                  height={24}
                  className="hidden group-hover:block"
                />
                <span>{trans("add_to_favorite")}</span>
              </button>
            ) : null}
          </div>
        </div>
        <div className="pt-8 md:pt-0">
          <div className="hidden xl:block">
            <h2 className="text-4xl font-bold mb-2">{kuisineDetail?.recipe}</h2>
            <p
              className="text-lg"
              dangerouslySetInnerHTML={{ __html: kuisineDetail?.description || "" }}></p>
          </div>
          <div className="md:flex items-center gap-3 mb-4 md:flex-row-reverse md:justify-end">
            <p className="md:text-base lg:text-lg mb-3 md:mb-0">{`${kuisineDetail?.ratings?.count || 0} ${transGeneral("comment_review")}`}</p>
            <div className="flex items-center gap-3">
              <Rate
                value={+kuisineDetail?.ratings?.average}
                color="#db9a1d"
                size={startSize}
              />
              <span className="font-medium text-2xl md:text-3xl lg:text-4xl">{+kuisineDetail?.ratings?.average}</span>
            </div>
          </div>
          <ul>
            <li className="flex items-center gap-2 md:gap-3">
              <span className="w-4">
                <Image
                  src="/img/icon/location.svg"
                  alt="phone"
                  width={24}
                  height={24}
                  style={{
                    width: "100%",
                  }}
                  className=""
                />
              </span>
              <span>{kuisineDetail?.country}</span>
            </li>
            <li className="flex items-center gap-2 md:gap-3">
              <span className="w-4">
                <Image
                  src="/img/icon/flag.svg"
                  alt="phone"
                  width={24}
                  height={24}
                  style={{
                    width: "100%",
                  }}
                  className=""
                />
              </span>
              <span>{`${kuisineDetail.additionalinfo}/${kuisineDetail?.address}/${kuisineDetail?.city} - ${trans("social")}`}</span>
            </li>
            <li className="flex items-center gap-2 md:gap-3">
              <span className="w-4">
                <Image
                  src="/img/icon/user_tag.svg"
                  alt="phone"
                  width={24}
                  height={24}
                  style={{
                    width: "100%",
                  }}
                  className=""
                />
              </span>
              <span>{`${kuisineDetail?.seatingtype} - ${kuisineDetail?.noofseats} ${trans("available_seats")}`}</span>
            </li>
            <li className="flex items-center gap-2 md:gap-3">
              <span className="w-4">
                <Image
                  src="/img/icon/time_outline.svg"
                  alt="phone"
                  width={24}
                  height={24}
                  style={{
                    width: "100%",
                  }}
                  className=""
                />
              </span>
              <span>{dayjs.unix(Number(kuisineDetail?.created)).format("HH:mm - DD/MM/YYYY")}</span>
            </li>
          </ul>
          <hr className="my-6" />
          <p className="text-xs md:text-sm lg:text-base xl:text-lg mb-2">{trans("make_you_impressive")}</p>
          <table className="w-full text-[0.625rem] leading-4 lg:text-xs xl:text-lg text-left">
            <tbody>
              <tr>
                <th className="py-1">{trans("theme")}</th>
                <td className="py-1">{kuisineDetail?.theme || "--"}</td>
              </tr>
              <tr>
                <th className="py-1">{trans("category")}</th>
                <td className="py-1">{kuisineDetail?.category?.name || "--"}</td>
              </tr>
              <tr>
                <th className="py-1">{trans("nationality")}</th>
                <td className="py-1">{kuisineDetail?.nationality?.name || "--"}</td>
              </tr>
            </tbody>
          </table>
          <hr className="my-6" />
          <p className="text-lg font-bold mb-3">{kuisineDetail?.contactname}</p>
          <p className="flex items-center gap-2 md:gap-3">
            <span className="w-4">
              <Image
                src="/img/icon/call_outline.svg"
                alt="phone"
                width={24}
                height={24}
                style={{
                  width: "100%",
                }}
                className=""
              />
            </span>
            <Link href={`tel:${kuisineDetail?.phonenumber}`}>{kuisineDetail?.phonenumber}</Link>
          </p>
          <p className="flex items-center gap-2 md:gap-3 mb-3">
            <span className="w-4">
              <Image
                src="/img/icon/location.svg"
                alt="location"
                width={24}
                height={24}
                style={{
                  width: "100%",
                }}
                className=""
              />
            </span>
            <span>{kuisineDetail?.address}</span>
          </p>
          <hr className="my-6" />
          <CommentReport
            averageRate={+kuisineDetail?.ratings?.average || 0}
            total={kuisineDetail?.ratings?.count || 0}
            data={kuisineReportComment?.data}
          />
          {dataComments?.map((item, index) => (
            <CommentItem
              key={index}
              comment={item}
              borderContent={index < 3 ? true : false}
            />
          ))}

          <LoadMoreInfinite
            isLoading={isLoading}
            isNextPage={isNextPage}
            hasNextPage={hasNextPage}
            fetchNextPage={fetchNextPage}
          />
        </div>
      </div>
      {modalContextHolder}
      <FromEvaluate
        startSize={startSize}
        postid={kuisineDetail?.id}
        revalidate={revalidate}
        ref={refModalComment}
      />
    </div>
  )
}