39948-vm/frontend/src/components/ElementSettings/GalleryCarouselSettingsSectionCompact.tsx

/**
 * GalleryCarouselSettingsSectionCompact
 *
 * Compact settings for gallery carousel navigation buttons in constructor sidebar.
 * Allows selecting custom icons for prev, next, and back buttons.
 */

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

interface GalleryCarouselSettingsSectionCompactProps {
  prevIconUrl: string;
  nextIconUrl: string;
  backIconUrl: string;
  backLabel: string;
  // Button dimensions
  prevWidth: string;
  prevHeight: string;
  nextWidth: string;
  nextHeight: string;
  backWidth: string;
  backHeight: string;
  iconAssetOptions: AssetOption[];
  onUpdateElement: (patch: {
    galleryCarouselPrevIconUrl?: string;
    galleryCarouselNextIconUrl?: string;
    galleryCarouselBackIconUrl?: string;
    galleryCarouselBackLabel?: string;
    galleryCarouselPrevWidth?: string;
    galleryCarouselPrevHeight?: string;
    galleryCarouselNextWidth?: string;
    galleryCarouselNextHeight?: string;
    galleryCarouselBackWidth?: string;
    galleryCarouselBackHeight?: string;
  }) => void;
}

const GalleryCarouselSettingsSectionCompact: React.FC<
  GalleryCarouselSettingsSectionCompactProps
> = ({
  prevIconUrl,
  nextIconUrl,
  backIconUrl,
  backLabel,
  prevWidth,
  prevHeight,
  nextWidth,
  nextHeight,
  backWidth,
  backHeight,
  iconAssetOptions,
  onUpdateElement,
}) => {
  return (
    <div className='mt-3 space-y-2'>
      <div className='rounded border border-gray-200 p-2 space-y-2'>
        <p className='text-[11px] font-semibold text-gray-700'>
          Carousel navigation
        </p>

        {/* Previous button */}
        <p className='text-[10px] font-medium text-gray-600 mt-1'>Previous</p>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={prevIconUrl}
          onChange={(event) =>
            onUpdateElement({ galleryCarouselPrevIconUrl: event.target.value })
          }
        >
          <option value=''>Icon (default)</option>
          {addFallbackAssetOption(
            iconAssetOptions,
            prevIconUrl,
            `Current prev icon`,
          ).map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
        {prevIconUrl && (
          <div className='flex gap-1'>
            <input
              type='number'
              step='0.25'
              min='0'
              className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
              placeholder='W (%)'
              value={prevWidth}
              onChange={(event) =>
                onUpdateElement({
                  galleryCarouselPrevWidth: event.target.value,
                })
              }
            />
            <input
              type='number'
              step='0.25'
              min='0'
              className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
              placeholder='H (%)'
              value={prevHeight}
              onChange={(event) =>
                onUpdateElement({
                  galleryCarouselPrevHeight: event.target.value,
                })
              }
            />
          </div>
        )}

        {/* Next button */}
        <p className='text-[10px] font-medium text-gray-600 mt-1'>Next</p>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={nextIconUrl}
          onChange={(event) =>
            onUpdateElement({ galleryCarouselNextIconUrl: event.target.value })
          }
        >
          <option value=''>Icon (default)</option>
          {addFallbackAssetOption(
            iconAssetOptions,
            nextIconUrl,
            `Current next icon`,
          ).map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
        {nextIconUrl && (
          <div className='flex gap-1'>
            <input
              type='number'
              step='0.25'
              min='0'
              className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
              placeholder='W (%)'
              value={nextWidth}
              onChange={(event) =>
                onUpdateElement({
                  galleryCarouselNextWidth: event.target.value,
                })
              }
            />
            <input
              type='number'
              step='0.25'
              min='0'
              className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
              placeholder='H (%)'
              value={nextHeight}
              onChange={(event) =>
                onUpdateElement({
                  galleryCarouselNextHeight: event.target.value,
                })
              }
            />
          </div>
        )}

        {/* Back button */}
        <p className='text-[10px] font-medium text-gray-600 mt-1'>Back</p>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={backIconUrl}
          onChange={(event) =>
            onUpdateElement({ galleryCarouselBackIconUrl: event.target.value })
          }
        >
          <option value=''>Icon (default)</option>
          {addFallbackAssetOption(
            iconAssetOptions,
            backIconUrl,
            `Current back icon`,
          ).map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
        {backIconUrl ? (
          <div className='flex gap-1'>
            <input
              type='number'
              step='0.25'
              min='0'
              className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
              placeholder='W (%)'
              value={backWidth}
              onChange={(event) =>
                onUpdateElement({
                  galleryCarouselBackWidth: event.target.value,
                })
              }
            />
            <input
              type='number'
              step='0.25'
              min='0'
              className='w-1/2 rounded border border-gray-300 px-2 py-1 text-xs'
              placeholder='H (%)'
              value={backHeight}
              onChange={(event) =>
                onUpdateElement({
                  galleryCarouselBackHeight: event.target.value,
                })
              }
            />
          </div>
        ) : (
          <input
            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
            placeholder='Back button label'
            value={backLabel}
            onChange={(event) =>
              onUpdateElement({ galleryCarouselBackLabel: event.target.value })
            }
          />
        )}

        <p className='text-[10px] text-gray-500 mt-1'>
          Set icon + dimensions for navigation-style buttons. Drag to
          reposition.
        </p>
      </div>
    </div>
  );
};

export default GalleryCarouselSettingsSectionCompact;