// License: GPLv2+
var sRender = (wp.components.ServerSideRender === undefined) ? wp.serverSideRender : wp.components.ServerSideRender
var iControls = (wp.editor.InspectorControls === undefined) ? wp.blockEditor.InspectorControls : wp.editor.InspectorControls;

var el = wp.element.createElement,
  registerBlockType = wp.blocks.registerBlockType,
  ServerSideRender = sRender,
  TextControl = wp.components.TextControl,
  ToggleControl = wp.components.ToggleControl,
  TextareaControl = wp.components.TextareaControl,
  PanelBody = wp.components.PanelBody,
  __ = wp.i18n.__,
  InspectorControls = iControls;

/*
 * Here's where we register the block in JavaScript.
 *
 */
registerBlockType('ai/ai-block', {
  title: 'Advanced iframe',
  icon: 'shortcode',
  category: 'widgets',
  description: __('Adds an advanced iframe. You can overwrite the default settings of the administration here.'),
  edit: function (props) {
    return [
      el(ServerSideRender, {
        block: 'ai/ai-block',
        attributes: props.attributes,
      }),

      el(InspectorControls, {},
        el(PanelBody, {title: 'Settings', initialOpen: true},
          el(TextControl, {
            label: 'Url',
            value: props.attributes.src,
            onChange: (value) => {
              props.setAttributes({src: value});
            },
            placeholder: 'Url of the iframe'
          }),
          el(TextControl, {
            label: 'Width',
            value: props.attributes.width,
            onChange: (value) => {
              props.setAttributes({width: value});
            },
            placeholder: 'Width e.g. 100% or 200'
          }),
          el(TextControl, {
            label: 'Height',
            value: props.attributes.height,
            onChange: (value) => {
              props.setAttributes({height: value});
            },
            placeholder: 'Height e.g. 200'
          }),

          el(TextareaControl, {
            label: 'Additional parameters',
            value: props.attributes.additional,
            rows: 8,
            onChange: (value) => {
              props.setAttributes({additional: value});
            },
            placeholder: 'Enter additional parameters in short code style. e.g. margin="0" onload_resize="true". Be aware that by default the settings from the administration are used.'

          }),
          el(ToggleControl, {
            label: 'Add surrounding p',
            help: 'iframes need a surrounding P for some themes to be displayed properly.',
            checked: props.attributes.add_surrounding_p_boolean,
            onChange: (value) => {
              props.setAttributes({add_surrounding_p_boolean: value});
            },
          }),
        ),
        el(PanelBody, {title: 'Help', initialOpen: false},
          el('p', {},
            'For even more flexibilty please use the short code block directly. Please go to the administration of advanced iframe for a detailed documentation of each parameter. If a setting is set in the additional parameters and in the block directly the one from the block is used.  In the Gutenberg preview a small selection area is added to make it possible to select the block by clicking above the iframe preview.')
        )
      ),
    ];
  },

  // We're going to be rendering in PHP, so save() can just return null.
  save: function () {
    return null;
  },
});