import React, { useRef, useEffect, useCallback } from 'react';
var COLLAPSE_DURATION = 250;
var CollapseTransition = function (props) {
    var isShow = props.isShow, children = props.children;
    var leaveTimerRef = useRef(null);
    var enterTimerRef = useRef(null);
    var ref = useRef(null);
    var beforeEnter = useCallback(function () {
        var el = ref.current;
        if (el) {
            el.style.display = 'block';
            el.style.height = '0px';
        }
    }, []);
    var afterEnter = useCallback(function () {
        var el = ref.current;
        if (el) {
            el.style.display = 'block';
            el.style.height = '';
        }
    }, []);
    var enter = useCallback(function () {
        var el = ref.current;
        if (el) {
            if (el.scrollHeight !== 0) {
                el.style.height = el.scrollHeight + 'px';
            }
            else {
                el.style.height = '';
            }
            enterTimerRef.current = window.setTimeout(function () { return afterEnter(); }, COLLAPSE_DURATION);
        }
    }, [afterEnter]);
    var beforeLeave = useCallback(function () {
        var el = ref.current;
        if (el) {
            el.style.display = 'block';
            if (el.scrollHeight !== 0) {
                el.style.height = el.scrollHeight + 'px';
            }
        }
    }, []);
    var afterLeave = useCallback(function () {
        var el = ref.current;
        if (el) {
            el.style.display = 'none';
            el.style.height = '';
        }
    }, []);
    var leave = useCallback(function () {
        var el = ref.current;
        if (el) {
            if (el.scrollHeight !== 0) {
                el.style.height = '0px';
            }
            leaveTimerRef.current = window.setTimeout(function () { return afterLeave(); }, COLLAPSE_DURATION);
        }
    }, [afterLeave]);
    var triggerChange = useCallback(function (isCollapsed) {
        var enterTimer = enterTimerRef.current;
        var leaveTimer = leaveTimerRef.current;
        enterTimer && window.clearTimeout(enterTimer);
        leaveTimer && window.clearTimeout(leaveTimer);
        if (isCollapsed) {
            beforeEnter();
            enter();
        }
        else {
            beforeLeave();
            leave();
        }
    }, [enter, leave, beforeEnter, beforeLeave]);
    useEffect(function () {
        beforeEnter();
        enter();
        return function () {
            beforeLeave();
            leave();
        };
    }, [enter, leave, beforeEnter, beforeLeave]);
    useEffect(function () {
        triggerChange(isShow);
    }, [isShow, triggerChange]);
    return (React.createElement("div", { className: "ty-collapse-transition", ref: ref }, children));
};
CollapseTransition.displayName = 'CollapseTransition';
export default CollapseTransition;
//# sourceMappingURL=index.js.map