"use client"

import { useEffect, useState } from "react"
import "swiper/css"
import "swiper/css/thumbs"
import "swiper/css/free-mode"
import { Controller, Thumbs, FreeMode, Mousewheel } from "swiper/modules"
import { Swiper, SwiperSlide } from "swiper/react"
import Image from "next/image"
import { Popover } from "antd"
import { TooltipPlacement } from "antd/es/tooltip"

type IProps = {
  images: Array<string>
  className?: string
  isShowPopoverThumbnail?: boolean
}

export default function CarouselImage({ images, className, isShowPopoverThumbnail }: IProps) {
  const [mainSwiper, setMainSwiper] = useState<any>(null)
  const [thumbSwiper, setThumbSwiper] = useState<any>(null)
  const [activeIndex, setActiveIndex] = useState(0)

  const [placement, setPlacement] = useState<TooltipPlacement>("rightTop")
  const [widthCol, setWidthCol] = useState<number>(400)

  useEffect(() => {
    const updateTabPosition = () => {
      setPlacement(window.innerWidth >= 768 ? "rightTop" : "top")
      setWidthCol(window.innerWidth >= 768 ? 400 : 300)
    }
    updateTabPosition()
    window.addEventListener("resize", updateTabPosition)

    return () => {
      window.removeEventListener("resize", updateTabPosition)
    }
  }, [])

  return (
    <div className={className}>
      <div className="relative">
        <Swiper
          onSwiper={(swiper: any) => setMainSwiper(swiper)}
          onSlideChange={(swiper: any) => {
            thumbSwiper.slideTo(swiper?.activeIndex)
            setActiveIndex(swiper?.activeIndex)
          }}
          mousewheel={{
            forceToAxis: true,
          }}
          thumbs={thumbSwiper ? { swiper: thumbSwiper } : undefined}
          modules={[Controller, FreeMode, Mousewheel]}>
          {images.map((image, index) => (
            <SwiperSlide key={index}>
              {isShowPopoverThumbnail ? (
                <Popover
                  content={
                    <img
                      src={image || "/img/default_image.jpg"}
                      alt={`Slide ${index + 1}`}
                      style={{
                        width: widthCol,
                        height: "auto",
                        borderRadius: 8,
                        boxShadow: "0 4px 8px rgba(0,0,0,0.2)",
                      }}
                    />
                  }
                  placement={placement}
                  trigger="hover"
                  mouseEnterDelay={0.2}
                  overlayStyle={{ pointerEvents: "none" }}>
                  <Image
                    src={image}
                    alt={`Slide ${index + 1}`}
                    width={276}
                    height={301}
                    className="w-full aspect-[6/5] object-cover"
                    onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
                  />
                </Popover>
              ) : (
                <Image
                  src={image}
                  alt={`Slide ${index + 1}`}
                  width={276}
                  height={301}
                  className="w-full aspect-[6/5] object-cover"
                  onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
                />
              )}
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
      <Swiper
        onSwiper={(swiper: any) => setThumbSwiper(swiper)}
        slidesPerView="auto"
        spaceBetween={4}
        watchSlidesProgress={true}
        centeredSlides={false}
        centeredSlidesBounds={false}
        mousewheel={{
          forceToAxis: true,
        }}
        freeMode={true}
        touchRatio={0.2}
        slideToClickedSlide={true}
        modules={[Controller, Thumbs, FreeMode, Mousewheel]}
        className="mt-3">
        {images.map((image, index) => (
          <SwiperSlide
            key={index}
            className="!w-11 !h-12">
            <button
              aria-label="open modal"
              className="relative w-full h-full cursor-pointer"
              onClick={() => {
                if (mainSwiper) {
                  mainSwiper?.slideTo(index)
                  setActiveIndex(index)
                }
              }}>
              <span
                className={`absolute top-0 left-0 w-full h-full cursor-pointer transition-colors ${
                  index !== activeIndex ? "bg-[rgba(255,255,255,0.4)]" : "bg-transparent"
                }`}></span>
              <Image
                src={image}
                alt={`Thumbnail ${index + 1}`}
                width={148}
                height={148}
                className="object-cover w-full h-full"
                onError={(e) => (e.currentTarget.src = "/img/default_image.jpg")}
              />
            </button>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  )
}