/**
 * CarouselElement Component
 *
 * Carousel element - slideshow of images with navigation.
 * Renders with unified wrapper styling + content.
 */

import React, { useMemo } from 'react';
import type { CSSProperties } from 'react';
import type { CanvasElement, CarouselSlide } from '../../../types/constructor';
import { resolveAssetPlaybackUrl } from '../../../lib/assetUrl';
import { getFontByKey, getFontStyle } from '../../../lib/fonts';

interface CarouselElementProps {
  element: CanvasElement;
  resolveUrl?: (url: string | undefined) => string;
  className: string;
  style: CSSProperties;
}

const CarouselElement: React.FC<CarouselElementProps> = ({
  element,
  resolveUrl,
  className,
  style,
}) => {
  const resolve = resolveUrl ?? resolveAssetPlaybackUrl;
  const slides: CarouselSlide[] = element.carouselSlides || [];
  const firstSlide = slides[0];

  // Resolve font key to full CSS style (including fontStretch for condensed variants)
  const captionFontStyle = useMemo(() => {
    const fontKey = element.carouselCaptionFontFamily;
    if (!fontKey) return {};
    const font = getFontByKey(fontKey);
    return font ? getFontStyle(font) : { fontFamily: fontKey };
  }, [element.carouselCaptionFontFamily]);

  return (
    <div className={className} style={style}>
      <div className='relative w-full h-full min-w-[120px] min-h-[80px]'>
        {firstSlide?.imageUrl && (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={resolve(firstSlide.imageUrl)}
            alt={firstSlide.caption || 'Carousel slide'}
            className='w-full h-full object-cover rounded'
            draggable={false}
          />
        )}
        {/* Carousel navigation overlay */}
        <div className='absolute bottom-2 left-0 right-0 flex justify-center gap-1'>
          {slides.map((slide, index) => (
            <div
              key={slide.id}
              className={`w-2 h-2 rounded-full ${
                index === 0 ? 'bg-white' : 'bg-white/50'
              }`}
            />
          ))}
        </div>
        {/* Prev/Next icons if configured */}
        {element.carouselPrevIconUrl && (
          <div className='absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8'>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={resolve(element.carouselPrevIconUrl)}
              alt='Previous'
              className='w-full h-full object-contain'
              draggable={false}
            />
          </div>
        )}
        {element.carouselNextIconUrl && (
          <div className='absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8'>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={resolve(element.carouselNextIconUrl)}
              alt='Next'
              className='w-full h-full object-contain'
              draggable={false}
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default CarouselElement;
