/**
 * Method Collection with predefined HTMLElements
 */
const builder = {
     components: {
          parent: {},
          current: {},
          previous: {},
          next: {},
          openedChain: {}
     },

     /**
      * 
      * @param {string} tag 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     genTag: function (tag, attr = {}) { return new Component(document.createElement(tag), attr).addStyleClass(`el-${tag}`); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     anchor: function (attr = {}) { return builder.genTag("a", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     label: function (attr = {}) { return builder.genTag("label", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     button: function (attr = {}) { return builder.genTag("button", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     input: function (attr = {}) { return builder.genTag("input", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     div: function (attr = {}) { return builder.genTag("div", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     span: function (attr = {}) { return builder.genTag("span", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     paragraph: function (attr = {}) { return builder.genTag("paragraph", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     header: function (sizeGroup, attr = {}) { return builder.genTag(`h${sizeGroup}`, attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     checkbox: function (attr = {}) { return builder.input({ "type": "checkbox" }) },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     select: function (attr = {}) { return builder.genTag("select", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     option: function (attr = {}) { return builder.genTag("option", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     select: function (attr = {}) { return builder.genTag("select", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     radioBtn: function (attr = {}) { return builder.genTag("radioBtn", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     icon: function (attr = {}) { return builder.genTag("icon", attr); },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     img: function (attr = {}) { return builder.genTag("img", attr); },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     textarea: function (attr = {}) { return builder.genTag("textarea", attr); },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     table: function (attr = {}) { return builder.genTag("table", attr) },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableRow: function (attr = {}) { return builder.genTag("tr", attr) },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableCell: function (attr = {}) { return builder.genTag("td", attr) },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableCaption: function (attr = {}) { return builder.genTag("caption", attr) },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableHeadCell: function (attr = {}) { return builder.genTag("th", attr) },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableBody: function (attr = {}) { return builder.genTag("tbody", attr) },
     
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableHead: function (attr = {}) { return builder.genTag("thead", attr) },
     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     tableFooter: function (attr = {}) { return builder.genTag("tfoot", attr) },

     /**
      * 
      * @param {Map<string,string>} attr 
      * @returns {Component}
      */
     form: function (attr = {}) { 
          return builder.genTag("form", attr)
          .addStyleClass("flex-container-component") 
          .chainModifier()
          .setStyleRule("flex-direction", "column")
          .ensureModifier()
          .toComponent()
     },

     /**
      * 
      * @param {*} attr 
      * @returns {Row}
      */
     row: function (attr = {}) { return new Row(attr) },

     /**
      * 
      * @param {*} attr 
      * @returns {Column}
      */
     column: function (attr = {}) { return new Column(attr) },

     /**
      * 
      * @param {*} innerComponents 
      */
     page: function (innerComponents) {
          Page.generate();
          let main = document.querySelector('main')

          main.parentElement.insertAdjacentElement(
               "afterbegin",
               builder.genTag("main")
                    .alignment(Alignment.CENTER)
                    .arrangement(Arrangement.CENTER)
                    .childContext(innerComponents)
                    .generate()
          )
          main.remove();
     }
}