/**
 * CreateTransitionForm Component
 *
 * Form for creating a new transition (legacy functionality).
 * Transitions are now typically stored directly on navigation elements.
 */

import React from 'react';
import BaseIcon from '../BaseIcon';
import { mdiSwapHorizontal } from '@mdi/js';
import type { AssetOption } from './types';

interface CreateTransitionFormProps {
  name: string;
  videoUrl: string;
  supportsReverse: boolean;
  videoOptions: AssetOption[];
  durationNote: string;
  isCreating: boolean;
  onNameChange: (name: string) => void;
  onVideoUrlChange: (url: string) => void;
  onSupportsReverseChange: (value: boolean) => void;
  onSubmit: () => void;
}

const CreateTransitionForm: React.FC<CreateTransitionFormProps> = ({
  name,
  videoUrl,
  supportsReverse,
  videoOptions,
  durationNote,
  isCreating,
  onNameChange,
  onVideoUrlChange,
  onSupportsReverseChange,
  onSubmit,
}) => {
  return (
    <div className='rounded border border-white/20 p-2 space-y-2'>
      <p className='text-[11px] font-semibold text-white/80'>
        Create next page transition
      </p>

      <input
        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
        placeholder='Name'
        value={name}
        onChange={(event) => onNameChange(event.target.value)}
      />

      <select
        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
        value={videoUrl}
        onChange={(event) => onVideoUrlChange(event.target.value)}
      >
        <option value=''>Transition video asset</option>
        {videoOptions.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>

      <p className='text-[11px] text-white/60'>
        Transition duration is automatic from video metadata. {durationNote}
      </p>

      <label className='flex items-center gap-2 text-[11px] text-white/80'>
        <input
          type='checkbox'
          checked={supportsReverse}
          onChange={(event) => onSupportsReverseChange(event.target.checked)}
        />
        Supports reverse playback
      </label>

      <button
        type='button'
        className='menu-action-btn'
        onClick={onSubmit}
        disabled={isCreating}
      >
        <BaseIcon path={mdiSwapHorizontal} size={16} />
        <span>
          {isCreating ? 'Creating Transition...' : 'Create Transition'}
        </span>
      </button>
    </div>
  );
};

export default CreateTransitionForm;