/**
 * @since Last modified: 2024-01-18 16:18:42
 * @function createBtns
 * @description Create a sortable buttons.
 * @param {object} options  - The parameters of creating btns.
 * @param {string} [options.nodeName='div']  - The node name of box.
 * @param {object} [options.attrs={}]  - The attributes of box.
 * @param {object} [options.note={}]  - Note or auxiliary text of btns.
 * @param {object} [options.divider={}]  - The top split line of box.
 * @param {object} [options.padding={}]  - The padding box of btns.
 * @param {array} [options.children=[]]  - The data of btns.
 * @param {getEl} elem - The host node of insert.
 * @returns {*} - The box of btns.
 * @see {@link https://codepen.io/axui/pen/RwvEZjJ|demo @ codepen}
 * @example
 * ax.createBtns({children:[]});
 * <!--return a node of btns-->
 */
'use strict';
import createEl from './createEl';
import getEl from './getEl';
const createBtns = ({ nodeName = 'div', attrs = {}, note = {}, divider = {}, padding = {}, children = [] }, elem) => {
    /*  options = {
         nodeName: '',
         attrs:{},
         note: {
             enable: false,
             nodeName: '',
             html: '',
         },
         divider:{
            enable:false,
            nodeName:'',
            attrs:{}
         },
         padding:{
            enable:false,
            nodeName:'',
            attrs:{}
         }
         children: [
             {
                 name: 'cancel',
                 index: 89,
                 nodeName: 'button',
                 html: ax.lang.button.cancel,
                 attrs: {},
                 action: null,
             },
             {
                 name: 'confirm',
                 index: 99,
                 nodeName: 'button',
                 html: ax.lang.button.confirm,
                 attrs: {},
                 action: null,
             },
         ]
     } */
    let target = getEl(elem), parent, wrapperDom = createEl(nodeName, Object.assign({ class: 'ax-container-btn' }, attrs)), breakDom = divider.enable ? createEl(divider.nodeName || 'div', Object.assign({ class: 'ax-break' }, divider.attrs)) : null, paddingDom = padding.enable ? createEl(padding.nodeName || 'div', Object.assign({ class: 'ax-padding' }, padding.attrs)) : null, noteDom = note.enable ? createEl(note.nodeName || 'div', Object.assign({ role: 'note' }, note.attrs), note.html) : null, btnsDom = createEl('div', { role: 'btns' }), sectionDom = createEl('section');
    children.forEach((k) => {
        let dft = { class: 'ax-btn' };
        k.hasOwnProperty('name') ? dft.role = k.name : null;
        k.hasOwnProperty('index') ? dft.index = k.index : null;
        k.dom = createEl(k.nodeName || 'a', Object.assign(dft, k.attrs), k.html || 'new button');
        btnsDom.appendChild(k.dom);
        k.action ? k.action(k.dom) : null;
    });
    children.sort((a, b) => a.index - b.index);
    breakDom ? wrapperDom.appendChild(breakDom) : null;
    paddingDom ? (wrapperDom.appendChild(paddingDom), parent = paddingDom) : (parent = wrapperDom);
    parent.appendChild(sectionDom);
    children.length > 0 ? sectionDom.appendChild(btnsDom) : null;
    noteDom ? sectionDom.appendChild(noteDom) : null;
    target ? target.appendChild(wrapperDom) : null;
    return wrapperDom;
};
export default createBtns;
