'use client';
import ChevronLeft from '@dndbeyond/fontawesome-cache/svgs/regular/chevron-left.svg';
import ChevronRight from '@dndbeyond/fontawesome-cache/svgs/regular/chevron-right.svg';
import clsx from 'clsx';
import useEmblaCarousel from 'embla-carousel-react';
import { useCallback, useEffect, useState } from 'react';
import Markdown from 'react-markdown';
import { getItemAttributes, getSubElementAttributes } from '../../../bi/helpers';
import styles from './PromoCarousel.module.css';

type PromoCarouselType = {
  promotions: {
    text: string;
    color?: string;
  }[];
};

export const PromoCarousel = ({ promotions }: PromoCarouselType) => {
  const [emblaRef, emblaApi] = useEmblaCarousel();
  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
  const [activeSlide, setActiveSlide] = useState(0);

  const onPrevButtonClick = () => {
    emblaApi?.scrollPrev();
    determineSliderPosition();
    if (emblaApi) setActiveSlide(emblaApi.selectedScrollSnap());
  };

  const onNextButtonClick = () => {
    emblaApi?.scrollNext();
    determineSliderPosition();
    if (emblaApi) setActiveSlide(emblaApi.selectedScrollSnap());
  };

  const determineSliderPosition = useCallback(() => {
    setPrevBtnDisabled(!emblaApi?.canScrollPrev());
    setNextBtnDisabled(!emblaApi?.canScrollNext());
  }, [emblaApi]);

  useEffect(() => {
    if (emblaApi) setActiveSlide(emblaApi.selectedScrollSnap());
    determineSliderPosition();
  }, [determineSliderPosition]);

  return (
    <div className={styles.carouselContainer}>
      <button
        onClick={onPrevButtonClick}
        className={clsx(
          styles.navigationButton,
          prevBtnDisabled && styles.navigationButtonDisabled,
          promotions.length === 1 && styles.navigationButtonHidden,
        )}
        disabled={prevBtnDisabled}
        {...getItemAttributes('Previous', 'button', 'scroll', undefined, undefined)}
      >
        <ChevronLeft />
      </button>
      <div
        className={styles.carousel}
        ref={emblaRef}
        {...getSubElementAttributes('Promo Carousel', 'main tile', undefined)}
      >
        <div className={styles.carouselScrollContainer}>
          {promotions.map((promo, index) => (
            // React versions below 19 remove the 'inert' attribute when provided as a boolean. Passing it as a string "true" as a workaround.
            <div
              inert={activeSlide !== index && ('inert' as unknown as boolean)}
              key={index + promo.text}
              className={styles.slide}
            >
              <Markdown>{promo.text}</Markdown>
            </div>
          ))}
        </div>
      </div>
      <button
        onClick={onNextButtonClick}
        className={clsx(
          styles.navigationButton,
          nextBtnDisabled && styles.navigationButtonDisabled,
          promotions.length === 1 && styles.navigationButtonHidden,
        )}
        disabled={nextBtnDisabled}
        {...getItemAttributes('Next', 'button', 'scroll', undefined, undefined)}
      >
        <ChevronRight />
      </button>
    </div>
  );
};
