/**
 * amis-ui v6.14.0-beta.1
 * Copyright 2018-2025 fex
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var icons = require('./icons.js');
var amisUi = require('amis-ui');
var debounce = require('lodash/debounce');
var reactOverlays = require('react-overlays');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);

var __react_jsx__ = require('react');
var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
(__react_jsx__["default"] || __react_jsx__).Fragment;
var dimensions = [
    {
        name: 'custom',
        width: 375,
        height: 667
    },
    {
        name: 'iPhone SE',
        width: 375,
        height: 667
    },
    {
        name: 'iPhone XR',
        width: 414,
        height: 896
    },
    {
        name: 'iPhone 12 Pro',
        width: 390,
        height: 844
    },
    {
        name: 'iPhone 14 Pro Max',
        width: 430,
        height: 932
    },
    {
        name: 'Pixel 7',
        width: 412,
        height: 915
    },
    {
        name: 'Samsung Galaxy S8+',
        width: 360,
        height: 740
    },
    {
        name: 'Samsung Galaxy S20 Ultra',
        width: 412,
        height: 915
    },
    {
        name: 'iPad Mini',
        width: 768,
        height: 1024
    },
    {
        name: 'iPad Air',
        width: 820,
        height: 1180
    },
    {
        name: 'iPad Pro',
        width: 1024,
        height: 1366
    },
    {
        name: 'Surface Pro 7',
        width: 912,
        height: 1368
    },
    {
        name: 'Surface Duo',
        width: 540,
        height: 720
    },
    {
        name: 'Galaxy Z Fold 5',
        width: 344,
        height: 882
    },
    {
        name: 'Asus Zenfone Fold',
        width: 853,
        height: 1280
    },
    {
        name: 'Samsung Galaxy A51/71',
        width: 412,
        height: 914
    },
    {
        name: 'Nest Hub',
        width: 1024,
        height: 600
    },
    {
        name: 'Next Hub Max',
        width: 1280,
        height: 800
    }
];
var scaleList = [50, 75, 100, 125, 150, 200];
function MobileDevTool(props) {
    var _a = tslib.__read(React__default["default"].useState(function () {
        return JSON.parse(localStorage.getItem('amis-mobile-dev-tool-dimension') || 'null') || dimensions[1];
    }), 2), dimension = _a[0], setDimension = _a[1];
    var defaultScale = React.useRef();
    var _b = tslib.__read(React__default["default"].useState(100), 2), scale = _b[0], setScale = _b[1];
    var _c = tslib.__read(React__default["default"].useState(100), 2), autoScale = _c[0], setAutoScale = _c[1];
    var container = props.container, previewBody = props.previewBody, onChangeScale = props.onChangeScale;
    var resizeObserver = new ResizeObserver(debounce__default["default"](updateAutoScale, 300));
    React.useEffect(function () {
        defaultScale.current = parseInt(localStorage.getItem('amis-mobile-dev-tool-scale') || '0', 10);
    }, []);
    React.useEffect(function () {
        if (container && previewBody) {
            updatePreviewSize({
                width: dimension.width,
                height: dimension.height
            });
            var scale_1 = defaultScale.current || 100;
            if (!defaultScale.current) {
                scale_1 = Math.min(updateAutoScale(), 100);
                defaultScale.current = scale_1;
            }
            setScale(scale_1);
            onChangeScale === null || onChangeScale === void 0 ? void 0 : onChangeScale(scale_1);
            updatePreviewScale(scale_1);
            resizeObserver.observe(container);
        }
        return function () {
            if (container) {
                resizeObserver.unobserve(container);
            }
            if (previewBody) {
                previewBody.style.width = '';
                previewBody.style.height = '';
                previewBody.style.transform = '';
            }
        };
    }, [container, previewBody]);
    function updateDimension(dimension) {
        setDimension(dimension);
        localStorage.setItem('amis-mobile-dev-tool-dimension', JSON.stringify(dimension));
    }
    function updateScale(scale) {
        setScale(scale);
        onChangeScale === null || onChangeScale === void 0 ? void 0 : onChangeScale(scale);
        localStorage.setItem('amis-mobile-dev-tool-scale', scale + '');
    }
    function updateAutoScale() {
        if (!container) {
            return 100;
        }
        var containerRect = container.getBoundingClientRect();
        var width = containerRect.width, height = containerRect.height;
        var previewBodyWidth = (previewBody === null || previewBody === void 0 ? void 0 : previewBody.clientWidth) || 375;
        var previewBodyHeight = (previewBody === null || previewBody === void 0 ? void 0 : previewBody.clientHeight) || 667;
        var scale = Math.min((width - 50) / previewBodyWidth, (height * 0.9) / previewBodyHeight);
        scale = Math.floor(scale * 100);
        setAutoScale(scale);
        return scale;
    }
    function handleRotateScreen() {
        updateDimension({
            name: dimension.name,
            width: dimension.height,
            height: dimension.width
        });
        updatePreviewSize({
            width: dimension.height,
            height: dimension.width
        });
        updateAutoScale();
    }
    function handleAutoScale() {
        updateScale(autoScale);
        updatePreviewScale(autoScale);
    }
    function handleDimensionChange(item) {
        if (item) {
            var value = dimensions.find(function (n) { return n.name === item.value; });
            updateDimension(value);
            updatePreviewSize(value);
            updateScale(100);
            updatePreviewScale(100);
            updateAutoScale();
        }
    }
    function handleCustomInputDimensionChange(value, type) {
        var number = parseInt(value || '0', 10);
        var newDimension = {
            name: 'custom',
            width: type === 'width' ? number : dimension.width,
            height: type === 'height' ? number : dimension.height
        };
        updateDimension(newDimension);
        updatePreviewSize(newDimension);
        updateAutoScale();
    }
    function updatePreviewSize(dimension) {
        if (previewBody) {
            var _a = props.border, border = _a === void 0 ? 20 : _a;
            // 预览区域宽高加上20px的padding
            previewBody.style.width = dimension.width + border + 'px';
            previewBody.style.height = dimension.height + border + 'px';
        }
    }
    function updatePreviewScale(scale) {
        if (previewBody) {
            previewBody.style.transform =
                'translateX(-50%) scale(' + scale / 100 + ')';
        }
    }
    return (_J$X_("div", { className: "ae-MobileDevTool" },
        _J$X_("div", { className: "ae-MobileDevTool-dimensions" },
            _J$X_("label", null, "\u5C3A\u5BF8:"),
            _J$X_(amisUi.Select, { className: "ae-MobileDevTool-select", value: dimension.name, onChange: handleDimensionChange, options: dimensions.map(function (n) { return ({
                    label: n.name === 'custom' ? '自定义' : n.name,
                    value: n.name
                }); }), clearable: false })),
        _J$X_("div", { className: "ae-MobileDevTool-dimension" },
            dimension.name === 'custom' ? (_J$X_("input", { className: "ae-MobileDevTool-dimension-input", value: dimension.width, onChange: function (event) {
                    var value = event.currentTarget.value;
                    handleCustomInputDimensionChange(value, 'width');
                } })) : (_J$X_("span", null, dimension.width)),
            _J$X_("span", null, "\u00D7"),
            dimension.name === 'custom' ? (_J$X_("input", { className: "ae-MobileDevTool-dimension-input", value: dimension.height, onChange: function (event) {
                    var value = event.currentTarget.value;
                    handleCustomInputDimensionChange(value, 'height');
                } })) : (_J$X_("span", null, dimension.height))),
        _J$X_("div", { className: "ae-MobileDevTool-right" },
            _J$X_("div", { className: "ae-MobileDevTool-right-scale" },
                _J$X_(amisUi.Select, { className: "ae-MobileDevTool-select", clearable: false, value: scale, options: tslib.__spreadArray([], tslib.__read(scaleList.map(function (n) { return ({
                        label: "".concat(n, "%"),
                        value: n
                    }); })), false), onChange: function (item) {
                        updateScale(item.value);
                        updatePreviewScale(item.value);
                    } }),
                !scaleList.includes(scale) && (_J$X_("div", { className: "ae-MobileDevTool-right-scale-auto-value" },
                    scale,
                    "%")),
                _J$X_("div", { className: "ae-MobileDevTool-right-scale-auto", onClick: handleAutoScale }, "\u81EA\u9002\u5E94")),
            _J$X_("div", { onClick: handleRotateScreen },
                _J$X_(icons.Icon, { icon: "rotate-screen", className: "ae-MobileDevTool-right-rotate-screen" }))),
        dimension.name === 'custom' && (_J$X_(CustomSizeHandle, { previewBody: previewBody, onChange: function (w, h) {
                updateDimension({
                    name: 'custom',
                    width: w - 20,
                    height: h - 20
                });
            }, onEnd: updateAutoScale, scale: scale }))));
}
function CustomSizeHandle(props) {
    var previewBody = props.previewBody, _a = props.scale, scale = _a === void 0 ? 1 : _a, onChange = props.onChange, onEnd = props.onEnd;
    function handleRightDown(e) {
        e.stopPropagation();
        e.preventDefault();
        document.body.classList.add('width-move');
        document.addEventListener('mousemove', handleRightDragMove);
        document.addEventListener('mouseup', handleRightDragEnd);
    }
    function handleRightDragMove(e) {
        e.stopPropagation();
        if (previewBody) {
            var w = previewBody.clientWidth;
            w += e.movementX;
            w = Math.max(70, w);
            previewBody.style.width = w + 'px';
            onChange === null || onChange === void 0 ? void 0 : onChange(w, previewBody.clientHeight);
        }
    }
    function handleRightDragEnd() {
        document.body.classList.remove('width-move');
        document.removeEventListener('mousemove', handleRightDragMove);
        document.removeEventListener('mouseup', handleRightDragEnd);
        onEnd();
    }
    function handleBottomDown(e) {
        e.stopPropagation();
        e.preventDefault();
        document.body.classList.add('height-move');
        document.addEventListener('mousemove', handleBottomDragMove);
        document.addEventListener('mouseup', handleBottomDragEnd);
    }
    function handleBottomDragMove(e) {
        e.stopPropagation();
        if (previewBody) {
            var h = previewBody.clientHeight;
            h += e.movementY;
            h = Math.max(70, h);
            previewBody.style.height = h + 'px';
            onChange(previewBody.clientWidth, h);
        }
    }
    function handleBottomDragEnd() {
        document.body.classList.remove('height-move');
        document.removeEventListener('mousemove', handleBottomDragMove);
        document.removeEventListener('mouseup', handleBottomDragEnd);
        onEnd();
    }
    return (_J$X_(reactOverlays.Portal, { container: function () { return previewBody; } },
        _J$X_(React__default["default"].Fragment, null,
            _J$X_("div", { className: "ae-MobileDevTool-rightHandle", onMouseDown: handleRightDown, style: { transform: "scale(".concat(1 / (scale / 100), ")") } }),
            _J$X_("div", { className: "ae-MobileDevTool-bottomHandle", onMouseDown: handleBottomDown, style: { transform: "scale(".concat(1 / (scale / 100), ")") } }))));
}

exports["default"] = MobileDevTool;
exports.dimensions = dimensions;
