import { __ } from '@wordpress/i18n';
import { SelectControl, ToggleControl } from '@wordpress/components';

const PRELOAD_OPTS = [ 'auto', 'metadata', 'none' ];

/**
 * Playback / behaviour controls that map directly onto native <video> attributes:
 * controls, autoplay, muted, loop, playsinline, preload, controlsList tokens and
 * disablePictureInPicture.
 */
export default function PlaybackControls( { attributes, setAttributes } ) {
  const {
    controls, autoplay, muted, loop, playsInline, preload,
    controlsNoDownload, controlsNoFullscreen, controlsNoRemotePlayback,
    disablePictureInPicture,
  } = attributes;

  const preloadValue = PRELOAD_OPTS.includes( preload ) ? preload : 'metadata';

  // Autoplay is blocked by browsers unless the video is muted, so turning
  // autoplay on also forces muted on (the user can still mute independently).
  const onToggleAutoplay = ( value ) =>
    setAttributes( value ? { autoplay: true, muted: true } : { autoplay: false } );

  return (
    <div className="axcelersblocks-settings-section">
      <ToggleControl
        label={ __( 'Show controls', 'axcelersblocks' ) }
        checked={ !! controls }
        onChange={ ( val ) => setAttributes( { controls: !! val } ) }
        help={ __( 'Display the browser’s native play/pause, volume and timeline controls.', 'axcelersblocks' ) }
      />

      <ToggleControl
        label={ __( 'Autoplay', 'axcelersblocks' ) }
        checked={ !! autoplay }
        onChange={ onToggleAutoplay }
        help={ __( 'Most browsers only allow autoplay when the video is muted (enabled automatically).', 'axcelersblocks' ) }
      />

      <ToggleControl
        label={ __( 'Muted', 'axcelersblocks' ) }
        checked={ !! muted }
        onChange={ ( val ) => setAttributes( { muted: !! val } ) }
        disabled={ !! autoplay }
        help={ autoplay ? __( 'Forced on while Autoplay is enabled.', 'axcelersblocks' ) : undefined }
      />

      <ToggleControl
        label={ __( 'Loop', 'axcelersblocks' ) }
        checked={ !! loop }
        onChange={ ( val ) => setAttributes( { loop: !! val } ) }
      />

      <ToggleControl
        label={ __( 'Play inline (mobile)', 'axcelersblocks' ) }
        checked={ !! playsInline }
        onChange={ ( val ) => setAttributes( { playsInline: !! val } ) }
        help={ __( 'Plays within the page on iOS instead of going fullscreen.', 'axcelersblocks' ) }
      />

      <SelectControl
        label={ __( 'Preload', 'axcelersblocks' ) }
        value={ preloadValue }
        onChange={ ( val ) => setAttributes( { preload: PRELOAD_OPTS.includes( val ) ? val : 'metadata' } ) }
        options={ [
          { label: 'auto', value: 'auto' },
          { label: 'metadata', value: 'metadata' },
          { label: 'none', value: 'none' },
        ] }
        help={ __( 'How much of the video the browser loads before playback.', 'axcelersblocks' ) }
      />

      <hr className="axcelersblocks-divider" />

      <h4 className="axcelersblocks-settings-subtitle">{ __( 'Controls list', 'axcelersblocks' ) }</h4>
      <p className="axcelersblocks-settings-help">
        { __( 'Hide individual native controls (supported in Chromium-based browsers).', 'axcelersblocks' ) }
      </p>
      <ToggleControl
        label={ __( 'Hide download', 'axcelersblocks' ) }
        checked={ !! controlsNoDownload }
        onChange={ ( val ) => setAttributes( { controlsNoDownload: !! val } ) }
      />
      <ToggleControl
        label={ __( 'Hide fullscreen', 'axcelersblocks' ) }
        checked={ !! controlsNoFullscreen }
        onChange={ ( val ) => setAttributes( { controlsNoFullscreen: !! val } ) }
      />
      <ToggleControl
        label={ __( 'Hide remote playback', 'axcelersblocks' ) }
        checked={ !! controlsNoRemotePlayback }
        onChange={ ( val ) => setAttributes( { controlsNoRemotePlayback: !! val } ) }
      />

      <hr className="axcelersblocks-divider" />

      <ToggleControl
        label={ __( 'Disable Picture-in-Picture', 'axcelersblocks' ) }
        checked={ !! disablePictureInPicture }
        onChange={ ( val ) => setAttributes( { disablePictureInPicture: !! val } ) }
      />
    </div>
  );
}
