import TimerDownBlog from "@comp/TimerDown/TimerDown";
import Image from "next/image";
import Link from "next/link";
import hyphenateString from "plugins/HyphenateString/page";
import PersianNumber from "plugins/PersianNumber";
import React, { useEffect, useState } from "react";

const SliderProductsOffer = ({ data }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  // Filter to get the latest 10 products
  const latestProducts = data?.products?.slice(-10) || [];

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % latestProducts.length);
    }, 10000); // 10 seconds

    return () => clearInterval(interval); // Clean up on unmount
  }, [latestProducts.length]);

  const handleDotClick = (index) => {
    setCurrentIndex(index);
  };

  return (
    <div className="sticky top-20">
      {" "}
      {data?.products?.map((e, index) => (
        <div
          key={index}
          className={`slider-item ${
            index === currentIndex ? "block" : "hidden"
          }`}
        >
          <Link href={`/products/${e.id}/${hyphenateString(e.persianName)}`}>
            <div className="bg-contact-us h-[260px] rounded-2xl">
              <div>
                <div className="flex p-3">
                  <div className="w-3/12">
                    <div className="bg-white h-20 w-20 rounded-2xl  overflow-hidden">
                      {/* Uncomment and adjust the Image component as needed */}
                      <Image
                        src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${e?.mainImage}`}
                        width={350}
                        height={350}
                        className="mx-auto !object-cover w-20 h-20"
                        alt={e?.persianName}
                        priority
                        loading="eager"
                      />
                    </div>
                  </div>

                  <div className="relative w-9/12 px-2 mt-4">
                    <p className="mb-0 text-white h-[50px] overflow-hidden font-medium px-3">
                      {e?.persianName}
                    </p>
                  </div>
                </div>

                <div>
                  <p className="mb-0 text-center">
                    <PersianNumber
                      number={(e?.cost / 10).toLocaleString()}
                      style="text-white !text-[25px] font-medium"
                    />
                    <small className="mx-1 text-white">تومان</small>
                  </p>
                  <div className="flex justify-center">
                    <div className="bg-white rounded-full py-1 px-2 ml-2">
                      <p className="mb-0 text-[11px] text-green-900 font-medium">
                        تضمین بهترین قیمت
                      </p>
                    </div>
                  </div>
                </div>

                <div className="flex justify-center">
                  <div className="relative bottom-[-70px]">
                    <TimerDownBlog />
                  </div>
                </div>
              </div>

              <div className="w-full">
                <svg
                  className="absolute h-[20px] block top-0 rotate-90 mr-[-38px] mt-[168px]"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 740 155.61"
                >
                  <path
                    fill="white"
                    d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
                  ></path>
                </svg>
                <div></div>
              </div>

              <div className="flex justify-end w-full">
                <svg
                  className="absolute h-[20px] block top-0 -rotate-90 ml-[-38px] mt-[168px]"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 740 155.61"
                >
                  <path
                    fill="white"
                    d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
                  ></path>
                </svg>
                <div></div>
              </div>

              <div className="absolute w-full mt-[13px]">
                <div className="h-3 w-full border-t-[4px] opacity-15 border-white border-dashed"></div>
              </div>
            </div>
          </Link>
        </div>
      ))}
      <div className="flex justify-center mt-2">
        {latestProducts.map((_, index) => (
          <div
            key={index}
            onClick={() => handleDotClick(index)}
            className={`w-3 h-3 mx-[1px] mt-1 rounded-full cursor-pointer ${
              index === currentIndex
                ? "bg-contact-us w-7"
                : "bg-primary-200 opacity-80"
            }`}
          ></div>
        ))}
      </div>
    </div>
  );
};

export default SliderProductsOffer;
