import { requestIdle } from '@designable/shared';
import { observer } from '@formily/reactive-vue';
import { TextWidget, IconWidget } from '../widgets';
import { usePrefix, useWorkbench } from '../hooks';
import cls from 'classnames';
import { defineComponent, ref, watchEffect } from 'vue-demi';
export var SettingsPanel = observer(defineComponent({
    props: ['title', 'extra'],
    setup: function (props, _a) {
        var slots = _a.slots;
        var prefixRef = usePrefix('settings-panel');
        var workbenchRef = useWorkbench();
        var innerVisible = ref(true);
        var pinning = ref(false);
        var visible = ref(true);
        watchEffect(function () {
            if (visible.value || workbenchRef.value.type === 'DESIGNABLE') {
                if (!innerVisible.value) {
                    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;
                    }}>
              <IconWidget infer="Setting" size={'20px'}/>
            </div>);
            }
            return (<div class={cls(prefixRef.value, { pinning: pinning.value })}>
            <div class={prefixRef.value + '-header'}>
              <div class={prefixRef.value + '-header-title'}>
                <TextWidget>{props.title}</TextWidget>
              </div>
              <div class={prefixRef.value + '-header-actions'}>
                <div class={prefixRef.value + '-header-extra'}>
                  {props.extra}
                </div>
                {!pinning.value && (<IconWidget infer="PushPinOutlined" key={prefixRef.value + '-header-pin'} class={prefixRef.value + '-header-pin'} onClick={function () {
                        pinning.value = !pinning.value;
                    }}/>)}
                {pinning.value && (<IconWidget infer="PushPinFilled" key={prefixRef.value + '-pin-filled'} class={prefixRef.value + '-pin-filled'} onClick={function () {
                        pinning.value = !pinning.value;
                    }}/>)}
                <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