"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.defaultValue = void 0;
const react_1 = __importDefault(require("react"));
const antd_1 = require("antd");
const prefix_classname_1 = __importDefault(require("prefix-classname"));
const lodash_es_1 = require("lodash-es");
const icons_1 = require("@ant-design/icons");
const const_1 = require("../../../config/const");
require("./style.scss");
const use_persistfn_1 = __importDefault(require("@rcp/use.persistfn"));
const use_uncontrolled_1 = __importDefault(require("@rcp/use.uncontrolled"));
const maker = __importStar(require("element-resize-detector"));
const cn = (0, prefix_classname_1.default)('');
const c = (0, prefix_classname_1.default)(`${const_1.CLS_PREFIX}-resize-widget`);
const OPTIONS = [
    { value: 'custom', label: '自适应' },
    { value: 'moto-g4', label: 'Moto G4', data: { width: 360, height: 640 } },
    { value: 'galaxy-s5', label: 'Galaxy S5', data: { width: 360, height: 640 } },
    { value: 'pixel-2', label: 'Pixel 2', data: { width: 411, height: 731 } },
    { value: 'iphone-678', label: 'iPhone 6/7/8', data: { width: 375, height: 667 } },
    { value: 'iphone-678-plus', label: 'iPhone 6/7/8 Plus', data: { width: 414, height: 736 } },
    { value: 'iphone-x', label: 'iPhone X', data: { width: 375, height: 812 } },
    { value: 'ipad', label: 'iPad', data: { width: 768, height: 1024 } },
    { value: 'ipad-pro', label: 'iPad Pro', data: { width: 1024, height: 1366 } }
];
const RATE_OPTIONS = [
    { value: 0.5, label: '50%' },
    { value: 0.75, label: '75%' },
    { value: 1, label: '100%' },
    { value: 1.25, label: '125%' },
    { value: 1.5, label: '150%' },
    { value: 'fit', label: '适合窗口' }
];
exports.defaultValue = {
    rateType: 1,
    rate: 1,
    type: 'iphone-x',
    data: {
        custom: { width: 360, height: 640 }
    },
    width: 360,
    height: 640
};
const MyInputNumber = (_a) => {
    var { value, onChange } = _a, props = __rest(_a, ["value", "onChange"]);
    const [v, setV] = (0, use_uncontrolled_1.default)({ value, onChange });
    const handleValChange = (0, use_persistfn_1.default)((v) => {
        if (isNaN(v)) {
            setV(value);
        }
        else {
            setV(Number(v));
        }
    });
    return (react_1.default.createElement(antd_1.InputNumber, Object.assign({}, props, { value: v, min: 1, onStep: (v, info) => {
            handleValChange(v);
        }, onPressEnter: (e) => {
            handleValChange(e.target.value);
        }, onBlur: (e) => {
            handleValChange(e.target.value);
        } })));
};
const ResizeWidget = react_1.default.memo(({ className, container, getContainerSize = (elem) => ({ width: elem.clientWidth, height: elem.clientHeight }), value = exports.defaultValue, onChange }) => {
    const [val, _setValue] = (0, use_uncontrolled_1.default)({
        value,
        onChange
    });
    const setVal = (0, use_persistfn_1.default)((key, v) => {
        _setValue((x) => {
            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
            const newVal = Object.assign(Object.assign({}, x), { [key]: v });
            if (key === 'type') {
                if (v === 'custom') {
                    Object.assign(newVal, {
                        width: (_c = (_b = (_a = newVal.data) === null || _a === void 0 ? void 0 : _a.custom) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : newVal.width,
                        height: (_f = (_e = (_d = newVal.data) === null || _d === void 0 ? void 0 : _d.custom) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : newVal.height
                    });
                }
                else {
                    const data = (_g = OPTIONS.find((x) => x.value === v)) === null || _g === void 0 ? void 0 : _g.data;
                    Object.assign(newVal, data);
                }
            }
            else if (key === 'width' || key === 'height') {
                if (newVal.type === 'custom') {
                    newVal.data = (_h = newVal.data) !== null && _h !== void 0 ? _h : {};
                    newVal.data.custom = (_j = newVal.data.custom) !== null && _j !== void 0 ? _j : {};
                    Object.assign(newVal.data.custom, {
                        [key]: v
                    });
                }
            }
            else if (key === 'rateType') {
                if (v !== 'fit') {
                    newVal.rate = v;
                }
            }
            return newVal;
        });
    });
    react_1.default.useLayoutEffect(() => {
        if (container && (val === null || val === void 0 ? void 0 : val.rateType) === 'fit') {
            const erd = maker();
            const handler = (0, lodash_es_1.throttle)((elem) => {
                const size = getContainerSize(elem);
                const minRate = Math.min(size.width / val.width, size.height / val.height).toFixed(1);
                setVal('rate', minRate);
            }, 200);
            erd.listenTo(container, handler);
            return () => {
                erd.removeListener(container, handler);
            };
        }
    }, [val === null || val === void 0 ? void 0 : val.rateType, container, getContainerSize, setVal]);
    return (react_1.default.createElement("div", { className: cn(c(), className) },
        react_1.default.createElement(antd_1.Select, { options: OPTIONS, value: val.type, onChange: (val) => setVal('type', val), style: { width: 'auto', minWidth: 80 }, dropdownMatchSelectWidth: 150, size: 'small' }),
        react_1.default.createElement("span", null,
            react_1.default.createElement(MyInputNumber, { value: val.width, disabled: val.type !== 'custom', onChange: (val) => setVal('width', val), style: { width: '70px' }, size: 'small' }),
            react_1.default.createElement(icons_1.CloseOutlined, { style: { fontSize: 10, paddingLeft: 4, paddingRight: 4 } }),
            react_1.default.createElement(MyInputNumber, { disabled: val.type !== 'custom', value: val.height, onChange: (val) => setVal('height', val), style: { width: '70px' }, size: 'small' })),
        react_1.default.createElement(antd_1.Select, { value: val.rateType, onChange: (val) => setVal('rateType', val), options: RATE_OPTIONS, style: { width: 'auto', minWidth: 60 }, dropdownMatchSelectWidth: 100, size: 'small' })));
});
ResizeWidget.defaultProps = {};
exports.default = ResizeWidget;
//# sourceMappingURL=index.js.map