"use client"

import Image from "next/image"
import { useEffect, useMemo, useRef, useState } from "react"
import CarouselImage from "@component/Common/CarouselImage"
import Link from "next/link"
import { useTranslations } from "next-intl"
import { useCookies } from "next-client-cookies"
import { useNotificationContext } from "@component/Layout/NotificationContext"
import {useCopyToClipboard} from "@/hook/useCommon"
import { IMarketDetail } from "@/type/Market"
import { renderTags } from "@component/Market/common"
import { useAddMarketFavourite, useGetCommentMarket, useRemoveMarketFavourite } from "@/hook/useMarket"
import { Button } from "antd"
import CommentReport from "@/component/Comment/CommentReport"
import CommentItem from "@/component/Comment/CommentItem"
import { FromMarketComment } from "./FromMarketComment"

interface IProps {
  marketDetail: IMarketDetail
  revalidate: (id: string) => Promise<void>
}

export default function PostMarketContent({ marketDetail, revalidate }: IProps) {
  const cookies = useCookies()
  const user = JSON.parse(cookies.get("logged_user") || "null")
  const urlCurrent = typeof window !== "undefined" ? window.location.href : ""
  const { notify } = useNotificationContext()
  const { renderLabelBottom, renderNameTags } = renderTags()

  const { data: marketCommentList } = useGetCommentMarket(
    marketDetail ? Number(marketDetail?.id) : 0,
    marketDetail?.id ? true : false,
  )

  const trans = useTranslations("market")
  const transKuisine = useTranslations("kuisine")
  const transContact = useTranslations("contact")
  const transMessage = useTranslations("message")
  const transGeneral = useTranslations("general")

  const { isCopied, handleCopy } = useCopyToClipboard()

  const addFavourite = useAddMarketFavourite()
  const removeFavourite = useRemoveMarketFavourite()
  const [startSize, setStartSize] = useState(24)
  const refModalComment = useRef<null | { showModal: () => void }>(null)

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

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

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

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

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

  const renderContentHeader = () => {
    return (
      <>
        <h2 className="text-xl xl:text-4xl font-bold mb-4">{marketDetail?.title}</h2>
        <div className="flex items-center gap-4 mb-4">
          <Image
            src="/img/icon/mk_ag.svg"
            alt="phone"
            width={36}
            height={36}
          />
          <span>{marketDetail?.category?.name}</span>
        </div>
        <p
          className="text-lg font-light mb-4"
          dangerouslySetInnerHTML={{ __html: marketDetail?.description || "" }}></p>
        {marketDetail?.web_url ? (
          <p className="mb-4">
            <a
              className="text-lg font-light hover:text-[var(--blue-50)] hover:cursor hover:underline"
              target="_blank"
              href={marketDetail?.web_url}>
              {marketDetail?.web_url}
            </a>
          </p>
        ) : null}
        {renderLabelBottom(marketDetail?.trade_type || "", "!gap-2")}
      </>
    )
  }

  return (
    <div className="grow overflow-y-auto md:px-4 py-6">
      <div className="xl:hidden">
        <div>{renderContentHeader()}</div>
        <div className="mt-6 flex gap-2 items-center xl:hidden lg:mt-0 justify-end pt-3">
          <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>
          {marketDetail?.is_favourite ? (
            user?.id !== marketDetail?.user_id ? (
              <Button
                onClick={handleRemoveFavorite}
                loading={removeFavourite?.isPending}
                type="default"
                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)] hover:!text-white !w-12 !h-12 !px-2.5">
                <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 !== marketDetail?.user?.id ? (
            <Button
              onClick={handleAddFavorite}
              loading={addFavourite?.isPending}
              type="default"
              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)] hover:!text-white !w-12 !h-12 !px-2.5">
              <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
            onClick={() => handleCopy(urlCurrent)}
            loading={isCopied}
            type="default"
            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/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>
        </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}
            isShowPopoverThumbnail
          />
          <div className="hidden xl:flex pb-4 flex-col gap-4 mt-8">
            <Button
              onClick={() => handleCopy(urlCurrent)}
              loading={isCopied}
              type="default"
              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 !h-auto w-full !py-4">
              <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_items_link")}</span>
            </Button>
            {marketDetail?.is_favourite ? (
              user?.id !== marketDetail?.user?.id ? (
                <Button
                  onClick={handleRemoveFavorite}
                  loading={removeFavourite?.isPending}
                  type="default"
                  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 !h-auto w-full !py-4">
                  <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 !== marketDetail?.user?.id ? (
              <Button
                onClick={handleAddFavorite}
                loading={addFavourite?.isPending}
                type="default"
                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 !h-auto 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>{transKuisine("add_to_favorite")}</span>
              </Button>
            ) : null}
            <button
              type="button"
              onClick={() => refModalComment && 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>
          </div>
        </div>
        <div className="pt-8 md:pt-0">
          <div className="hidden xl:block">{renderContentHeader()}</div>
          <hr className="my-6" />
          <p className="text-lg font-bold mb-3">{`${marketDetail?.user?.firstname || ""} ${marketDetail?.user?.lastname || ""}`}</p>
          <p className="flex items-start gap-2 md:gap-3 mb-3">
            <span className="w-4 mt-1">
              <Image
                src="/img/icon/call_outline.svg"
                alt="phone"
                width={24}
                height={24}
              />
            </span>
            {marketDetail?.phonenumber ? <Link href={`tel:${marketDetail?.phonenumber}`}>{marketDetail?.phonenumber}</Link> : "--"}
          </p>
          <p className="flex items-start gap-2 md:gap-3 mb-3">
            <span className="w-4 mt-1">
              <Image
                src="/img/icon/mail_outline.svg"
                alt="mail"
                width={24}
                height={24}
              />
            </span>
            <span>{marketDetail?.email ? <Link href={`mailto:${marketDetail?.email}`}>{marketDetail?.email}</Link> : "--"}</span>
          </p>
          <p className="flex items-start gap-2 md:gap-3 mb-3">
            <span className="w-4 mt-1">
              <Image
                src="/img/icon/location.svg"
                alt="location"
                width={24}
                height={24}
              />
            </span>
            <span>{marketDetail?.address ? marketDetail?.address : "--"}</span>
          </p>
          <hr className="my-6" />
          {renderNameTags(marketDetail?.tags || "", "!gap-2")}
          <hr className="my-6" />
          <CommentReport
            averageRate={marketCommentList?.data?.summary?.average_rating || 0}
            total={marketCommentList?.data?.summary?.total || 0}
            data={marketCommentList?.data?.summary?.ratings}
          />
          {marketCommentList?.data.comments.map((item, index) => (
            <CommentItem
              key={index}
              comment={{ ...item, ratings: item.rating, comments: item.comment }}
              borderContent={index < marketCommentList?.data.comments.length - 1 ? true : false}
            />
          ))}
        </div>
      </div>
      <FromMarketComment
        startSize={startSize}
        postid={Number(marketDetail?.id || 0)}
        ref={refModalComment}
      />
    </div>
  )
}