"use client";
import React, { useCallback, useEffect, useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
import {SlideshowLightbox, Image} from 'lightbox.js-react';
import 'lightbox.js-react/dist/index.css';

// Import Swiper styles
import "swiper/css";
import "swiper/css/grid";
import "swiper/css/pagination";
import "./styles.css";

import Image1 from "next/image";
// import required modules
import { Autoplay, Navigation, Pagination, Thumbs, Grid } from "swiper/modules";

type Images={
  carImgList:any,

}
export default function RowsSilder({carImgList}:Images) {
  

  const sliderRef: any = useRef(null);

  const onPrevSlide = useCallback(() => {
    if (!sliderRef.current) return;
    sliderRef.current.swiper.slidePrev();
  }, []);

  const onNextSlide = useCallback(() => {
    if (!sliderRef.current) return;
    sliderRef.current.swiper.slideNext();
  }, []);

  const [swiper, setSwiper] = useState<any>(null);

  const handleSwiperInit = (swiper: any) => {
    setSwiper(swiper);
  };

  let [isOpen, setIsOpen] = useState(false);  
  const imagesArray = carImgList.map((url:URL, i:number) => ({
    src: url,
    alt: i,
  }));
  
  return (
    <>
    
      <div className="warpper relative  m-auto flex items-center justify-center max-w-1 pb-20  md:px-0 md:pt-[30px]">
      
        <Swiper
          className="ImagesSwiper"
          spaceBetween={32}
          slidesPerView={4}
          onInit={handleSwiperInit}
          slidesPerGroup={2}
          navigation={false}
          autoplay={{
            delay: 3000,
            disableOnInteraction: false,
          }}
          grid={{
            rows: 2,
            fill: "row",
          }}
          pagination={{
            clickable: true,
          }}
          breakpoints={{
            360: {
              slidesPerView: 1,
              grid: {
                rows: 1,
                fill: "row",
              },
            },
            375: {
              slidesPerView: 1,
              grid: {
                rows: 1,
                fill: "row",
              },
            },
            393: {
              slidesPerView: 1,
              grid: {
                rows: 1,
                fill: "row",
              },
            },
            412: {
              slidesPerView: 1,
              grid: {
                rows: 1,
                fill: "row",
              },
            },

            414: {
              slidesPerView: 1,
              grid: {
                rows: 1,
                fill: "row",
              },
            },
            425: {
              slidesPerView: 1,
              grid: {
                rows: 1,
                fill: "row",
              },
            },
            640: {
              slidesPerView: 1,

              grid: {
                rows: 1,
                fill: "row",
              },
              pagination: {
                clickable: true,
              },
            },
            768: {
              slidesPerView: 3,

              grid: {
                rows: 2,
                fill: "row",
              },
              pagination: {
                clickable: true,
              },
            },
            1024: {
              slidesPerView: 4,

              grid: {
                rows: 2,
                fill: "row",
              },
              pagination: {
                clickable: true,
              },
            },
          }}
          modules={[Pagination, Thumbs, Grid, Autoplay, Navigation]}
        >
     
          {carImgList?.map((carImg:string, i:number) => (   
            <SwiperSlide key={i}>
              <div className="w-full">
                  <img alt={i+""} src={carImg} className="p-0 h-[250px]" onClick={() => {setIsOpen(true)}}/>
              </div>
            </SwiperSlide>
          ))}
          
           <SlideshowLightbox 
              images={imagesArray}
              showThumbnails={true} 
              open={isOpen} 
              lightboxIdentifier="lbox1"
              onClose={() =>{setIsOpen(false)}}>     
          </SlideshowLightbox>
        </Swiper>
        
        <div className="z-10 absolute xl:top-[-8%] md:top-[-10%]  xl:left-[-5%] sm:left-0 left-0 bottom-0 h-full flex items-center justify-between gap-4">
          <button
            onClick={() => swiper?.slidePrev()}
            className="p-2.5 md:p-3 flex items-center gap-2 bg-black rounded-full text-white"
            type="button"
          >
            <Image1
              className="h-4 w-4 rounded-full invert"
              src="/assets/arrow-left.svg"
              width={24}
              height={24}
              alt=""
            />
          </button>
        </div>

        <div className="z-10 absolute xl:top-[-8%]  md:top-[-10%] xl:right-[-5%] sm:right-0 right-0 bottom-0 h-full  flex items-center justify-between gap-4">
          <button
            onClick={() => swiper?.slideNext()}
            className="p-2.5 md:p-3 flex items-center gap-2 bg-black rounded-full text-white"
            type="button"
          >
            <Image1
              className="h-4 w-4 rounded-full invert "
              src="/assets/arrow-right.svg"
              width={24}
              height={24}
              alt=""
            />
          </button>
        </div>
      </div>
    </>
  );
}