"use client";

import cx from "classnames";
import type { HTMLAttributes, ReactElement, ReactNode } from "react";
import React from "react";
import { useStatic } from "@/utils/hooks";
import { Controls } from "../Controls";
import CarouselStatic from "./Carousel.static";
import { CarouselItem } from "./CarouselItem";
import {
  CLASS_BLEED_RIGHT_NO_LEFT,
  CLASS_CONTROLS,
  CLASS_DOTS,
  CLASS_NAVIGATION,
  CLASS_NEXT,
  CLASS_PREV,
  CLASS_ROOT,
  CLASS_SCROLLBAR,
  CLASS_SCROLLBAR_DRAG,
  CLASS_TRACK,
  CLASS_VIEWPORT,
  CLASS_VIEWPORT_WRAPPER,
} from "./constants";

type CarouselRenderItem<T> = (item: T, index: number) => ReactNode;

interface CarouselProps<T = ReactNode> extends HTMLAttributes<HTMLDivElement> {
  /** Swiper.js (https://swiperjs.com/) options object */
  swiperOptions?: Record<string, any>;
  /** Carousel items */
  items: T[];
  /** Render carousel item content */
  renderItems?: CarouselRenderItem<T>;
  /** Always show scrollbar and hide dots */
  showScrollbar?: boolean;
  /** Make carousel bleed to the right edge of screen while keeping left aligned with container */
  bleedRight?: boolean;
  /** Make carousel bleed right from its root edge without bleeding left */
  bleedRightNoLeft?: boolean;
  className?: string;
}

const isCarouselItemElement = (
  item: ReactNode,
): item is ReactElement<React.ComponentProps<typeof CarouselItem>> =>
  React.isValidElement(item) && item.type === CarouselItem;

const Carousel = <T,>({
  className,
  swiperOptions,
  items,
  renderItems,
  showScrollbar = false,
  bleedRight = false,
  bleedRightNoLeft = false,
  ...other
}: CarouselProps<T>) => {
  const [carouselRef] = useStatic(CarouselStatic);
  const { ["data-swiper-options"]: _dataSwiperOptionsAttr, ...domProps } =
    other as HTMLAttributes<HTMLDivElement> & {
      "data-swiper-options"?: string;
    };

  const carouselItems = items.map((item, i) => {
    const content = renderItems ? renderItems(item, i) : (item as ReactNode);

    if (isCarouselItemElement(content)) {
      return React.cloneElement(content, {
        key: content.key ?? i.toString(),
      });
    }

    return <CarouselItem key={i.toString()}>{content}</CarouselItem>;
  });

  const classes = cx(CLASS_ROOT, className, {
    [`${CLASS_ROOT}--scrollbar`]: showScrollbar,
    [`${CLASS_ROOT}--bleed-right`]: bleedRight,
    [CLASS_BLEED_RIGHT_NO_LEFT]: bleedRightNoLeft,
  });

  const elementClasses = {
    navigation: cx(CLASS_NAVIGATION),
    controls: cx(CLASS_CONTROLS),
    prev: cx(CLASS_PREV),
    next: cx(CLASS_NEXT),
    dots: cx(CLASS_DOTS),
  };

  const customSwiperOptions = showScrollbar
    ? {
        pagination: {
          enabled: false,
        },
        ...swiperOptions,
      }
    : swiperOptions;

  return (
    <div
      className={classes}
      ref={carouselRef}
      data-carousel
      {...(showScrollbar || customSwiperOptions
        ? { "data-swiper-options": JSON.stringify(customSwiperOptions) }
        : {})}
      {...domProps}
    >
      <div className={CLASS_VIEWPORT_WRAPPER}>
        <div className={CLASS_VIEWPORT}>
          <div className={CLASS_TRACK}>{carouselItems}</div>
        </div>
      </div>

      {!showScrollbar && (
        <div className={elementClasses.navigation}>
          <div role="tablist" className={elementClasses.dots} />
          <div className={elementClasses.controls}>
            <Controls
              className={elementClasses.prev}
              icon="chevron-left"
              aria-label="Naspäť"
            />
            <Controls
              className={elementClasses.next}
              icon="chevron-right"
              aria-label="Ďalej"
            />
          </div>
        </div>
      )}

      {showScrollbar && (
        <div className={CLASS_SCROLLBAR}>
          <div className={CLASS_SCROLLBAR_DRAG} />
        </div>
      )}
    </div>
  );
};

Carousel.displayName = "Carousel";

export type { CarouselProps };
export { Carousel };