import { __ } from '@wordpress/i18n';
import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { Button, SelectControl, TextControl, ToggleControl } from '@wordpress/components';

const KIND_OPTS = [
  { label: __( 'Subtitles', 'axcelersblocks' ), value: 'subtitles' },
  { label: __( 'Captions', 'axcelersblocks' ), value: 'captions' },
  { label: __( 'Descriptions', 'axcelersblocks' ), value: 'descriptions' },
  { label: __( 'Chapters', 'axcelersblocks' ), value: 'chapters' },
  { label: __( 'Metadata', 'axcelersblocks' ), value: 'metadata' },
];

const emptyTrack = () => ( { kind: 'subtitles', src: '', srclang: '', label: '', default: false } );

/**
 * Repeater for <track> children of the <video> element — captions, subtitles,
 * descriptions, chapters or metadata (WebVTT .vtt files).
 */
export default function TrackControls( { attributes, setAttributes } ) {
  const tracks = Array.isArray( attributes.tracks ) ? attributes.tracks : [];

  const update = ( next ) => setAttributes( { tracks: next } );

  const setField = ( index, field, value ) => {
    const next = tracks.map( ( t, i ) => {
      if ( i !== index ) {
        // Only one track per video may be the default.
        return field === 'default' && value ? { ...t, default: false } : t;
      }
      return { ...t, [ field ]: value };
    } );
    update( next );
  };

  const addTrack = () => update( [ ...tracks, emptyTrack() ] );
  const removeTrack = ( index ) => update( tracks.filter( ( _, i ) => i !== index ) );

  return (
    <div className="axcelersblocks-settings-section">
      <p className="axcelersblocks-settings-help">
        { __( 'Add WebVTT (.vtt) tracks for captions, subtitles or chapters.', 'axcelersblocks' ) }
      </p>

      { tracks.map( ( track, index ) => (
        <div key={ index } className="axcelersblocks-responsive-image-override">
          <h4 className="axcelersblocks-settings-subtitle">
            { __( 'Track', 'axcelersblocks' ) } { index + 1 }
          </h4>

          <SelectControl
            label={ __( 'Kind', 'axcelersblocks' ) }
            value={ track.kind || 'subtitles' }
            onChange={ ( val ) => setField( index, 'kind', val ) }
            options={ KIND_OPTS }
          />

          <TextControl
            label={ __( 'Track file URL (.vtt)', 'axcelersblocks' ) }
            value={ track.src || '' }
            onChange={ ( val ) => setField( index, 'src', val ) }
            placeholder="https://example.com/captions-en.vtt"
          />

          <MediaUploadCheck>
            <MediaUpload
              onSelect={ ( media ) => media?.url && setField( index, 'src', media.url ) }
              allowedTypes={ [ 'text/vtt', 'text' ] }
              render={ ( { open } ) => (
                <Button variant="secondary" onClick={ open }>
                  { __( 'Select track file', 'axcelersblocks' ) }
                </Button>
              ) }
            />
          </MediaUploadCheck>

          <TextControl
            label={ __( 'Language code', 'axcelersblocks' ) }
            value={ track.srclang || '' }
            onChange={ ( val ) => setField( index, 'srclang', val ) }
            placeholder="en"
            help={ __( 'BCP 47 code, e.g. en, fr, es-MX. Required for subtitles.', 'axcelersblocks' ) }
          />

          <TextControl
            label={ __( 'Label', 'axcelersblocks' ) }
            value={ track.label || '' }
            onChange={ ( val ) => setField( index, 'label', val ) }
            placeholder={ __( 'English', 'axcelersblocks' ) }
          />

          <ToggleControl
            label={ __( 'Default track', 'axcelersblocks' ) }
            checked={ !! track.default }
            onChange={ ( val ) => setField( index, 'default', !! val ) }
          />

          <Button variant="link" isDestructive onClick={ () => removeTrack( index ) }>
            { __( 'Remove track', 'axcelersblocks' ) }
          </Button>
        </div>
      ) ) }

      <Button variant="secondary" onClick={ addTrack } style={ { marginTop: '8px' } }>
        { __( 'Add track', 'axcelersblocks' ) }
      </Button>
    </div>
  );
}
