import {
  Carousel,
  type CarouselItem,
  type CarouselInterface,
  type CarouselOptions,
  type IndicatorItem,
  Modal,
  type ModalInterface,
} from "flowbite";

class CustomCarousel extends HTMLElement {
  _slide: boolean;
  _items: CarouselItem[];
  _options: CarouselOptions;
  _carousel: CarouselInterface;

  _modalEl: HTMLElement;
  _modal: ModalInterface;

  constructor() {
    super();

    this._slide = this.getAttribute("data-custom-carousel") === "slide";
    this._items = this._getItems();
    this._options = this._getOptions();
    this._carousel = new Carousel(this, this._items, this._options);

    if (this._slide && this._items.length > 0) this._carousel.cycle();

    this._modalEl =
      (this.querySelector("[data-custom-carousel-modal]") as HTMLElement) ||
      undefined;
    this._modal = new Modal(this._modalEl);

    window.addEventListener("load", this._attachHandlers);
  }

  _getItems = (): CarouselItem[] => {
    let customItems =
      this.querySelectorAll("[data-custom-carousel-item]") || [];

    return Array.from(customItems).map((item): CarouselItem => {
      return {
        el: item as HTMLElement,
        position: Number(item.getAttribute("data-custom-carousel-item")),
      };
    });
  };

  _getOptions = (): CarouselOptions => {
    let customIndicators =
      this.querySelectorAll("[data-custom-carousel-slide-to]") || [];

    return {
      defaultPosition: 0,
      interval: this.dataset.customCarouselInterval
        ? Number(this.dataset.customCarouselInterval)
        : 8000,

      indicators: {
        activeClasses: "border-2 border-caperren-green bg-black",
        inactiveClasses: "bg-caperren-green/40 hover:bg-caperren-green-light",
        items: Array.from(customIndicators).map((item): IndicatorItem => {
          return {
            el: item as HTMLElement,
            position: Number(
              item.getAttribute("data-custom-carousel-slide-to"),
            ),
          };
        }),
      },
    };
  };

  _attachHandlers = (): void => {
    // Carousel controls
    this.querySelector("[data-custom-carousel-next]")?.addEventListener(
      "click",
      () => this._carousel.next(),
    );
    this.querySelector("[data-custom-carousel-prev]")?.addEventListener(
      "click",
      () => this._carousel.prev(),
    );

    // Close fullscreen modal
    this._modalEl
      .querySelector("[data-custom-carousel-modal-hide]")
      ?.addEventListener("click", () => this._modal.hide());

    // Click to open fullscreen modal
    this._items.forEach((item) => {
      item.el.addEventListener("click", () => {
        const imgCloned = item.el.querySelector("img")?.cloneNode() as Node;
        const imageDiv =
          (this._modalEl.querySelector(
            "[data-custom-carousel-modal-image]",
          ) as HTMLElement) || undefined;

        imageDiv.innerHTML = "";
        imageDiv?.appendChild(imgCloned);

        this._modal.show();
      });
    });
  };
}

customElements.define("custom-carousel", CustomCarousel);