"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SettingsPanel = void 0;
var shared_1 = require("@designable/shared");
var reactive_vue_1 = require("@formily/reactive-vue");
var widgets_1 = require("../widgets");
var hooks_1 = require("../hooks");
var classnames_1 = __importDefault(require("classnames"));
var vue_demi_1 = require("vue-demi");
exports.SettingsPanel = (0, reactive_vue_1.observer)((0, vue_demi_1.defineComponent)({
    props: ['title', 'extra'],
    setup: function (props, _a) {
        var slots = _a.slots;
        var prefixRef = (0, hooks_1.usePrefix)('settings-panel');
        var workbenchRef = (0, hooks_1.useWorkbench)();
        var innerVisible = (0, vue_demi_1.ref)(true);
        var pinning = (0, vue_demi_1.ref)(false);
        var visible = (0, vue_demi_1.ref)(true);
        (0, vue_demi_1.watchEffect)(function () {
            if (visible.value || workbenchRef.value.type === 'DESIGNABLE') {
                if (!innerVisible.value) {
                    (0, shared_1.requestIdle)(function () {
                        requestAnimationFrame(function () {
                            innerVisible.value = true;
                        });
                    });
                }
            }
        });
        return function () {
            var _a;
            if (workbenchRef.value.type !== 'DESIGNABLE') {
                if (innerVisible.value)
                    innerVisible.value = false;
                return null;
            }
            if (!visible.value) {
                if (innerVisible)
                    innerVisible.value = false;
                return (<div class={prefixRef.value + '-opener'} onClick={function () {
                        visible.value = true;
                    }}>
              <widgets_1.IconWidget infer="Setting" size={'20px'}/>
            </div>);
            }
            return (<div class={(0, classnames_1.default)(prefixRef.value, { pinning: pinning.value })}>
            <div class={prefixRef.value + '-header'}>
              <div class={prefixRef.value + '-header-title'}>
                <widgets_1.TextWidget>{props.title}</widgets_1.TextWidget>
              </div>
              <div class={prefixRef.value + '-header-actions'}>
                <div class={prefixRef.value + '-header-extra'}>
                  {props.extra}
                </div>
                {!pinning.value && (<widgets_1.IconWidget infer="PushPinOutlined" key={prefixRef.value + '-header-pin'} class={prefixRef.value + '-header-pin'} onClick={function () {
                        pinning.value = !pinning.value;
                    }}/>)}
                {pinning.value && (<widgets_1.IconWidget infer="PushPinFilled" key={prefixRef.value + '-pin-filled'} class={prefixRef.value + '-pin-filled'} onClick={function () {
                        pinning.value = !pinning.value;
                    }}/>)}
                <widgets_1.IconWidget infer="Close" class={prefixRef.value + '-header-close'} onClick={function () {
                    visible.value = false;
                }}/>
              </div>
            </div>
            <div class={prefixRef.value + '-body'}>
              {innerVisible.value && ((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots))}
            </div>
          </div>);
        };
    },
}));
//# sourceMappingURL=SettingsPanel.jsx.map