/**
 * @since Last modified: 2024-01-18 16:17:08
 * @function formSubmit
 * @description Submit form.
 * @param {getEl} el  - The node of form.
 * @param {false|null|object} opt - The parameters.If it is an object containing the url property, the form will be submitted async by building formdata.
 * @param {string} opt.url - The url of async request.
 * @param {getEl} opt.rel - The related node.usually a button.
 * @param {'post' | 'get'} opt.type - The type of async request.
 * @param {number} opt.delay - The delay after success submit.
 * @param {'loading' | 'text' | ''} opt.buffer - The related node loading mode.
 * @param {function} opt.success - The call back of success.
 * @param {function} opt.before - The call back before success.
 * @param {function} opt.error - The call back of error.
 * @param {function} opt.opened - The call back of xhr opened.
 * @returns null.
 * @see {@link https://codepen.io/axui/pen/PoLbxJe|demo @ codepen}
 * @example
 * ax.formSubmit('#demo');
 * <!--return null-->
 */
'use strict';
import ax from '../ax';
import Message from '../modules/Message';
import ajax from './ajax';
import getEl from './getEl';
import serialize from './serialize';
interface Options {
    url: string;
    rel?: any,
    type?: 'post' | 'get';
    delay?: number;
    buffer?: 'loading' | 'text' | '';
    success?: any;
    before?: any;
    error?: any;
    opened?: any;
}
const formSubmit = (el: any, opt?: Options) => {
    let formDom = getEl(el);
    if (!formDom) { return false; }
    if (opt && opt.hasOwnProperty('url')) {
        let {
            url = '',
            rel,
            type = 'post',
            delay = 1000,
            buffer = '',
            success,
            before,
            error,
            opened,
        } = opt;
        if (!url || !parent) { throw new Error('The request url and form node are required!'); }
        let relDom = getEl(rel),
            relText = relDom ? relDom.innerHTML : '',
            resume = () => {
                formDom.classList.remove(`${ax.pfx}ajax-overlay`);
                if (relDom) {
                    if (buffer === 'loading' || buffer === 'text') {
                        relDom.removeAttribute('inert');
                        relDom.innerHTML = relText;
                    } else {
                        relDom.removeAttribute('cheking');
                    }
                }
            };
        if (formDom.classList.contains(`${ax.pfx}ajax-overlay`)) { return false; }
        return ajax({
            url,
            data: serialize(formDom, 'formdata'),
            type,
            opened: (response: any) => {
                opened && opened(response);
            },
            before: (response: any) => {
                formDom.classList.add(`${ax.pfx}ajax-overlay`);
                if (relDom) {
                    if (buffer === 'loading') {
                        relDom.innerHTML = response.content;
                        relDom.setAttribute('inert', '');
                    } else if (buffer === 'text') {
                        relDom.innerHTML = ax.lang.ajax.submit.btn;
                        relDom.setAttribute('inert', '');
                    } else {
                        relDom.setAttribute('checking', '');
                    }
                }
                before && before(response);
            },
            success: (response: any) => {
                setTimeout(() => {
                    resume();
                    new Message({
                        content: ax.lang.ajax.submit.succ,
                        result: 'succ',
                        iconShow: true,
                    });
                    success && success(response);
                }, delay);
            },
            error: (response: any) => {
                resume();
                new Message({
                    content: ax.lang.ajax.submit.fail,
                    result: 'error',
                    iconShow: true,
                });
                error && error(response);
            }
        });
    } else {
        formDom.dispatchEvent(new Event('submit'));
    }
}
export default formSubmit;
