import { __assign, __rest, __spreadArrays } from "tslib";
import React, { useState, useEffect, useContext } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
import { CollapseContext } from './collapse-context';
import { getPrefixCls } from '../_utils/general';
var toArray = function (activeKey) {
    return Array.isArray(activeKey) ? activeKey : [activeKey];
};
var Collapse = React.forwardRef(function (props, ref) {
    var _a;
    var _b = props.showArrow, showArrow = _b === void 0 ? true : _b, _c = props.bordered, bordered = _c === void 0 ? true : _c, _d = props.deletable, deletable = _d === void 0 ? false : _d, _e = props.accordion, accordion = _e === void 0 ? false : _e, _f = props.defaultActiveKey, defaultActiveKey = _f === void 0 ? [] : _f, customisedCls = props.prefixCls, activeKey = props.activeKey, onChange = props.onChange, className = props.className, children = props.children, otherProps = __rest(props, ["showArrow", "bordered", "deletable", "accordion", "defaultActiveKey", "prefixCls", "activeKey", "onChange", "className", "children"]);
    var currentActiveKey = defaultActiveKey;
    if (activeKey) {
        currentActiveKey = activeKey;
    }
    var _g = useState(toArray(currentActiveKey)), activeItems = _g[0], setActiveItems = _g[1];
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('collapse', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className, (_a = {},
        _a[prefixCls + "_borderless"] = !bordered,
        _a));
    var updateActiveItems = function (items) {
        if (!('activeKey' in props)) {
            setActiveItems(items);
        }
        onChange && onChange(items);
    };
    var handleOnItemClick = function (itemKey) {
        var items = activeItems;
        if (accordion) {
            items = items[0] === itemKey ? [] : [itemKey];
        }
        else {
            items = __spreadArrays(activeItems);
            var index = items.indexOf(itemKey);
            var isActive = index > -1;
            if (isActive) {
                items.splice(index, 1);
            }
            else {
                items.push(itemKey);
            }
        }
        updateActiveItems(items);
    };
    useEffect(function () {
        activeKey && setActiveItems(toArray(activeKey));
    }, [activeKey]);
    return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cls }),
        React.createElement(CollapseContext.Provider, { value: {
                activeKeys: activeItems,
                onItemClick: handleOnItemClick,
            } }, React.Children.map(children, function (child, idx) {
            var childElement = child;
            if (childElement.type.displayName === 'CollapsePanel') {
                var itemProps = {
                    deletable: deletable,
                    showArrow: showArrow,
                    itemKey: "" + idx,
                };
                return React.cloneElement(childElement, itemProps);
            }
            return child;
        }))));
});
Collapse.displayName = 'Collapse';
export default Collapse;
//# sourceMappingURL=collapse.js.map