/**
 * CarouselSettingsSectionCompact
 *
 * Compact carousel element settings for constructor sidebar.
 * Navigation icons and slide management.
 */

import React from 'react';
import type { CarouselSlide, AssetOption } from '../../types/constructor';
import { addFallbackAssetOption } from '../../lib/constructorHelpers';
import { FONT_OPTIONS } from '../../lib/fonts';

interface CarouselSettingsSectionCompactProps {
  carouselSlides: CarouselSlide[];
  carouselPrevIconUrl: string;
  carouselNextIconUrl: string;
  carouselCaptionFontFamily: string;
  iconAssetOptions: AssetOption[];
  imageAssetOptions: AssetOption[];
  onUpdateElement: (patch: {
    carouselPrevIconUrl?: string;
    carouselNextIconUrl?: string;
    carouselCaptionFontFamily?: string;
  }) => void;
  onAddSlide: () => void;
  onUpdateSlide: (slideId: string, patch: Partial<CarouselSlide>) => void;
  onRemoveSlide: (slideId: string) => void;
}

const CarouselSettingsSectionCompact: React.FC<
  CarouselSettingsSectionCompactProps
> = ({
  carouselSlides,
  carouselPrevIconUrl,
  carouselNextIconUrl,
  carouselCaptionFontFamily,
  iconAssetOptions,
  imageAssetOptions,
  onUpdateElement,
  onAddSlide,
  onUpdateSlide,
  onRemoveSlide,
}) => {
  return (
    <div className='space-y-2'>
      <div className='rounded border border-gray-200 p-2 space-y-2'>
        <p className='text-[11px] font-semibold text-gray-700'>
          Navigation icons
        </p>

        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={carouselPrevIconUrl}
          onChange={(event) =>
            onUpdateElement({ carouselPrevIconUrl: event.target.value })
          }
        >
          <option value=''>Previous icon</option>
          {addFallbackAssetOption(
            iconAssetOptions,
            carouselPrevIconUrl,
            `Current prev icon · ${carouselPrevIconUrl}`,
          ).map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>

        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={carouselNextIconUrl}
          onChange={(event) =>
            onUpdateElement({ carouselNextIconUrl: event.target.value })
          }
        >
          <option value=''>Next icon</option>
          {addFallbackAssetOption(
            iconAssetOptions,
            carouselNextIconUrl,
            `Current next icon · ${carouselNextIconUrl}`,
          ).map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>

        <div>
          <label className='text-[10px] text-gray-600'>Caption font:</label>
          <select
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={carouselCaptionFontFamily}
            onChange={(event) =>
              onUpdateElement({ carouselCaptionFontFamily: event.target.value })
            }
          >
            <option value=''>Not set</option>
            {FONT_OPTIONS.map((font) => (
              <option key={font.key} value={font.key}>
                {font.label}
              </option>
            ))}
          </select>
        </div>
      </div>

      <div className='flex items-center justify-between'>
        <p className='text-[11px] font-semibold text-gray-600'>
          Carousel slides
        </p>
        <button
          type='button'
          className='text-xs text-blue-700 hover:underline'
          onClick={onAddSlide}
        >
          + Add slide
        </button>
      </div>

      {carouselSlides.map((slide, index) => (
        <div
          key={slide.id}
          className='rounded border border-gray-200 p-2 space-y-2'
        >
          <div className='flex items-center justify-between'>
            <p className='text-[11px] font-semibold text-gray-700'>
              Slide {index + 1}
            </p>
            <button
              type='button'
              className='text-xs text-red-600 hover:underline'
              onClick={() => onRemoveSlide(slide.id)}
            >
              Remove
            </button>
          </div>

          <select
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            value={slide.imageUrl}
            onChange={(event) =>
              onUpdateSlide(slide.id, { imageUrl: event.target.value })
            }
          >
            <option value=''>Image asset</option>
            {addFallbackAssetOption(
              imageAssetOptions,
              slide.imageUrl,
              `Current image · ${slide.imageUrl}`,
            ).map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>

          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            placeholder='Caption'
            value={slide.caption}
            onChange={(event) =>
              onUpdateSlide(slide.id, { caption: event.target.value })
            }
          />
        </div>
      ))}

      {carouselSlides.length === 0 && (
        <p className='text-[11px] text-gray-500'>
          No slides yet. Click &quot;+ Add slide&quot; to create one.
        </p>
      )}
    </div>
  );
};

export default CarouselSettingsSectionCompact;
