"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import {
  Navigation,
  Pagination,
  Autoplay,
  Grid,
  EffectCoverflow,
} from "swiper/modules";
import CustomNavigation from "./CustomNavigation";
import React, { ReactNode, useRef, useState } from "react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "swiper/css/autoplay";
import "swiper/css/grid";
import "swiper/css/effect-coverflow";

import "@/styles/slider.css";
import {
  Swiper as SwiperType,
  SwiperModule,
  SwiperOptions,
} from "swiper/types";
import useWindowWidth from "@/hooks/useWindowWidth";
import { useEqualHeight } from "@/hooks/useEqualHeight";
interface SwiperBreakpoints {
  [width: number]: SwiperOptions;
  [ratio: string]: SwiperOptions;
}
interface AppSwiperProps {
  children: ReactNode;
  className?: string;
  extraSettings?: SwiperOptions;
  extraModules?: SwiperModule[];
  slideClass?: string;
  spaceBetween?: string | number;
  onSwiperSlideChange?: (activeIndex: number) => void;
  showCustomArrows?: boolean;
  hideArrows?: boolean;
  withPagination?: boolean;
  swiperClassName?: string;
  isEqualHeight?: boolean;
  breakpoints?: SwiperBreakpoints;
  setSwiper?: (swiper: SwiperType) => void;
}

const AppSwiper: React.FC<AppSwiperProps> = ({
  children,
  className,
  extraSettings,
  extraModules = [],
  hideArrows = true,
  slideClass,
  onSwiperSlideChange,
  showCustomArrows = false,
  withPagination = false,
  swiperClassName,
  spaceBetween = 0,
  isEqualHeight = false,
  breakpoints,
  setSwiper,
}) => {
  const windowWidth = useWindowWidth();
  const swiperRef = useRef<any | null>(null);
  const [disablePrev, setDisablePrev] = useState(true);
  const [disableNext, setDisableNext] = useState(false);

  const options: SwiperOptions = {
    spaceBetween: `${spaceBetween}`,
    loop: true,
    slidesPerView: "auto",
    navigation: { enabled: true },
    ...extraSettings,
  };

  const handleSlideChange = (swiper: SwiperType) => {
    if (onSwiperSlideChange) onSwiperSlideChange(swiper.realIndex || 0);
    setDisablePrev(swiper.isBeginning);
    setDisableNext(swiper.isEnd);
  };

  useEqualHeight(swiperRef, !!isEqualHeight, [children, windowWidth]);

  return (
    <div
      className={`relative w-full ${
        hideArrows ? "hide-arrows" : ""
      } ${className}`}
    >
      {showCustomArrows && (
        <CustomNavigation
          disableNext={disableNext}
          disablePrev={disablePrev}
          swiperRef={swiperRef}
        />
      )}
      <Swiper
        spaceBetween={spaceBetween}
        ref={swiperRef}
        className={swiperClassName}
        modules={[
          Navigation,
          Pagination,
          Autoplay,
          Grid,
          EffectCoverflow,
          ...extraModules,
        ]}
        onSlideChange={handleSlideChange}
        pagination={withPagination ? { clickable: true } : false}
        onBeforeInit={(swiper) => {
          swiperRef.current = swiper;
          if (setSwiper) setSwiper(swiper);
        }}
        breakpoints={breakpoints}
        {...options}
      >
        {React.Children?.map(children, (child, index) => (
          <SwiperSlide
            className={`${slideClass} ${
              extraSettings?.autoHeight ? "!h-full" : ""
            }`}
            key={`slider_${index}`}
          >
            {({ isActive }) => (
              <div
                style={{
                  transform: `scale(${
                    isActive &&
                    windowWidth > 992 &&
                    extraSettings?.centeredSlides
                      ? 1.1
                      : 1
                  })`,
                  transition: "transform 0.3s ease",
                  width: "100%",
                  height: "100%",
                  ...(extraSettings?.autoHeight == true && {
                    display: "flex",
                    flexDirection: "column",
                  }),
                }}
              >
                {child}
              </div>
            )}
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default AppSwiper;