'use client';

import React, { useCallback, useMemo, useState } from 'react';
import { twMerge } from 'tailwind-merge';

import SlideCarousel from '@/components/slideCarousel/SlideCarousel';

export type SidebarCarouselConfig<K extends PropertyKey = string> = {
  id?: string;
  slides: Record<K, React.ReactNode>;
  slideOrder: K[];
  defaultSlide?: K;
};

export type Props = React.ComponentProps<typeof SlideCarousel> &
  Partial<SidebarCarouselConfig> & {
    onSlideInit?: (id: string, index: number) => void;
    onSlideChange?: (id: string, index: number) => void;
  };

const SidebarCarousel: React.FC<Props> = (props) => {
  const {
    className,
    navClassName,
    slides = {},
    slideOrder = [],
    defaultSlide = slideOrder[0],
    id: carouselId,
    onSlideInit,
    onSlideChange,
    ...restProps
  } = props;

  const [currentSlide, setCurrentSlide] = useState(
    defaultSlide ?? slideOrder[0]
  );
  const defaultIndex = useMemo(
    () => slideOrder.indexOf(currentSlide),
    [currentSlide, slideOrder]
  );

  const handleIndexInit = useCallback(
    (index: number, id?: string) => {
      const slide = id || slideOrder[index];
      onSlideInit?.(slide, index);
    },
    [slideOrder, onSlideInit]
  );

  const handleIndexChange = useCallback(
    (index: number, id?: string) => {
      const slide = id || slideOrder[index];
      setCurrentSlide(slide);
      onSlideChange?.(slide, index);
    },
    [slideOrder, onSlideChange]
  );

  return (
    <SlideCarousel
      className={className}
      slides={slides}
      slideOrder={slideOrder}
      defaultIndex={defaultIndex}
      navClassName={twMerge(
        '[@media(min-height:1081px)]:bottom-10',
        'pointer-events-auto drop-shadow-promo-carousel-nav',
        'before:absolute before:inset-0 before:transition before:duration-150 before:opacity-0',
        'hover:before:opacity-100 before:bg-linear-to-t before:from-tertiary/40',
        navClassName
      )}
      onIndexInit={onSlideInit && handleIndexInit}
      onIndexChange={handleIndexChange}
      {...restProps}
    />
  );
};

export default SidebarCarousel;