/**
 * @since Last modified: 2024-09-10 11:20:41
 * @function createFooter
 * @description Create the bottom buttons at the bottom of the bubble, including Popup, Dialog and Drawer.
 * @param {object} options  - The required parameters.
 * @param {string} [options.nodeName='div']  - The node name of box.
 * @param {'left'|'right'|'center'|'seal'} [options.layout='center']  - The layout of btns.
 * @param {object} [options.attrs={}]  - The attributes of box.
 * @param {object} [options.tips={}]  - 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} [parent] - The host node of content.
 * @returns {HTMLElement} - Father node.
 * @see {@link https://codepen.io/axui/pen/QWYzJMm|demo @ codepen}
 * @example
 * ax.createFooter();
 * <!--return a parent node -->
 */
'use strict';
import config from '../global/config';
import prefix from '../global/prefix';
import createBtns from './createBtns';
import createEl from './createEl';
import getEl from './getEl';
import spreadBool from './spreadBool';
const createFooter = ({ nodeName = 'div', layout = 'center', attrs, tips = false, divider = false, padding = false, children = [] }, parent) => {
    /*!  options = {
             nodeName: '',
             layout:'',
             attrs:{},
             tips: {
                 enable: false,
                 nodeName: '',
                 html: '',
                 attrs:{}
             },
             divider:{
                enable:false,
                nodeName:'',
                attrs:{}
             },
             padding:{
                enable:false,
                nodeName:'',
                attrs:{}
             }
             children: [
                 {
                 name: 'cancel',
                 attrs: {},
                 classes:'',
                 url:'',
                 action: null,
                },
                {
                    name: 'confirm',
                    attrs: {},
                    classes:'',
                    url:'',
                    action: null,
                },
             ]
         } */
    divider = spreadBool(divider, {});
    padding = spreadBool(padding, {});
    tips = spreadBool(tips, { html: config.lang.placehold.tips });
    let target = getEl(parent), outer, footerDom = createEl(nodeName, Object.assign({ class: `${prefix}bubble-footer`, layout }, attrs)), dividerDom = divider.enable ? createEl(divider.nodeName || 'ax-line', Object.assign({ ref: 'divider' }, divider.attrs)) : null, paddingDom = padding.enable ? createEl(padding.nodeName || 'div', Object.assign({ class: `${prefix}p`, ref: 'padding' }, padding.attrs)) : null, tipsDom = tips.enable && tips.html ? createEl(tips.nodeName || 'div', Object.assign({ ref: 'tips' }, tips.attrs), tips.html) : null, wrapDom = createEl('div', { class: `${prefix}bubble-footer-wrap` });
    footerDom.setAttribute('layout', layout);
    dividerDom ? footerDom.appendChild(dividerDom) : null;
    paddingDom ? (footerDom.appendChild(paddingDom), outer = paddingDom) : (outer = footerDom);
    outer.appendChild(wrapDom);
    if (children.length > 0) {
        createBtns(children, wrapDom, layout === 'plain' ? { type: 'plain' } : {});
    }
    tipsDom ? wrapDom.appendChild(tipsDom) : null;
    if (target) {
        let tmp = target.querySelector(`.${prefix}bubble-footer`);
        tmp && tmp.remove();
        target.appendChild(footerDom);
    }
    return footerDom;
};
export default createFooter;
