import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Navigation, FreeMode, Thumbs } from "swiper/modules";
import { useState } from "react";
import type { Swiper as SwiperClass } from "swiper";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import "./Description.css";
import { useMediaQuery } from "@mui/material";
import { PLACEHOLDER_IMAGE_PATH } from "../../../../../app/slices/common/imageConstants";

export const DescriptionSwiper = ({ productData }: any) => {
  const isLargeScreen = useMediaQuery("(min-width:560px)");
  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperClass | null>(null);
  
  // Use placeholder if images are empty or null
  const imagesToDisplay = productData?.images && productData?.images?.length > 0 
    ? productData.images 
    : [PLACEHOLDER_IMAGE_PATH];
  
  // Check if using placeholder
  const isUsingPlaceholder = !productData?.images || productData?.images?.length === 0;
  
  return (
    <>
      <div className="thumbs-slider">
        <Swiper
          modules={[Navigation, Pagination, Thumbs]}
          spaceBetween={10}
          freeMode={true}
          navigation={{
            nextEl: `${isLargeScreen ? ".thumbs-next" : ".thumbs-nexts"}`,
            prevEl: ".thumbs-prev",
          }}
          pagination={{
            el: ".sw-dots",
            clickable: true,
          }}
          thumbs={thumbsSwiper ? { swiper: thumbsSwiper } : undefined}
          className="tf-product-media-main"
          id="gallery-swiper-started"
        >
          {imagesToDisplay?.map((src: any, index: any) => (
            <SwiperSlide key={index}>
              <a
                // href={src}
                target="_blank"
                rel="noopener noreferrer"
                className="item"
              >
                <img
                  className="tf-image-zoom lazyload"
                  data-zoom={isUsingPlaceholder ? src : `${process.env.REACT_APP_API_URL}${src}`}
                  src={isUsingPlaceholder ? src : `${process.env.REACT_APP_API_URL}${src}`}
                  data-src={isUsingPlaceholder ? src : `${process.env.REACT_APP_API_URL}${src}`}
                  alt={`Product image ${index + 1}`}
                />
              </a>
            </SwiperSlide>
          ))}
        </Swiper>

        <div
          className={`swiper-button-next${
            isLargeScreen ? " thumbs-next" : " thumbs-nexts "
          } button-style-arrow1`}
        ></div>

        <div className="swiper-button-prev thumbs-prev button-style-arrow1"></div>

        {/* Thumbs Swiper */}
        {isLargeScreen && (
          <Swiper
            modules={[FreeMode, Navigation, Thumbs]}
            onSwiper={setThumbsSwiper}
            spaceBetween={10}
            slidesPerView={4}
            // slidesPerView={
            //   productData && productData?.images?.length === 1
            //     ? 4
            //     : productData?.images?.length
            // }
            direction="vertical"
            freeMode={true}
            watchSlidesProgress={true}
            className="tf-product-media-thumbs small-thumb-swiper"
          >
            {imagesToDisplay?.map((src: any, index: any) => (
              <SwiperSlide key={index}>
                <div className="item">
                  <img
                    className="lazyload"
                    src={isUsingPlaceholder ? src : `${process.env.REACT_APP_API_URL}${src}`}
                    data-src={isUsingPlaceholder ? src : `${process.env.REACT_APP_API_URL}${src}`}
                    alt={`Thumbnail image ${index + 1}`}
                  />
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        )}
      </div>
    </>
  );
};