import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import cx from 'classnames';
import { AnimateHeight } from '../utils/component/AnimateHeight';
import LazyMount from '../utils/component/LazyMount';
import { EASE_IN_CUBIC, EASE_IN_OUT, EASE_OUT_CUBIC, } from '../utils/timingFunctions';
import { DisabledContext } from '../disabled';
import isNil from '../utils/isNil';
import Icon from '../icon/Icon';
var NO_BOTTOM_BORDER = {
    borderBottomWidth: 0,
    borderBottomColor: 'rgba(255, 255, 255, 0)',
    transition: "border-bottom-width 200ms " + EASE_IN_OUT + ", border-bottom-color 200ms " + EASE_IN_OUT,
};
var NO_STYLE = {};
var CollapsePanel = (function (_super) {
    __extends(CollapsePanel, _super);
    function CollapsePanel() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            animateAppear: !_this.props.active,
        };
        _this.toggle = function () {
            var _a = _this.props, onChange = _a.onChange, panelKey = _a.panelKey, active = _a.active, _b = _a.disabled, disabled = _b === void 0 ? _this.context.value : _b;
            if (!disabled && !isNil(panelKey)) {
                onChange === null || onChange === void 0 ? void 0 : onChange(panelKey, !active);
            }
        };
        return _this;
    }
    CollapsePanel.prototype.render = function () {
        var _a = this.props, children = _a.children, title = _a.title, style = _a.style, active = _a.active, _b = _a.disabled, disabled = _b === void 0 ? this.context.value : _b, showArrow = _a.showArrow, className = _a.className, isLast = _a.isLast, bordered = _a.bordered, extra = _a.extra, panelTitleBackground = _a.panelTitleBackground, showContentBackground = _a.showContentBackground;
        var animateAppear = this.state.animateAppear;
        var isBorderedLast = bordered && isLast;
        var titleStyle = isBorderedLast && !active ? NO_BOTTOM_BORDER : NO_STYLE;
        var contentBoxStyle = isBorderedLast || !active ? NO_BOTTOM_BORDER : NO_STYLE;
        return (_jsxs("div", __assign({ className: cx('zent-collapse-panel', className, {
                'zent-collapse-panel--has-arrow': showArrow,
                'zent-collapse-panel--active': active,
                'zent-collapse-panel--inactive': !active,
                'zent-collapse-panel--disabled': disabled,
            }), style: style, "data-zv": 'v10.0.12' }, { children: [_jsxs("div", __assign({ className: cx('zent-collapse-panel__title', {
                        'zent-collapse-panel__title--bg-none': panelTitleBackground === 'none',
                        'zent-collapse-panel__title--bg-default': panelTitleBackground === 'default',
                    }), style: titleStyle, onClick: this.toggle, "data-zv": 'v10.0.12' }, { children: [_jsxs("div", __assign({ className: "zent-collapse-panel__title__content", "data-zv": 'v10.0.12' }, { children: [showArrow && (_jsx(Icon, { type: "down", className: "zent-collapse-panel__arrow" }, void 0)), title] }), void 0), _jsx("div", __assign({ className: "zent-collapse-panel__title__extra", "data-zv": 'v10.0.12' }, { children: extra }), void 0)] }), void 0), _jsx(LazyMount, __assign({ mount: active }, { children: _jsx(AnimateHeight, __assign({ appear: animateAppear, duration: 160, height: active ? 'auto' : 0, transitionPrototype: "all", easing: active ? EASE_OUT_CUBIC : EASE_IN_CUBIC, className: cx('zent-collapse-panel__content-box', {
                            'zent-collapse-panel__content-box--inactive': !active,
                            'zent-collapse-panel__content-box--active': active,
                            'zent-collapse-panel__content_box--show-background': showContentBackground,
                        }), style: contentBoxStyle }, { children: _jsx("div", __assign({ className: "zent-collapse-panel__content", "data-zv": 'v10.0.12' }, { children: children }), void 0) }), void 0) }), void 0)] }), void 0));
    };
    CollapsePanel.defaultProps = {
        showArrow: true,
    };
    CollapsePanel.contextType = DisabledContext;
    return CollapsePanel;
}(Component));
export { CollapsePanel };
export default CollapsePanel;
