/**
 * BackgroundSettingsEditor Component
 *
 * Compact editor for background image, video, or audio settings.
 * Used in the element editor panel for background menu items.
 */

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

interface BackgroundSettingsEditorProps {
  type: 'image' | 'video' | 'audio';
  value: string;
  options: AssetOption[];
  durationNote?: string;
  onChange: (value: string) => void;
  onClearImage?: () => void;
}

const LABELS: Record<string, string> = {
  image: 'Background image',
  video: 'Background video',
  audio: 'Background audio (loop)',
};

const BackgroundSettingsEditor: React.FC<BackgroundSettingsEditorProps> = ({
  type,
  value,
  options,
  durationNote,
  onChange,
  onClearImage,
}) => {
  const label = LABELS[type] || 'Background';
  const selectOptions = addFallbackAssetOption(
    options,
    value,
    `Current ${type} · ${value}`,
  );

  return (
    <div>
      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
        {label}
      </label>
      <select
        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
        value={value}
        onChange={(event) => {
          const nextValue = event.target.value;
          onChange(nextValue);
          // For image, if switching to a new image, clear video (handled externally)
          if (type === 'image' && nextValue && onClearImage) {
            onClearImage();
          }
        }}
      >
        <option value=''>None</option>
        {selectOptions.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      {durationNote && (
        <p className='mt-1 text-[11px] text-gray-500'>{durationNote}</p>
      )}
    </div>
  );
};

export default BackgroundSettingsEditor;