/**
 * 10Web plugins Gutenberg integration
 * version 2.0.3
 */
( function ( blocks, element ) {
  registerAllPluginBlocks();

  function registerAllPluginBlocks() {
    var twPluginsData = JSON.parse(tw_obj_translate.blocks);
    for ( var pluginId in window['tw_gb'] ) {
      if ( !window['tw_gb'].hasOwnProperty( pluginId ) ) {
        continue;
      }
      twPluginsData[pluginId] = window['tw_gb'][pluginId];
    }
    if ( !twPluginsData ) {
      return;
    }

    for ( var pluginId in twPluginsData ) {
      if ( !twPluginsData.hasOwnProperty( pluginId ) ) {
        continue;
      }

      if ( !twPluginsData[pluginId].inited ) {
        twPluginsData[pluginId].inited = true;
        registerPluginBlock( blocks, element, pluginId, twPluginsData[pluginId] );
      }
    }
  }

  function registerPluginBlock( blocks, element, pluginId, pluginData ) {
    var el = element.createElement;

    var isPopup = pluginData.isPopup;

    var iconEl = el( 'img', {
      width: pluginData.iconSvg.width,
      height: pluginData.iconSvg.height,
      src: pluginData.iconSvg.src
    } );

    blocks.registerBlockType( pluginId, {
      title: pluginData.title,
      icon: iconEl,
      category: 'common',
      attributes: {
        shortcode: {
          type: 'string'
        },
        popupOpened: {
          type: 'boolean',
          value: true
        },
        notInitial: {
          type: 'boolean'
        },
        shortcode_id: {
          type: 'string'
        }
      },

      edit: function ( props ) {
        if ( !props.attributes.notInitial ) {
          props.setAttributes( {
            notInitial: true,
            popupOpened: true
          } );

          return el( 'p' );
        }

        if ( props.attributes.popupOpened ) {
          if ( isPopup ) {
            return showPopup( props.attributes.shortcode, props.attributes.shortcode_id );
          }
          else {
            return showShortcodeList( props.attributes.shortcode );
          }
        }

        if ( props.attributes.shortcode ) {
          return showShortcode();
        }
        else {
          return showShortcodePlaceholder();
        }

        function showPopup( shortcode, shortcode_id ) {
          var shortcodeCbName = generateUniqueCbName( pluginId );
          /* Store shortcode attribute into a global variable to get it from an iframe. */
          window[shortcodeCbName + '_shortcode'] = shortcode ? shortcode : '';
          window[shortcodeCbName] = function ( shortcode, shortcode_id ) {
            delete window[shortcodeCbName];

            if ( props ) {
              props.setAttributes( { shortcode: shortcode, shortcode_id: shortcode_id, popupOpened: false } );
            }
          };
          props.setAttributes( { popupOpened: true } );
          if (!shortcode_id && undefined != shortcode) {
            var shortcode_extract = shortcode.split(' ');
            for (i = 0; i < shortcode_extract.length; i++) {
              var attributes = shortcode_extract[i].split('=');
              if ('id'== attributes[0]) {
                shortcode_id = attributes[1].replace(/"/g, "");
              }
            }
          }
          var elem = el( 'form', { className: 'tw-container' }, el( 'div', { className: 'tw-container-wrap' + (pluginData.containerClass ? ' ' + pluginData.containerClass : '') }, el( 'span', {
            className: "media-modal-close",
            onClick: close
          }, el( "span", { className: "media-modal-icon" } ) ), el( 'iframe', { src: pluginData.data.shortcodeUrl + '&callback=' + shortcodeCbName + '&edit=' + shortcode_id } ) ) );
          return elem;
        }

        function showShortcodeList( shortcode ) {
          props.setAttributes( { popupOpened: true } );
          var children = [];
          var shortcodeList = JSON.parse( pluginData.data );
          shortcodeList.inputs.forEach( function ( inputItem ) {
            if ( inputItem.type === 'select' ) {
              children.push( el( 'option', { value: '', dataId: 0 }, tw_obj_translate.empty_item ) );
              if ( inputItem.options.length ) {
                inputItem.options.forEach( function ( optionItem ) {
                  var shortcode = '[' + shortcodeList.shortcode_prefix + ' ' + inputItem.shortcode_attibute_name + '="' + optionItem.id + '"]';
                  children.push(
                    el( 'option', { value: shortcode, dataId: optionItem.id }, optionItem.name )
                  );
                } )
              }
            }
          } );

          if ( shortcodeList.shortcodes ) {
            shortcodeList.shortcodes.forEach( function ( shortcodeItem ) {
              children.push(
                el( 'option', { value: shortcodeItem.shortcode, dataId: shortcodeItem.id }, shortcodeItem.name )
              );
            } );
          }

          return el( 'form', { onSubmit: chooseFromList }, el( 'div', {}, pluginData.titleSelect ), el( 'select', {
            value: shortcode,
            onChange: chooseFromList,
            class: 'tw-gb-select'
          }, children ) );
        }

        function showShortcodePlaceholder() {
          props.setAttributes( { popupOpened: false } );
          return el( 'p', {
            style: {
              'cursor': "pointer"
            },

            onClick: function () {
              props.setAttributes( { popupOpened: true } );
            }.bind( this )
          }, tw_obj_translate.nothing_selected );
        }

        function showShortcode() {
          return el( 'img', {
            src: pluginData.iconUrl,
            alt: pluginData.title,
            style: {
              'height': "36px",
              'width': "36px"
            },
            onClick: function () {
              props.setAttributes( { popupOpened: true } );
            }.bind( this )
          } );
        }

        function close() {
          props.setAttributes( { popupOpened: false } );
        }

        function chooseFromList( event, shortcode_id ) {
          var selected = event.target.querySelector( 'option:checked' );
          props.setAttributes( { shortcode: selected.value, shortcode_id: selected.dataId, popupOpened: false } );
          event.preventDefault();
        }
      },

      save: function ( props ) {
        return props.attributes.shortcode;
      }
    } );
  }

  function generateUniqueCbName( pluginId ) {
    return 'wdg_cb_' + pluginId;
  }
} )(
  window.wp.blocks,
  window.wp.element
);