"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";
import NavbarTransparent from "@comp/Navbar/NavbarTransparent";

const ProductData = ({ params, 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 (
    <>
      <NavbarTransparent theme={1} />
      <div className=" py-10">
        <div className="grid xs:grid-cols-1 lg:grid-cols-8  rtl gap-6 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="bg-secondary-600 rounded-full py-1 px-3 ml-2">
                <p className="mb-0 text-sm text-white ">تضمین بهترین قیمت </p>
              </div>

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

              {!data?.product?.warranty == "" && (
                <div className="bg-secondary-500 rounded-full py-1 px-3 ml-2">
                  <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="text-right  mt-3 flex justify-between">
                <h2 className="mb-0 text-gray-400  text-sm">
                  {data?.product?.summery}
                </h2>
              </div>
            </div>

            <ul className="mt-3 px-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="mb-0  w-full text-sm  text-gray-700 mx-2 ">
                    {e}
                  </p>
                </li>
              ))}
            </ul>
          </div>

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

          <div className=" w-9/12  lg:col-span-2 sticky top-[80px] xs:hidden lg:block  ">
            <div className="p-3 h-fit border-[1px] border-gray-200 rounded-2xl rounded-tl-[40px]">
              <div className="flex justify-center">
                <div className="w-[130px]">
                  {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="mb-0 text-sm text-gray-500">
                  {data?.product?.persianName}{" "}
                </p>
              </div>

              <div className=" mt-4 flex justify-between ">
                {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 font-bold text-lg">
                      <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 id="section0">
                <h3 className=" text-sm text-gray-400  mb-2">مشخصات محصول</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 text-gray-800 font-bold ">
                          {" "}
                          {e.value}{" "}
                        </small>
                      </p>
                    </div>
                  ))}
                </div>
              </div>

              <div id="section2">
                <h3 className=" text-sm text-gray-400 mt-7 mb-2">
                  نقد و برسی{" "}
                </h3>
                <div className=" p-5  rounded-lg">
                  <div className="flex justify-center py-5">
                    <div className="bg-gray-50   w-fit rounded-xl rounded-tl-[30px] text-sm   p-4">
                      چیزی یافت نشد
                    </div>
                  </div>
                </div>{" "}
              </div>
            </div>

            <div className="xs:block lg:hidden   sticky bottom-0 ">
              <div className="w-full bg-[white] p-2 border-t-[1px] border-gray-100 mt-[30px]">
                <div className="py-4 flex ltr justify-between px-4 relative">
                  {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 font-bold text-lg">
                        <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;
