import { observer } from '@formily/reactive-vue';
import { useTree, useWorkbench } from '../hooks';
import { Viewport } from '../containers';
import { defineComponent } from 'vue-demi';
// export interface IViewPanelProps {
//   type: WorkbenchTypes
//   children: (
//     tree: TreeNode,
//     onChange: (tree: ITreeNode) => void
//   ) => React.ReactElement
//   scrollable?: boolean
//   dragTipsDirection?: 'left' | 'right'
// }
var ViewPanelComponent = defineComponent({
    name: 'DnViewPanel',
    props: {
        type: String,
        scrollable: { type: Boolean, default: true },
        dragTipsDirection: { type: String },
    },
    setup: function (props, _a) {
        var slots = _a.slots;
        // const visible = ref(true)
        var workbenchRef = useWorkbench();
        var treeRef = useTree();
        // onMounted(() => {
        //   if (workbenchRef.value.type === props.type) {
        //     requestIdle(() => {
        //       requestAnimationFrame(() => {
        //         visible.value = true
        //       })
        //     })
        //   } else {
        //     visible.value = false
        //   }
        // })
        return function () {
            if (workbenchRef.value.type !== props.type)
                return null;
            var render = function () {
                var _a;
                return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots, treeRef.value, function (payload) {
                    treeRef.value.from(payload);
                    treeRef.value.takeSnapshot();
                });
            };
            if (workbenchRef.value.type === 'DESIGNABLE') {
                return (<Viewport {...{ dragTipsDirection: props.dragTipsDirection }}>
            {render()}
          </Viewport>);
            }
            return (<div style={{
                    overflow: props.scrollable ? 'overlay' : 'hidden',
                    height: '100%',
                    cursor: 'auto',
                    userSelect: 'text',
                }}>
          {render()}
        </div>);
        };
    },
});
export var ViewPanel = observer(ViewPanelComponent);
//# sourceMappingURL=ViewPanel.jsx.map