import { observer } from '@formily/reactive-vue';
import { Button, InputNumber } from '@gaoding/gd-antd-plus';
import { CursorType, ScreenType } from '@designable/core';
import { useCursor, useHistory, useScreen, usePrefix, useWorkbench, } from '../../hooks';
import { IconWidget } from '../IconWidget';
import cls from 'classnames';
import './styles.less';
import { defineComponent, reactive } from 'vue-demi';
import { useStyle } from '../../shared';
var DesignerToolsWidgetComponent = defineComponent({
    name: 'DesignerToolsWidget',
    props: {
        className: String,
        use: { type: Array, default: function () { return ['HISTORY', 'CURSOR', 'SCREEN_TYPE']; } },
    },
    emits: ['change'],
    setup: function (props) {
        var screenRef = useScreen();
        var cursorRef = useCursor();
        var workbenchRef = useWorkbench();
        var historyRef = useHistory();
        var sizeRef = reactive({
            width: null,
            height: null,
        });
        var prefixRef = usePrefix('designer-tools');
        var style = useStyle();
        return function () {
            var renderResponsiveController = function () {
                if (!props.use.includes('SCREEN_TYPE'))
                    return null;
                if (screenRef.value.type !== ScreenType.Responsive)
                    return null;
                return (<>
            <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 {...{ size: '10px' }} infer="Close" style={{ padding: '0 3px', color: '#999' }}/>
            <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%') && (<Button {...{ size: 'small' }} style={{ marginRight: '20px' }} onClick={function () {
                            screenRef.value.resetSize();
                        }}>
                  <IconWidget infer="Recover"/>
                </Button>)}
          </>);
            };
            var renderScreenTypeController = function () {
                if (!props.use.includes('SCREEN_TYPE'))
                    return null;
                return (<Button.Group size="small" style={{ marginRight: '20px' }} key="renderScreenTypeController">
            <Button {...{
                    size: 'small',
                    disabled: screenRef.value.type === ScreenType.PC,
                }} onClick={function () {
                        screenRef.value.setType(ScreenType.PC);
                    }}>
              <IconWidget infer="PC"/>
            </Button>
            <Button {...{
                    size: 'small',
                    disabled: screenRef.value.type === ScreenType.Mobile,
                }} onClick={function () {
                        screenRef.value.setType(ScreenType.Mobile);
                    }}>
              <IconWidget infer="Mobile"/>
            </Button>
            <Button {...{
                    size: 'small',
                    disabled: screenRef.value.type === ScreenType.Responsive,
                }} onClick={function () {
                        screenRef.value.setType(ScreenType.Responsive);
                    }}>
              <IconWidget infer="Responsive"/>
            </Button>
          </Button.Group>);
            };
            var renderMobileController = function () {
                if (!props.use.includes('SCREEN_TYPE'))
                    return null;
                if (screenRef.value.type !== ScreenType.Mobile)
                    return;
                return (<Button {...{ size: 'small' }} style={{ marginRight: '20px' }} onClick={function () {
                        screenRef.value.setFlip(!screenRef.value.flip);
                    }}>
            <IconWidget infer="Flip" style={{
                        transition: 'all .15s ease-in',
                        transform: screenRef.value.flip ? 'rotate(-90deg)' : '',
                    }}/>
          </Button>);
            };
            var renderHistoryController = function () {
                var _a, _b;
                if (!props.use.includes('HISTORY'))
                    return null;
                return (<Button.Group {...{ size: 'small' }} style={{ marginRight: '20px' }} key="renderHistoryController">
            <Button {...{ size: 'small', disabled: !((_a = historyRef.value) === null || _a === void 0 ? void 0 : _a.allowUndo) }} onClick={function () {
                        historyRef.value.undo();
                    }}>
              <IconWidget infer="Undo"/>
            </Button>
            <Button {...{ size: 'small', disabled: !((_b = historyRef.value) === null || _b === void 0 ? void 0 : _b.allowRedo) }} onClick={function () {
                        historyRef.value.redo();
                    }}>
              <IconWidget infer="Redo"/>
            </Button>
          </Button.Group>);
            };
            var renderCursorController = function () {
                if (workbenchRef.value.type !== 'DESIGNABLE')
                    return null;
                if (!props.use.includes('CURSOR'))
                    return null;
                return (<Button.Group size="small" style={{ marginRight: '20px' }} key="renderCursorController">
            <Button {...{
                    size: 'small',
                    disabled: cursorRef.value.type === CursorType.Move,
                }} onClick={function () {
                        cursorRef.value.setType(CursorType.Move);
                    }}>
              <IconWidget infer="Move"/>
            </Button>
            <Button {...{
                    size: 'small',
                    disabled: cursorRef.value.type === CursorType.Selection,
                }} onClick={function () {
                        cursorRef.value.setType(CursorType.Selection);
                    }}>
              <IconWidget infer="Selection"/>
            </Button>
          </Button.Group>);
            };
            return (<div style={style} class={cls(prefixRef.value, props.className)}>
          {renderHistoryController()}
          {renderCursorController()}
          {renderScreenTypeController()}
          {renderMobileController()}
          {renderResponsiveController()}
        </div>);
        };
    },
});
export var DesignerToolsWidget = observer(DesignerToolsWidgetComponent);
//# sourceMappingURL=index.jsx.map