/**
 * MediaSettingsSection
 *
 * Settings for video_player and audio_player element types.
 */

import React from 'react';
import FormField from '../FormField';
import { isVideoPlayerElementType } from '../../lib/elementDefaults';
import type { MediaSettingsSectionProps } from './types';

const MediaSettingsSection: React.FC<MediaSettingsSectionProps> = ({
  elementType,
  mediaUrl,
  mediaAutoplay,
  mediaLoop,
  mediaMuted,
  onChange,
  context,
  videoAssetOptions = [],
  audioAssetOptions = [],
}) => {
  const isConstructor = context === 'constructor';
  const isVideo = isVideoPlayerElementType(elementType);
  const assetOptions = isVideo ? videoAssetOptions : audioAssetOptions;

  return (
    <div className='space-y-4'>
      {isConstructor ? (
        <FormField label={isVideo ? 'Video asset' : 'Audio asset'}>
          <select
            value={mediaUrl}
            onChange={(event) => onChange('mediaUrl', event.target.value)}
          >
            <option value=''>Not selected</option>
            {assetOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
        </FormField>
      ) : (
        <FormField label='Media URL'>
          <input
            value={mediaUrl}
            onChange={(event) => onChange('mediaUrl', event.target.value)}
          />
        </FormField>
      )}

      <FormField label='Playback'>
        <div className='flex flex-wrap gap-4'>
          <label className='inline-flex items-center gap-2 text-sm'>
            <input
              type='checkbox'
              checked={mediaAutoplay}
              onChange={(event) =>
                onChange('mediaAutoplay', event.target.checked)
              }
            />
            Autoplay
          </label>
          <label className='inline-flex items-center gap-2 text-sm'>
            <input
              type='checkbox'
              checked={mediaLoop}
              onChange={(event) => onChange('mediaLoop', event.target.checked)}
            />
            Loop
          </label>
          {isVideo && (
            <label className='inline-flex items-center gap-2 text-sm'>
              <input
                type='checkbox'
                checked={mediaMuted}
                onChange={(event) =>
                  onChange('mediaMuted', event.target.checked)
                }
              />
              Muted
            </label>
          )}
        </div>
      </FormField>
    </div>
  );
};

export default MediaSettingsSection;