"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DesignerToolsWidget = void 0;
var reactive_vue_1 = require("@formily/reactive-vue");
var gd_antd_plus_1 = require("@gaoding/gd-antd-plus");
var core_1 = require("@designable/core");
var hooks_1 = require("../../hooks");
var IconWidget_1 = require("../IconWidget");
var classnames_1 = __importDefault(require("classnames"));
require("./styles.less");
var vue_demi_1 = require("vue-demi");
var shared_1 = require("../../shared");
var DesignerToolsWidgetComponent = (0, vue_demi_1.defineComponent)({
    name: 'DesignerToolsWidget',
    props: {
        className: String,
        use: { type: Array, default: function () { return ['HISTORY', 'CURSOR', 'SCREEN_TYPE']; } },
    },
    emits: ['change'],
    setup: function (props) {
        var screenRef = (0, hooks_1.useScreen)();
        var cursorRef = (0, hooks_1.useCursor)();
        var workbenchRef = (0, hooks_1.useWorkbench)();
        var historyRef = (0, hooks_1.useHistory)();
        var sizeRef = (0, vue_demi_1.reactive)({
            width: null,
            height: null,
        });
        var prefixRef = (0, hooks_1.usePrefix)('designer-tools');
        var style = (0, shared_1.useStyle)();
        return function () {
            var renderResponsiveController = function () {
                if (!props.use.includes('SCREEN_TYPE'))
                    return null;
                if (screenRef.value.type !== core_1.ScreenType.Responsive)
                    return null;
                return (<>
            <gd_antd_plus_1.InputNumber size='small' controls={false} modelValue={screenRef.value.width} style={{ width: '110px', textAlign: 'center' }} {...{
                    "onUpdate:modelValue": function (value) {
                        sizeRef.width = value;
                    },
                    onKeyup: function (e) {
                        if (e.key === 'Enter') {
                            screenRef.value.setSize(sizeRef.width, screenRef.value.height);
                        }
                    }
                }}/>
            <IconWidget_1.IconWidget {...{ size: '10px' }} infer="Close" style={{ padding: '0 3px', color: '#999' }}/>
            <gd_antd_plus_1.InputNumber {...{
                    size: 'small',
                    controls: false,
                    modelValue: screenRef.value.height,
                    "onUpdate:modelValue": function (value) {
                        sizeRef.height = value;
                    },
                    onKeyup: function (e) {
                        if (e.key === 'Enter') {
                            screenRef.value.setSize(screenRef.value.width, sizeRef.height);
                        }
                    }
                }} style={{
                        width: '110px',
                        textAlign: 'center',
                        marginRight: '10px',
                    }}/>
            {(screenRef.value.width !== '100%' ||
                        screenRef.value.height !== '100%') && (<gd_antd_plus_1.Button {...{ size: 'small' }} style={{ marginRight: '20px' }} onClick={function () {
                            screenRef.value.resetSize();
                        }}>
                  <IconWidget_1.IconWidget infer="Recover"/>
                </gd_antd_plus_1.Button>)}
          </>);
            };
            var renderScreenTypeController = function () {
                if (!props.use.includes('SCREEN_TYPE'))
                    return null;
                return (<gd_antd_plus_1.Button.Group size="small" style={{ marginRight: '20px' }} key="renderScreenTypeController">
            <gd_antd_plus_1.Button {...{
                    size: 'small',
                    disabled: screenRef.value.type === core_1.ScreenType.PC,
                }} onClick={function () {
                        screenRef.value.setType(core_1.ScreenType.PC);
                    }}>
              <IconWidget_1.IconWidget infer="PC"/>
            </gd_antd_plus_1.Button>
            <gd_antd_plus_1.Button {...{
                    size: 'small',
                    disabled: screenRef.value.type === core_1.ScreenType.Mobile,
                }} onClick={function () {
                        screenRef.value.setType(core_1.ScreenType.Mobile);
                    }}>
              <IconWidget_1.IconWidget infer="Mobile"/>
            </gd_antd_plus_1.Button>
            <gd_antd_plus_1.Button {...{
                    size: 'small',
                    disabled: screenRef.value.type === core_1.ScreenType.Responsive,
                }} onClick={function () {
                        screenRef.value.setType(core_1.ScreenType.Responsive);
                    }}>
              <IconWidget_1.IconWidget infer="Responsive"/>
            </gd_antd_plus_1.Button>
          </gd_antd_plus_1.Button.Group>);
            };
            var renderMobileController = function () {
                if (!props.use.includes('SCREEN_TYPE'))
                    return null;
                if (screenRef.value.type !== core_1.ScreenType.Mobile)
                    return;
                return (<gd_antd_plus_1.Button {...{ size: 'small' }} style={{ marginRight: '20px' }} onClick={function () {
                        screenRef.value.setFlip(!screenRef.value.flip);
                    }}>
            <IconWidget_1.IconWidget infer="Flip" style={{
                        transition: 'all .15s ease-in',
                        transform: screenRef.value.flip ? 'rotate(-90deg)' : '',
                    }}/>
          </gd_antd_plus_1.Button>);
            };
            var renderHistoryController = function () {
                var _a, _b;
                if (!props.use.includes('HISTORY'))
                    return null;
                return (<gd_antd_plus_1.Button.Group {...{ size: 'small' }} style={{ marginRight: '20px' }} key="renderHistoryController">
            <gd_antd_plus_1.Button {...{ size: 'small', disabled: !((_a = historyRef.value) === null || _a === void 0 ? void 0 : _a.allowUndo) }} onClick={function () {
                        historyRef.value.undo();
                    }}>
              <IconWidget_1.IconWidget infer="Undo"/>
            </gd_antd_plus_1.Button>
            <gd_antd_plus_1.Button {...{ size: 'small', disabled: !((_b = historyRef.value) === null || _b === void 0 ? void 0 : _b.allowRedo) }} onClick={function () {
                        historyRef.value.redo();
                    }}>
              <IconWidget_1.IconWidget infer="Redo"/>
            </gd_antd_plus_1.Button>
          </gd_antd_plus_1.Button.Group>);
            };
            var renderCursorController = function () {
                if (workbenchRef.value.type !== 'DESIGNABLE')
                    return null;
                if (!props.use.includes('CURSOR'))
                    return null;
                return (<gd_antd_plus_1.Button.Group size="small" style={{ marginRight: '20px' }} key="renderCursorController">
            <gd_antd_plus_1.Button {...{
                    size: 'small',
                    disabled: cursorRef.value.type === core_1.CursorType.Move,
                }} onClick={function () {
                        cursorRef.value.setType(core_1.CursorType.Move);
                    }}>
              <IconWidget_1.IconWidget infer="Move"/>
            </gd_antd_plus_1.Button>
            <gd_antd_plus_1.Button {...{
                    size: 'small',
                    disabled: cursorRef.value.type === core_1.CursorType.Selection,
                }} onClick={function () {
                        cursorRef.value.setType(core_1.CursorType.Selection);
                    }}>
              <IconWidget_1.IconWidget infer="Selection"/>
            </gd_antd_plus_1.Button>
          </gd_antd_plus_1.Button.Group>);
            };
            return (<div style={style} class={(0, classnames_1.default)(prefixRef.value, props.className)}>
          {renderHistoryController()}
          {renderCursorController()}
          {renderScreenTypeController()}
          {renderMobileController()}
          {renderResponsiveController()}
        </div>);
        };
    },
});
exports.DesignerToolsWidget = (0, reactive_vue_1.observer)(DesignerToolsWidgetComponent);
//# sourceMappingURL=index.jsx.map