/**
 * amis-ui v6.12.0-beta.0
 * Copyright 2018-2025 fex
 */

import { __read, __spreadArray } from 'tslib';
import React__default, { useRef, useEffect } from 'react';
import { Icon } from './icons.js';
import { Select } from 'amis-ui';
import debounce from 'lodash/debounce';
import { Portal } from 'react-overlays';

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 = __read(React__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 = useRef();
    var _b = __read(React__default.useState(100), 2), scale = _b[0], setScale = _b[1];
    var _c = __read(React__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(updateAutoScale, 300));
    useEffect(function () {
        defaultScale.current = parseInt(localStorage.getItem('amis-mobile-dev-tool-scale') || '0', 10);
    }, []);
    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 (React__default.createElement("div", { className: "ae-MobileDevTool" },
        React__default.createElement("div", { className: "ae-MobileDevTool-dimensions" },
            React__default.createElement("label", null, "\u5C3A\u5BF8:"),
            React__default.createElement(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 })),
        React__default.createElement("div", { className: "ae-MobileDevTool-dimension" },
            dimension.name === 'custom' ? (React__default.createElement("input", { className: "ae-MobileDevTool-dimension-input", value: dimension.width, onChange: function (event) {
                    var value = event.currentTarget.value;
                    handleCustomInputDimensionChange(value, 'width');
                } })) : (React__default.createElement("span", null, dimension.width)),
            React__default.createElement("span", null, "\u00D7"),
            dimension.name === 'custom' ? (React__default.createElement("input", { className: "ae-MobileDevTool-dimension-input", value: dimension.height, onChange: function (event) {
                    var value = event.currentTarget.value;
                    handleCustomInputDimensionChange(value, 'height');
                } })) : (React__default.createElement("span", null, dimension.height))),
        React__default.createElement("div", { className: "ae-MobileDevTool-right" },
            React__default.createElement("div", { className: "ae-MobileDevTool-right-scale" },
                React__default.createElement(Select, { className: "ae-MobileDevTool-select", clearable: false, value: scale, options: __spreadArray([], __read(scaleList.map(function (n) { return ({
                        label: "".concat(n, "%"),
                        value: n
                    }); })), false), onChange: function (item) {
                        updateScale(item.value);
                        updatePreviewScale(item.value);
                    } }),
                !scaleList.includes(scale) && (React__default.createElement("div", { className: "ae-MobileDevTool-right-scale-auto-value" },
                    scale,
                    "%")),
                React__default.createElement("div", { className: "ae-MobileDevTool-right-scale-auto", onClick: handleAutoScale }, "\u81EA\u9002\u5E94")),
            React__default.createElement("div", { onClick: handleRotateScreen },
                React__default.createElement(Icon, { icon: "rotate-screen", className: "ae-MobileDevTool-right-rotate-screen" }))),
        dimension.name === 'custom' && (React__default.createElement(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 (React__default.createElement(Portal, { container: function () { return previewBody; } },
        React__default.createElement(React__default.Fragment, null,
            React__default.createElement("div", { className: "ae-MobileDevTool-rightHandle", onMouseDown: handleRightDown, style: { transform: "scale(".concat(1 / (scale / 100), ")") } }),
            React__default.createElement("div", { className: "ae-MobileDevTool-bottomHandle", onMouseDown: handleBottomDown, style: { transform: "scale(".concat(1 / (scale / 100), ")") } }))));
}

export { MobileDevTool as default, dimensions };
