import React, { useEffect } from "react";
import { useState } from "react";
import { useWindowSize } from "@/customHook/useWindowSize";
import {
  MagnifierContainer,
  MagnifierPreview,
  MagnifierZoom,
  SideBySideMagnifier,
} from "react-image-magnifiers";

import { Swiper, SwiperSlide } from "swiper/react";
// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import "swiper/css/pagination";

import style from "./sliderImage.module.css";

import { FreeMode, Navigation, Thumbs, Pagination } from "swiper";
import Image from "next/image";
import NextImage from "@/other/NextImage";

const SliderImage = (props) => {
  const [productImages, setProductImages] = useState([]);
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
  const { width } = useWindowSize();

  useEffect(() => {
    props.images && setProductImages(props.images);
  }, [props.images]);

  return (
    <>
      <div className={style.slider_section}>
        <div className={style.slider_image}>
          {productImages.length > 0 && (
            <Swiper
              spaceBetween={10}
              navigation={true}
              watchOverflow={true}
              watchSlidesProgress={true}
              preventInteractionOnTransition={true}
              thumbs={{
                swiper:
                  thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
              }}
              pagination={{
                clickable: true,
              }}
              breakpoints={{
                768: {
                  pagination: false,
                },
                0: {
                  pagination: {
                    clickable: true,
                  },
                },
              }}
              modules={[FreeMode, Navigation, Thumbs, Pagination]}
              className={style.mySwiper2}
            >
              {productImages.map((item, index) => (
                <SwiperSlide
                  className={style["swiper-slide"]}
                  key={`${item.image}__${index}`}
                >
                  <div className={style.slider_zoom_main}>
                    <MagnifierContainer>
                      <div className={style.image}>
                        <MagnifierPreview
                          imageSrc={item.image}
                          imageAlt="No Image"
                        />
                      </div>
                      <MagnifierZoom
                        className={style.zoom}
                        imageSrc={item.image}
                      />
                    </MagnifierContainer>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          )}
        </div>
        <div className={style.slider_image_select}>
          {width &&
            width > 768 &&
            productImages &&
            productImages.length > 0 && (
              <Swiper
                onSwiper={setThumbsSwiper}
                spaceBetween={10}
                slidesPerView={4}
                freeMode={true}
                modules={[FreeMode, Navigation, Thumbs]}
                className={style.mySwiper}
              >
                {productImages.map((item, index) => (
                  <SwiperSlide
                    className={style["swiper-slide2"]}
                    key={`${item.image}___${index}`}
                  >
                    <NextImage src={item.image} alt="Image" fill />
                  </SwiperSlide>
                ))}
              </Swiper>
            )}
        </div>
      </div>
      {productImages && productImages.length == 0 && (
        <NextImage src={""} altImage="Image" />
      )}
    </>
  );
};

export default SliderImage;
