/**
 * @since Last modified: 2024-07-20 16:03:41
 * @function fadeOut
 * @description Let the hidden element or element with transparency be completely displayed.
 * @param {object} options  - The parameters of fade out.
 * @param {getEl} [options.el]  - The target node.The writing is the same as getEl.
 * @param {string} [options.display]  - 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 {number} [options.duration=200]  - The duration of fade out.The unit is ms.
 * @param {fn_cb_ease_app} [options.doing]  - The call back in progress.Support parameters:"frame" , "step" and "value"(opacity value).
 * @param {fn_cb_ease_app} [options.done]  - The call back after completion.Support parameters:"frame" , "step" and "value"(opacity value).
 * @returns {*} - The the target dom.
 * @see {@link https://codepen.io/axui/pen/ExrMeXY|demo @ codepen}
 * @example
 * ax.fadeOut({el:'#demo'});
 * <!--return the target dom-->
 */
'use strict';
import getEl from "./getEl";
import elState from "./elState";
import ease from "./ease";
import style from "./style";
import { T_el } from "../../../types/ax";
type Options = { el: any, display?: string, doing?: Function, done?: Function, curve?: string, duration?: number }
let fadeOut = ({ el, display, doing, done, duration = 200, curve = 'easeOut' }: Options) => {
    let target = (getEl(el) as T_el);
    if (!target) {
        throw new Error('The target node does not exist!');
    }
    let opacity = parseFloat(style(target).opacity);
    if (opacity === 0) {
        return target;
    }
    display ? target.style.display = display : null;
    if (elState(target).isCalc) {
        ease({
            from: { opacity },
            to: { opacity: 0 },
            duration,
            curve,
            doing: (e: any) => {
                target.style.opacity = e.value.opacity;
                doing && doing.call(target, { frame: e.frame, value: e.value.opacity, step: e.step });
            }, done: (e: any) => {
                target.style.opacity = 0;
                done && done.call(target, { frame: e.frame, value: e.value.opacity, step: e.step });
            }
        });
    }
    return target;
};
export default fadeOut;
