"use client";
import Footer from "@comp/Footer/page";
import Navbar from "@comp/Navbar/page";
import GalleryBox from "plugins/Gallery/page";
import { useEffect, useState } from "react";

import AddToCart from "@comp/Cards/Components/AddToCart/page";
import Image from "next/image";
import PersianNumber from "plugins/PersianNumber";
import logo from "../../../public/images/logo.png";

const ProductData = ({ params, data }) => {
  console.log("data", data);
  const [product, setProduct] = useState([]);
  const [specificationsHeader, setSpecificationsHeader] = useState([]);
  const [productBarDetail, setProductBarDetail] = useState(0);

  const fetchPost = async (id) => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/product/${id}`);
    const post = await res.json();
    setProduct(post.product);
  };

  const displaySpecifications = (specs) => {
    let data = [];
    if (specs?.length > 3) {
      specs?.slice(0, 3).forEach((spec) => {
        const { title, value } = spec;

        data.push(`${title}: ${value}`);
      });
    } else {
      specs?.forEach((spec) => {
        const { title, value } = spec;

        data.push(`${title}: ${value}`);
      });
    }

    setSpecificationsHeader(data); // You can replace
  };

  const scrollToSection = (id) => {
    const element = document.getElementById(id);
    if (element) {
      const offset = -80; // Adjust this value as needed
      window.scrollTo({
        top: element.offsetTop + offset,
        behavior: "smooth",
      });
    }
  };
  useEffect(() => {
    fetchPost(params.id[0]);
  }, []);

  useEffect(() => {
    displaySpecifications(product?.specifications);
  }, [product]);

  return (
    <>
      <Navbar theme={1} />
      <div className="py-10 ">
        <div className="grid gap-6 xs:grid-cols-1 lg:grid-cols-8 rtl lg:px-20">
          <div className="lg:col-span-3 ">
            <GalleryBox file={data?.product?.files} />
          </div>

          <div className="lg:col-span-3 xs:px-5 lg:px-0 ">
            <div className="text-right mt-7">
              <h1 className="text-lg font-medium ">
                {data.product?.persianName}{" "}
              </h1>
              <p className="mb-0 text-sm text-gray-400">
                {data?.product?.englishName}{" "}
              </p>
            </div>

            <div className="flex my-4">
              <div className="px-3 py-1 ml-2 rounded-full bg-primary-400">
                <p className="mb-0 text-sm text-white ">اصالت کالای </p>
              </div>

              {data?.product?.hasDiscount && (
                <div className="px-3 py-1 ml-2 rounded-full bg-danger-100">
                  <p className="mb-0 text-sm text-white ">بمب امروز </p>
                </div>
              )}

              {!data?.product?.warranty == "" && (
                <div className="px-3 py-1 ml-2 rounded-full bg-secondary-500">
                  <p className="mb-0 text-sm text-white ">
                    {product?.warranty}
                  </p>
                </div>
              )}
            </div>

            {/* <div className="flex my-5">
          <div className="w-[30px] h-[30px] rounded-full bg-red-800 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
          <div className="w-[30px] h-[30px] rounded-full bg-red-700 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
          <div className="w-[30px] h-[30px] rounded-full bg-red-600 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
          <div className="w-[30px] h-[30px] rounded-full bg-red-500 border-[5px] border-green-300 scale-110 shadow mr-2 cursor-pointer "></div>
          <div className="w-[30px] h-[30px] rounded-full bg-red-400 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
          <div className="w-[30px] h-[30px] rounded-full bg-red-300 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
          <div className="w-[30px] h-[30px] rounded-full bg-red-200 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
        </div> */}

            <div>
              <div className="flex justify-between mt-3 text-right">
                <h2 className="mb-0 text-sm text-gray-400">
                  {data?.product?.summery}
                </h2>
              </div>
            </div>

            <ul className="px-3 mt-3">
              {specificationsHeader.map((e, index) => (
                <li className="flex my-2 " key={index}>
                  <div className="w-[10px] h-[10px] relative rounded-full bg-primary-500 mt-1"></div>
                  <p className="w-full mx-2 mb-0 text-sm text-gray-700 ">
                    {e}
                  </p>
                </li>
              ))}
            </ul>
          </div>

          {/* xs:sticky lg:relative xs:top-[60px] lg:top-0  ==> sticky for price=================== */}

          <div className=" w-11/12  lg:col-span-2 sticky top-[80px] xs:hidden lg:block  ">
            <div className="p-3 h-fit border-[1px] border-gray-300 rounded-xl ">
              <div className="flex justify-center">
                <div className="w-[110px]">
                  {data?.product?.files?.length > 0 ? (
                    <Image
                      src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${
                        product.files && product.files[0]?.fileLocation
                      }`}
                      width={350}
                      height={350}
                      className=" mx-auto !object-cover"
                      onClick={() => CTX.setIsOpenLightBox(true)}
                      alt={`${product.persianName} - ${product.englishName}`}
                      property
                      loading="eager"
                    />
                  ) : (
                    <div className="xs:!w-[85px] lg:!w-[85px] my-10 ">
                      <Image
                        src={logo}
                        className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
                        alt="وسمه"
                      />
                    </div>
                  )}
                </div>
              </div>
              <div className="text-center">
                <p className="my-2 mb-0 text-sm text-gray-500">
                  {data?.product?.persianName}{" "}
                </p>
              </div>
              <div className="w-6/12 mx-auto h-[1px] bg-gray-200 mt-4"></div>

              <div className="flex justify-center mt-3">
                <div>
                  <svg
                    width="15"
                    height="15"
                    viewBox="0 0 226 264"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="ml-1 mt-[2px]"
                  >
                    <path
                      d="M94.25 137.531L69.9687 113.25L56.75 126.469L94.25 163.969L169.25 88.9687L156.031 75.75L94.25 137.531Z"
                      fill="black"
                    />
                    <path
                      d="M113 263.25L55.1001 232.378C38.5938 223.597 24.7904 210.486 15.1712 194.454C5.552 178.421 0.48019 160.072 0.500058 141.375V19.5C0.505022 14.5287 2.48206 9.76246 5.99729 6.24723C9.51252 2.732 14.2788 0.754964 19.2501 0.75H206.75C211.721 0.754964 216.488 2.732 220.003 6.24723C223.518 9.76246 225.495 14.5287 225.5 19.5V141.375C225.52 160.072 220.448 178.421 210.829 194.454C201.21 210.486 187.406 223.597 170.9 232.378L113 263.25ZM19.2501 19.5V141.375C19.2345 156.673 23.3854 171.687 31.2572 184.804C39.129 197.922 50.4245 208.648 63.9313 215.831L113 241.997L162.069 215.841C175.577 208.656 186.873 197.929 194.745 184.81C202.617 171.69 206.767 156.675 206.75 141.375V19.5H19.2501Z"
                      fill="black"
                    />
                  </svg>
                </div>
                <p className="mb-0 text-[12px] font-bold">
                  گارانتی{" "}
                  <small className=" text-primary-500 text-[12px]">اصالت</small>{" "}
                  و{" "}
                  <small className=" text-primary-500 text-[12px]">
                    سلامت فیزیکی کالا
                  </small>
                </p>
              </div>

              <div className="w-6/12 mx-auto h-[1px] bg-gray-200 mt-4"></div>

              <div className="flex justify-between mt-4 ">
                {true ? (
                  <div className="flex justify-end">
                    <div className="mb-0 font-bold text-sm absolute mt-[-11px] ml-[0px] right-0 mr-[13px] text-red-600 flex rtl">
                      <del>
                        <PersianNumber
                          number={(data?.product?.cost / 10).toLocaleString()}
                          style={"text-[13px] opacity-40 "}
                        />
                      </del>
                    </div>
                    <div className="flex rtl mt-[8px]">
                      {" "}
                      <p className="mb-0 font-bold">
                        <PersianNumber
                          number={(
                            data?.product?.costWithDiscount / 10
                          ).toLocaleString()}
                        />
                      </p>
                      <small className="mr-1 mt-[3px]">تومان</small>
                    </div>
                  </div>
                ) : (
                  <div className="flex rtl mt-[3px]">
                    {" "}
                    <p className="mb-0 text-lg font-bold">
                      <PersianNumber
                        number={(data?.cost / 10).toLocaleString()}
                      />
                    </p>
                    <small className="mr-1 mt-[6px]">تومان</small>
                  </div>
                )}
                <AddToCart data={data?.product} theme={2} />
              </div>
            </div>
          </div>

          <div className="lg:col-span-6">
            <div className="xs:px-[15px] lg:px-[100px]">
              <div className="sticky top-0 flex bg-gray-200 rounded-full xs:p-1 lg:p-3 w-fit ">
                <div
                  className={` rounded-full xs:p-2 lg:p-3 cursor-pointer tr03 ${
                    productBarDetail == 0 ? "bg-primary-500 text-gray-100" : ""
                  }`}
                  onClick={() => {
                    setProductBarDetail(0);
                    scrollToSection("section0");
                  }}
                >
                  <p className=" xs:hidden lg:block mb-0 text-[12px] ">
                    مشخصات محصول
                  </p>
                  <p className=" xs:block lg:hidden mb-0 text-[12px]">مشخصات</p>
                </div>

                <div
                  className={` rounded-full xs:p-2 lg:p-3 cursor-pointer tr03 ${
                    productBarDetail == 2 ? "bg-primary-500 text-gray-100" : ""
                  }`}
                  onClick={() => {
                    setProductBarDetail(2);
                    scrollToSection("section2");
                  }}
                >
                  <p className="mb-0 text-[13px] ">نقد و بررسی</p>
                </div>
                <div
                  className={` rounded-full xs:p-2 lg:p-3 cursor-pointer tr03 ${
                    productBarDetail == 3 ? "bg-primary-500 text-gray-100" : ""
                  }`}
                  onClick={() => {
                    setProductBarDetail(3);
                    scrollToSection("section3");
                  }}
                >
                  <p className=" xs:hidden lg:block mb-0 text-[13px] ">
                    دیدگاه مخاطبان
                  </p>
                  <p className=" xs:block lg:hidden mb-0 text-[13px] ">
                    مخاطبان
                  </p>
                </div>
              </div>

              <div id="section0">
                <h3 className="mb-2 text-sm text-gray-400 mt-7">
                  مشخصات محصول
                </h3>
                <div className="min-w-[200px] mt-5 rounded-xl overflow-hidden border rtl ">
                  {product?.specifications?.map((e, index) => (
                    <div
                      className={
                        index % 2 === 0 ? "bg-gray-50 p-3" : "bg-gray-100 p-3"
                      }
                      key={index}
                    >
                      <p className="mb-0 text-sm text-gray-600">
                        {e.title}:
                        <small className="text-sm font-bold text-gray-800 ">
                          {" "}
                          {e.value}{" "}
                        </small>
                      </p>
                    </div>
                  ))}
                </div>
              </div>

              <div id="section2">
                <h3 className="mb-2 text-sm text-gray-400 mt-7">
                  نقد و برسی{" "}
                </h3>

                {!!data?.product?.expertCheck ? (
                  <div className="p-5 border rounded-lg">
                    <div
                      dangerouslySetInnerHTML={{
                        __html: data?.product?.expertCheck,
                      }}
                    />
                  </div>
                ) : (
                  <div className="p-5 border rounded-lg">
                    <div className="flex justify-center py-5">
                      <div className="p-4 text-sm bg-white rounded-full shadow w-fit">
                        چیزی یافت نشد
                      </div>
                    </div>
                  </div>
                )}
              </div>

              <div id="section3">
                <h3 className="mb-2 text-sm text-gray-400 mt-7">
                  دیدگاه مخاطبان{" "}
                </h3>
                <div className="p-5 border rounded-lg">
                  <div className="flex justify-center py-5">
                    <div className="p-4 text-sm bg-white rounded-full shadow w-fit">
                      چیزی یافت نشد
                    </div>
                  </div>
                </div>{" "}
              </div>
            </div>

            <div className="sticky bottom-0 xs:block lg:hidden ">
              <div className="w-full bg-[white] p-2 border-t-[1px] border-gray-100 mt-[30px]">
                <div className="relative flex justify-between px-4 py-4 ltr">
                  {product?.hasDiscount ? (
                    <>
                      <p className="mb-0 font-bold text-sm absolute ml-[33px] opacity-30 mt-[-5px] text-red-600">
                        <del>
                          <PersianNumber
                            number={(data?.product?.cost / 10).toLocaleString()}
                            style="!text-[11px]"
                          />
                        </del>
                      </p>
                      <div className="flex rtl mt-[8px]">
                        {" "}
                        <p className="mb-0 font-bold">
                          <PersianNumber
                            number={(
                              data?.product?.costWithDiscount / 10
                            ).toLocaleString()}
                          />
                        </p>
                        <small className="mr-1 mt-[3px]">تومان</small>
                      </div>
                    </>
                  ) : (
                    <div className="flex rtl mt-[3px]">
                      {" "}
                      <p className="mb-0 text-lg font-bold">
                        <PersianNumber
                          number={(data?.product?.cost / 10).toLocaleString()}
                        />
                      </p>
                      <small className="mr-1 mt-[6px]">تومان</small>
                    </div>
                  )}
                  <AddToCart data={data?.product} theme={2} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </>
  );
};

export default ProductData;