import React, { useContext, useRef } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import { ArrowDown } from '../_utils/components';
import CollapseTransition from '../collapse-transition';
import { CollapseContext } from './collapse-context';
var richNode = function (node, isActive) {
    return typeof node === 'function' ? node(isActive) : node;
};
var CollapsePanel = function (props) {
    var _a;
    var _b = props.showArrow, showArrow = _b === void 0 ? true : _b, itemKey = props.itemKey, header = props.header, disabled = props.disabled, extra = props.extra, deletable = props.deletable, onHeaderOnClick = props.onHeaderOnClick, className = props.className, style = props.style, children = props.children, customisedCls = props.prefixCls;
    var itemRef = useRef(null);
    var configContext = useContext(ConfigContext);
    var _c = useContext(CollapseContext), activeKeys = _c.activeKeys, onItemClick = _c.onItemClick;
    var prefixCls = getPrefixCls('collapse-item', configContext.prefixCls, customisedCls);
    var active = activeKeys.includes(itemKey);
    var cls = classNames(prefixCls, className, (_a = {},
        _a[prefixCls + "_active"] = active,
        _a));
    var headerOnClick = function (e) {
        if (!disabled) {
            onHeaderOnClick && onHeaderOnClick(e);
            onItemClick && onItemClick(itemKey);
        }
    };
    var removeItem = function (e) {
        var _a;
        e.stopPropagation();
        if (!disabled) {
            var node = itemRef.current;
            node && ((_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node));
        }
    };
    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"] = active,
            _b));
        return (React.createElement("div", { className: headerCls, onClick: headerOnClick },
            showArrow && React.createElement(ArrowDown, { size: 10, className: arrowCls }),
            React.createElement("div", { className: prefixCls + "__title" }, richNode(header, active)),
            React.createElement("div", { className: prefixCls + "__extra" }, deletable ? React.createElement("span", { onClick: removeItem }, "\u2715") : richNode(extra, active))));
    };
    return (React.createElement("div", { className: cls, style: style, ref: itemRef },
        renderHeader(),
        React.createElement(CollapseTransition, { isShow: active },
            React.createElement("div", { className: prefixCls + "__content" }, richNode(children, active)))));
};
CollapsePanel.displayName = 'CollapsePanel';
export default CollapsePanel;
//# sourceMappingURL=collapse-panel.js.map