/* eslint-disable tailwindcss/no-custom-classname */
/* eslint-disable react/no-array-index-key */

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "./carousel.css";

import React from "react";
import { Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

import { cn } from "@/libs/utils";

import LIcon from "../lucid-icon/lucid-icon";

export interface CarouselProps {
  navigation?: boolean;
  sliderPerView?: number;
  autoplay?: boolean;
  loop?: boolean;
  paginationClickable?: boolean;
  spaceBetween?: number;
  pagination?: boolean;
  navigationState?: "in" | "out";
  children: React.ReactNode;
  wrapperClassName?: React.ComponentProps<"div">["className"];
  className?: React.ComponentProps<"div">["className"];
  containerModifierClass?: string;
  initialSlide?: number;
}

const Carousel: React.FC<CarouselProps> = ({
  navigation = true,
  sliderPerView = 1,
  autoplay = false,
  loop = false,
  paginationClickable = true,
  navigationState = "in",
  wrapperClassName,
  className,
  children,
  pagination = true,
  spaceBetween = 0,
  containerModifierClass,
  initialSlide = 0,
}) => {
  return (
    <div className={cn("relative", wrapperClassName)}>
      <Swiper
        containerModifierClass={cn(containerModifierClass)}
        pagination={
          pagination
            ? {
                clickable: paginationClickable,
                dynamicBullets: true,
                dynamicMainBullets: 4,
              }
            : false
        }
        autoplay={autoplay}
        loop={loop}
        spaceBetween={spaceBetween}
        slidesPerView={sliderPerView}
        modules={[Pagination, Navigation]}
        navigation={{
          enabled: navigation,
          prevEl: containerModifierClass
            ? `.${containerModifierClass}initialized + .swiper-navigation .prev`
            : ".prev",
          nextEl: containerModifierClass
            ? `.${containerModifierClass}initialized + .swiper-navigation .next`
            : ".next",
        }}
        className={cn("", className)}
        initialSlide={initialSlide}
      >
        {React.Children.map(children, (child) => {
          if (React.isValidElement(child)) {
            return (
              <SwiperSlide key={child.key} className="">
                {child}
              </SwiperSlide>
            );
          }
          return null;
        })}
      </Swiper>
      {navigation && (
        <div className="swiper-navigation">
          <div className={`prev prev-${navigationState}`}>
            <LIcon name="ArrowLeft" />
          </div>
          <div className={`next next-${navigationState}`}>
            <LIcon name="ArrowRight" />
          </div>
        </div>
      )}
    </div>
  );
};

export { Carousel };