/**
 * MediaSettingsSectionCompact
 *
 * Compact media (video/audio) player settings for constructor sidebar.
 * Media asset selection and playback options.
 */

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

interface MediaSettingsSectionCompactProps {
  mediaType: 'video' | 'audio';
  mediaUrl: string;
  mediaAutoplay: boolean;
  mediaLoop: boolean;
  mediaMuted: boolean;
  videoAssetOptions: AssetOption[];
  audioAssetOptions: AssetOption[];
  onChange: (prop: string, value: string | boolean) => void;
}

const MediaSettingsSectionCompact: React.FC<
  MediaSettingsSectionCompactProps
> = ({
  mediaType,
  mediaUrl,
  mediaAutoplay,
  mediaLoop,
  mediaMuted,
  videoAssetOptions,
  audioAssetOptions,
  onChange,
}) => {
  const assetOptions =
    mediaType === 'video' ? videoAssetOptions : audioAssetOptions;
  const assetLabel = mediaType === 'video' ? 'Video asset' : 'Audio asset';

  return (
    <div className='space-y-2'>
      <div>
        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
          {assetLabel}
        </label>
        <select
          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
          value={mediaUrl}
          onChange={(event) => onChange('mediaUrl', event.target.value)}
        >
          <option value=''>Not selected</option>
          {addFallbackAssetOption(
            assetOptions,
            mediaUrl,
            `Current media · ${mediaUrl}`,
          ).map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>

      <label className='flex items-center gap-2 text-[11px] text-gray-700'>
        <input
          type='checkbox'
          checked={mediaAutoplay}
          onChange={(event) => onChange('mediaAutoplay', event.target.checked)}
        />
        Autoplay
      </label>

      <label className='flex items-center gap-2 text-[11px] text-gray-700'>
        <input
          type='checkbox'
          checked={mediaLoop}
          onChange={(event) => onChange('mediaLoop', event.target.checked)}
        />
        Loop
      </label>

      {mediaType === 'video' && (
        <label className='flex items-center gap-2 text-[11px] text-gray-700'>
          <input
            type='checkbox'
            checked={mediaMuted}
            onChange={(event) => onChange('mediaMuted', event.target.checked)}
          />
          Muted
        </label>
      )}
    </div>
  );
};

export default MediaSettingsSectionCompact;
