import * as tslib_1 from "tslib";
import React, { useRef } from 'react';
import classNames from 'classnames';
import Icon from '../icon';
import { CSSTransition } from 'react-transition-group';
var defaultProps = {
    prefixCls: 'ty-collapse-item',
    showArrow: true,
    isActive: false,
};
var richNode = function (node, isActive) {
    return typeof node === 'function' ? node(isActive) : node;
};
var CollapsePanel = function (props) {
    var _a;
    var itemKey = props.itemKey, header = props.header, isActive = props.isActive, disabled = props.disabled, extra = props.extra, deletable = props.deletable, onItemClick = props.onItemClick, className = props.className, style = props.style, showArrow = props.showArrow, prefixCls = props.prefixCls, children = props.children;
    var itemEl = useRef(null);
    var contentEl = useRef(null);
    var cls = classNames(prefixCls, className, (_a = {}, _a[prefixCls + "_active"] = isActive, _a));
    var _headerOnClick = function () {
        if (!disabled) {
            onItemClick && onItemClick(itemKey);
        }
    };
    var _removeItem = function (e) {
        e.stopPropagation();
        if (!disabled && itemEl.current) {
            itemEl.current.parentNode.removeChild(itemEl.current);
        }
    };
    var _renderHeader = function () {
        var _a, _b;
        var headerCls = classNames(prefixCls + "__header", (_a = {}, _a[prefixCls + "__header_disabled"] = disabled, _a));
        var arrowCls = classNames(prefixCls + "__arrow", (_b = {}, _b[prefixCls + "__arrow_active"] = isActive, _b));
        return (React.createElement("div", { className: headerCls, onClick: _headerOnClick },
            showArrow && React.createElement(Icon, { type: "right", className: arrowCls }),
            React.createElement("div", { className: prefixCls + "__title" }, richNode(header, isActive)),
            React.createElement("div", { className: prefixCls + "__extra" }, deletable ? React.createElement("span", { onClick: _removeItem }, "\u2715") : richNode(extra, isActive))));
    };
    var _getContentHeight = function () {
        return contentEl.current && contentEl.current.scrollHeight;
    };
    var transitionStyles = {
        entering: { height: 0 },
        entered: { height: _getContentHeight() },
        exiting: { height: _getContentHeight() },
        exited: { height: 0 },
    };
    return (React.createElement("div", { className: cls, style: style, ref: itemEl },
        _renderHeader(),
        React.createElement(CSSTransition, { mountOnEnter: true, unmountOnExit: false, in: isActive, classNames: prefixCls + "__content_collapse", timeout: 0 }, function (state) {
            return (React.createElement("div", { ref: contentEl, className: prefixCls + "__content", style: tslib_1.__assign({}, transitionStyles[state]) }, richNode(children, isActive)));
        })));
};
CollapsePanel.defaultProps = defaultProps;
export default CollapsePanel;
//# sourceMappingURL=collapse-panel.js.map