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

import l1 from "../../../../public/images/logobrand/2.png";
import Image from "next/image";
import PersianNumber from "plugins/PersianNumber";

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

  console.log("product", product);

  useEffect(() => {
    fetchPost(params.id);
  }, []);

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

          <div className="lg:col-span-3 xs:px-[20px] lg:px-[100px]">
            <div className="text-right mt-7">
              <h1 className="text-lg font-semibold ">{product.persianName} </h1>
              <p className="mb-0 text-sm text-gray-400">
                Top Shop Biphasic Hair Mask 200 ml
              </p>
            </div>

            <div className="flex my-4">
              <div className="bg-primary-400 rounded-full py-1 px-3 ml-2">
                <p className="mb-0 text-sm text-white ">اصالت کالای </p>
              </div>
              <div className="bg-danger-100 rounded-full py-1 px-3 ml-2">
                <p className="mb-0 text-sm text-white ">بمب امروز </p>
              </div>
              <div className="bg-secondary-500 rounded-full py-1 px-3 ml-2">
                <p className="mb-0 text-sm text-white ">ضمانت بازگشت</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">
                <div className="flex">
                  <div className="w-[5px] h-[5px] bg-primary-500 rounded-full mt-[10px] ml-2 "></div>
                  <p className="mb-0 text-gray-500 ">ویتامین:</p>
                </div>
                <p className="mb-0 text-gray-500 ">ندارد</p>
              </div>

              <div className="text-right  mt-3 flex justify-between">
                <div className="flex">
                  <div className="w-[5px] h-[5px] bg-primary-500 rounded-full mt-[10px] ml-2 "></div>
                  <p className="mb-0 text-gray-500 ">ویژگی:</p>
                </div>
                <p className="mb-0 text-gray-500 ">
                  تقویت کننده , نرم کننده , مرطوب کننده
                </p>
              </div>
            </div>
          </div>

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

          <div className=" mx-auto lg:col-span-2 sticky top-[80px] xs:hidden lg:block  xs:px-[20px] lg:px-[100px]">
            <div className="p-3 h-fit border-[1px] border-gray-300 rounded-xl ">
              <div className="flex justify-center">
                <div className="w-[130px]">
                  <Image src={l1} />
                </div>
              </div>
              <div className="text-center">
                <p className="mb-0 text-sm text-gray-500">
                  مشاهده محصولات برند تاپ شاپ
                </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-sm font-bold">
                  گارانتی{" "}
                  <small className=" text-primary-500 text-sm">اصالت</small> و{" "}
                  <small className=" text-primary-500 text-sm">
                    سلامت فیزیکی کالا
                  </small>
                </p>
              </div>

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

              <div className=" mt-4 ">
                <div className="flex justify-end rtl mt-[3px] mb-1">
                  {" "}
                  <p className="mb-0 font-semibold text-lg">
                    <PersianNumber number={150000} />
                  </p>
                  <small className="mr-1 mt-[6px]">تومان</small>
                </div>
                <button className="btn btn-primary w-full text-sm">
                  افزودن به سبد{" "}
                </button>
              </div>
            </div>
          </div>

          <div className="lg:col-span-6">
            <div className="xs:px-[15px] lg:px-[100px]">
              <div className="bg-gray-200 rounded-full xs:p-2 lg:p-3 flex w-fit ">
                <div className="bg-primary-500 rounded-full p-3 ">
                  <p className=" xs:hidden lg:block mb-0 text-[12px] text-white">
                    مشخصات محصول
                  </p>
                  <p className=" xs:block lg:hidden mb-0 text-[12px] text-white">
                    مشخصات
                  </p>
                </div>
                <div className=" rounded-full p-3 ">
                  <p className="mb-0 text-[13px] text-gray-500">روش استفاده</p>
                </div>
                <div className=" rounded-full p-3 ">
                  <p className="mb-0 text-[13px] text-gray-500">نقد و بررسی</p>
                </div>
                <div className=" rounded-full p-3 ">
                  <p className=" xs:hidden lg:block mb-0 text-[13px] text-gray-500">
                    دیدگاه مخاطبان
                  </p>
                  <p className=" xs:block lg:hidden mb-0 text-[13px] text-gray-500">
                    مخاطبان
                  </p>
                </div>
              </div>

              <div>
                <h3 className=" text-sm text-gray-400 mt-7 mb-2">
                  مشخصات محصول
                </h3>
                <div className="min-w-[200px] mt-5 rounded-xl overflow-hidden border ">
                  <div className="bg-gray-100 p-3">
                    <p className="mb-0 text-sm text-gray-600">
                      لورم متن :
                      <small className="text-sm text-gray-800 font-bold ">
                        {" "}
                        ساختگی با تولید
                      </small>
                    </p>
                  </div>

                  <div className=" p-3">
                    <p className="mb-0 text-sm text-gray-600">
                      لورم ایپسوم متن :
                      <small className="text-sm text-gray-800 font-bold ">
                        {" "}
                        ساختگی با تولید
                      </small>
                    </p>
                  </div>

                  <div className="bg-gray-100 p-3">
                    <p className="mb-0 text-sm text-gray-600">
                      لورم :
                      <small className="text-sm text-gray-800 font-bold ">
                        {" "}
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
                        چاپ، و با استفاده{" "}
                      </small>
                    </p>
                  </div>

                  <div className=" p-3">
                    <p className="mb-0 text-sm text-gray-600">
                      لورم ایپسوم متن ساختگی :{" "}
                      <small className="text-sm text-gray-800 font-bold ">
                        {" "}
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم{" "}
                      </small>
                    </p>
                  </div>
                </div>{" "}
              </div>

              <div>
                <h3 className=" text-sm text-gray-400 mt-7 mb-2">
                  روش استفاده
                </h3>

                <div dangerouslySetInnerHTML={{ __html: product.summery }} />
              </div>
            </div>

            <div className="xs:block lg:hidden   sticky bottom-0 ">
              <div className="w-full bg-[#eeeeee] p-2 border-t-[2px] border-gray-200">
                <div className="py-4 flex ltr justify-between px-4">
                  <div className="flex justify-end rtl mt-2 mb-1">
                    {" "}
                    <p className="mb-0 text-gray-500  font-semibold">
                      <PersianNumber number={150000} style="text-xl" />
                    </p>
                    <small className="mr-1 mt-[6px] text-gray-500 ">
                      تومان
                    </small>
                  </div>
                  <button className="btn btn-primary w-fit py-3 px-7 text-sm">
                    افزودن به سبد{" "}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </>
  );
};

export default page;
