/**
 * @since Last modified: 2024-09-04 19:56:48
 * @function slideUp
 * @description Make the hidden element display and gradually expand.
 * @param {object} options  - The parameters of slide up.
 * @param {getEl} [options.el]  - The target node.The writing is the same as getEl.
 * @param {string} [options.display=block]  - The display of box.Can be filled in:'block'|'flex'|'inline-flex'|'inline-block'|'grid'.
 * @param {curve} [options.curve=easeOut]  - Animation curve.Can be filled in:'linear'|'ease'|'easeIn'|'easeOut'|'easeInOut'|'easeOutIn'.
 * @param {boolean} [options.cut=true]  - Forced overflow truncation,means to add the style attribute of the element:"overflow:hidden".
 * @param {number} [options.duration]  - The duration of slide up.The unit is ms.The default is automatically calculated by the element height.
 * @param {fn_cb_ease_app} [options.doing]  - The call back in progress.Support parameters:"frame"(animation frame) , "step"(progress) and "value" (height).
 * @param {fn_cb_ease_app} [options.done]  - The call back after completion.Support parameters:"frame"(animation frame) , "step"(progress) and "value" (height:0).
 * @returns {*} - The the target dom.
 * @see {@link https://codepen.io/axui/pen/XWOGRWK|demo @ codepen}
 * @example
 * ax.slideUp({el:'#demo'});
 * <!--return the target dom-->
 */
'use strict';
import getEl from "./getEl";
import getHeights from "./getHeights";
import elState from "./elState";
import ease from "./ease";
let slideUp = ({ el, display = 'block', doing, done, duration, curve = 'easeOut', cut = true }) => {
    let target = getEl(el);
    if (!target) {
        throw new Error('The target node does not exist!');
    }
    if (elState(target).isCalc) {
        let dftTime = (height) => height / 3 + 250, rawStyle = target.style.cssText, { height, paddingTop, paddingBottom, marginTop, marginBottom } = getHeights(target), time = ~~duration && duration !== 0 ? ~~duration : dftTime(height), dftCss = `${rawStyle}display: ${display};`, startCss = `${dftCss}${cut ? 'overflow:hidden;' : ''}`;
        target.style.cssText = `${startCss}padding-top: 0; padding-bottom: 0;margin-top: 0; margin-bottom: 0;`;
        ease({
            from: { height, paddingTop, paddingBottom, marginTop, marginBottom },
            to: { height: 0, paddingTop: 0, paddingBottom: 0, marginTop: 0, marginBottom: 0 },
            duration: time,
            curve,
            doing: (e) => {
                target.style.cssText = `
                ${startCss}
                padding-top: ${e.value.paddingTop}px; 
                padding-bottom: ${e.value.paddingBottom}px;
                margin-top: ${e.value.marginTop}px; 
                margin-bottom: ${e.value.marginBottom}px; 
                height: ${e.value.height}px
                `;
                doing && doing.call(target, { frame: e.frame, value: e.value.height, step: e.step });
            }, done: (e) => {
                target.style.cssText = `${rawStyle}display: none`;
                done && done.call(target, { frame: e.frame, value: e.value.height, step: e.step });
            }
        });
    }
    return target;
};
export default slideUp;
