import { __ } from '@wordpress/i18n';
import { PanelBody, ToggleControl } from '@wordpress/components';
import VideoMediaControls from './VideoMediaControls';
import PlaybackControls from './PlaybackControls';
import PlayOverlayControls from './PlayOverlayControls';
import TrackControls from './TrackControls';
import CustomLinkControl from '../../../components/settings/CustomLinkControl';
import DynamicContentSettings from '../../../components/settings/DynamicContentSettings';

// Video can only resolve a media URL from these dynamic sources (no featured
// image / author avatar concept).
const ALLOWED_DYNAMIC_TAGS = [ 'acf_field', 'post_meta', 'term_meta' ];

export function SettingsPanel( { attributes, setAttributes } ) {
  return (
    <>
      <PanelBody title={ __( 'Video Source', 'axcelersblocks' ) } initialOpen>
        <VideoMediaControls attributes={ attributes } setAttributes={ setAttributes } />
      </PanelBody>

      <PanelBody title={ __( 'Playback', 'axcelersblocks' ) } initialOpen={ false }>
        <PlaybackControls attributes={ attributes } setAttributes={ setAttributes } />
        <hr className="axcelersblocks-divider" />
        <PlayOverlayControls attributes={ attributes } setAttributes={ setAttributes } />
      </PanelBody>

      <PanelBody title={ __( 'Captions & Tracks', 'axcelersblocks' ) } initialOpen={ false }>
        <TrackControls attributes={ attributes } setAttributes={ setAttributes } />
      </PanelBody>

      <PanelBody title={ __( 'Link & Dynamic', 'axcelersblocks' ) } initialOpen={ false }>
        <div className="axcelersblocks-settings-section">
          <ToggleControl
            label={ __( 'Show placeholder when empty', 'axcelersblocks' ) }
            help={
              attributes.showEmptyPlaceholder
                ? __( 'A placeholder is shown on the front end when no video resolves.', 'axcelersblocks' )
                : __( 'The block renders nothing on the front end when no video resolves.', 'axcelersblocks' )
            }
            checked={ !! attributes.showEmptyPlaceholder }
            onChange={ ( value ) => setAttributes( { showEmptyPlaceholder: value } ) }
          />
        </div>
        <hr className="axcelersblocks-divider" />
        <div className="axcelersblocks-settings-section">
          <h3 className="axcelersblocks-settings-title">{ __( 'Link', 'axcelersblocks' ) }</h3>
          <CustomLinkControl attributes={ attributes } setAttributes={ setAttributes } enableSeoAttributes />
        </div>
        <hr className="axcelersblocks-divider" />
        <div className="axcelersblocks-settings-section">
          <h3 className="axcelersblocks-settings-title">{ __( 'Dynamic Data', 'axcelersblocks' ) }</h3>
          <DynamicContentSettings
            attributes={ attributes }
            setAttributes={ setAttributes }
            allowedTags={ ALLOWED_DYNAMIC_TAGS }
          />
        </div>
      </PanelBody>
    </>
  );
}
