"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CompositePanel = exports.CompositePanelComponent = void 0;
var shared_1 = require("@designable/shared");
var classnames_1 = __importDefault(require("classnames"));
var widgets_1 = require("../widgets");
var hooks_1 = require("../hooks");
var __builtins__1 = require("@jeamn/formily-components/src/__builtins__");
var vue_demi_1 = require("vue-demi");
var parseItems = function (children) {
    var items = [];
    children.forEach(function (item, index) {
        var _a;
        items.push(__assign(__assign({ key: (_a = item.key) !== null && _a !== void 0 ? _a : index }, item === null || item === void 0 ? void 0 : item.props), { children: item }));
    });
    return items;
};
var findItem = function (items, key) {
    for (var index = 0; index < items.length; index++) {
        var item = items[index];
        if (key === index)
            return item;
        if (key === item.key)
            return item;
    }
};
var getDefaultKey = function (children) {
    var _a;
    var items = parseItems(children);
    return (_a = items === null || items === void 0 ? void 0 : items[0]) === null || _a === void 0 ? void 0 : _a.key;
};
// : VueComponent<ICompositePanelProps>
exports.CompositePanelComponent = (0, vue_demi_1.defineComponent)({
    name: 'CompositePanel',
    props: {
        activeKey: [Number, String],
        defaultActiveKey: Number,
        defaultPinning: Boolean,
        showNavTitle: Boolean,
        defaultOpen: { type: Boolean, default: true },
        direction: String,
        onChange: Function,
    },
    setup: function (props, _a) {
        var _b, _c, _d, _e;
        var slots = _a.slots;
        // : VueComponent<ICompositePanelProps>
        var prefixRef = (0, hooks_1.usePrefix)('composite-panel');
        var children = (_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots);
        var activeKey = (0, vue_demi_1.ref)((_c = props.defaultActiveKey) !== null && _c !== void 0 ? _c : getDefaultKey(children));
        // 获取所有子组件
        var items = parseItems(children);
        var pinning = (0, vue_demi_1.ref)((_d = props.defaultPinning) !== null && _d !== void 0 ? _d : false);
        var visible = (0, vue_demi_1.ref)((_e = props.defaultOpen) !== null && _e !== void 0 ? _e : true);
        (0, vue_demi_1.watch)(function () { return props.activeKey; }, function () {
            if ((0, shared_1.isValid)(props.activeKey)) {
                if (props.activeKey !== activeKey.value) {
                    activeKey.value = props.activeKey;
                }
            }
        }, { immediate: true });
        var renderContent = function () {
            var prefix = (0, vue_demi_1.unref)(prefixRef);
            var currentItem = findItem(items, (0, vue_demi_1.unref)(activeKey));
            var content = currentItem === null || currentItem === void 0 ? void 0 : currentItem.children;
            if (!(0, vue_demi_1.unref)(visible) || !content)
                return;
            return (<div class={(0, classnames_1.default)(prefix + '-tabs-content', {
                    pinning: (0, vue_demi_1.unref)(pinning),
                })}>
            <div class={prefix + '-tabs-header'}>
              <div class={prefix + '-tabs-header-title'}>
                <widgets_1.TextWidget>{currentItem.title}</widgets_1.TextWidget>
              </div>
              <div class={prefix + '-tabs-header-actions'}>
                <div class={prefix + '-tabs-header-extra'}>
                  {currentItem === null || currentItem === void 0 ? void 0 : currentItem.extra}
                </div>
                {!pinning.value ?
                    (<widgets_1.IconWidget key={prefix + '-tabs-header-pin'} class={prefix + '-tabs-header-pin'} infer='PushPinOutlined' onClick={function () {
                            pinning.value = !pinning.value;
                        }}/>) :
                    <widgets_1.IconWidget key={prefix + '-tabs-header-pin-filled'} class={prefix + '-tabs-header-pin-filled'} infer='PushPinFilled' onClick={function () {
                            pinning.value = !pinning.value;
                        }}/>}
                <widgets_1.IconWidget class={prefix + '-tabs-header-close'} infer='Close' onClick={function () {
                    visible.value = false;
                }}/>
              </div>
            </div>
            <div class={prefix + '-tabs-body'} key={(0, vue_demi_1.unref)(activeKey)}>{content}</div>
          </div>);
        };
        return function () {
            var _a;
            var prefix = (0, vue_demi_1.unref)(prefixRef);
            return (<div class={(0, classnames_1.default)(prefix, (_a = {},
                    _a["direction-".concat(props.direction)] = !!props.direction,
                    _a))}>
            <div class={prefix + '-tabs'}>
              {items.map(function (item, index) {
                    var _a;
                    var takeTab = function () {
                        if (item.href) {
                            return <a href={item.href}>{item.icon}</a>;
                        }
                        return (<widgets_1.IconWidget tooltip={props.showNavTitle
                                ? null
                                : {
                                    content: (0, vue_demi_1.markRaw)(<widgets_1.TextWidget>{item.title}</widgets_1.TextWidget>),
                                    placement: props.direction === 'right' ? 'left' : 'right',
                                }} infer={item.icon}/>);
                    };
                    var shape = (_a = item.shape) !== null && _a !== void 0 ? _a : 'tab';
                    var Comp = shape === 'link' ? 'a' : 'div';
                    return (<Comp key={index} href={item.href} class={(0, classnames_1.default)(prefix + '-tabs-pane', {
                            active: (0, vue_demi_1.unref)(activeKey) === item.key,
                        })} onClick={function (e) {
                            var _a, _b;
                            if (shape === 'tab') {
                                if ((0, vue_demi_1.unref)(activeKey) === item.key) {
                                    visible.value = !visible.value;
                                }
                                else {
                                    visible.value = true;
                                }
                                if (!(props === null || props === void 0 ? void 0 : props.activeKey) || !(props === null || props === void 0 ? void 0 : props.onChange))
                                    activeKey.value = item.key;
                            }
                            (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
                            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, item.key);
                        }}>
                    {takeTab()}
                    {props.showNavTitle && item.title ? (<div class={prefix + '-tabs-pane-title'}>
                        <widgets_1.TextWidget>{item.title}</widgets_1.TextWidget>
                      </div>) : null}
                  </Comp>);
                })}
            </div>
            {renderContent()}
          </div>);
        };
    },
});
/**
 *  shape?: 'tab' | 'button' | 'link'
    title?: VNode
    icon?: VNode
    key?: number | string
    href?: string
    // React.MouseEvent<HTMLDivElement, MouseEvent>
    onClick?: (e: any) => void
    extra?: VNode
 */
var Item = (0, vue_demi_1.defineComponent)({
    name: 'CompositePanel.Item',
    // key is reserved
    props: ['shape', 'title', 'icon', 'href', 'extra', 'onClick'],
    setup: function (props, _a) {
        var slots = _a.slots;
        return function () {
            var _a;
            return ((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
        };
    },
});
// : VueComponent<ICompositePanelProps> & {
//   Item: VueComponent<ICompositePanelItemProps>
// }
exports.CompositePanel = (0, __builtins__1.composeExport)(exports.CompositePanelComponent, {
    Item: (0, __builtins__1.composeExport)(Item, { type: Item }),
});
//# sourceMappingURL=CompositePanel.jsx.map