import { aM as Authorized, aN as Previleges, I as Icon, s as __assign, au as Checkbox, y as IconButton, v as i18n$1, a6 as Input, aq as Button, a0 as Dropmenu, jC as TencentTileLayer, am as LazyLoad, i as __read, W as _default, aC as Select, w as appContext, t as toastApi, jD as SplitPanel, b as __awaiter, c as __generator, a7 as i18n$2, jE as dataURLtoFile, jF as uploadUtilV2, jG as PutFileTypeEnum, jH as TYPE_SCREENING_METHOD, jI as MapSrsSet, by as MapUIStyleTypeSet, z as useStaticCallback, J as Scrollbar, bA as RadioGroup, C as SortList, ar as Tooltip, jJ as GeoFenceChoiceTypeSet, ap as LinkButton, jK as TYPE_TOOL_THEME, jL as Textarea, b6 as InputNumber, av as Drawer, jM as RULES, b5 as FULLSCREEN, jN as setDash } from './MapEditView-24782753.js';
import * as React from 'react';
import { map, isString, isNumber, size, forEach, set, get } from 'lodash';
import classNames from 'classnames';
import 'perfect-scrollbar';
import { v4 } from 'uuid';
import { observer } from 'mobx-react';
import { useMount } from 'ahooks';
import $ from 'jquery';
import * as maptalks from 'maptalks';
import copy from 'copy-to-clipboard';
import { useMount as useMount$1 } from 'react-use';
import animateScrollTo from 'animated-scroll-to';
import 'mobx';
import 'lz-string';
import 'dayjs';
import 'react-dom';
import 'react-is';
import '@loadable/component';
import 'js-beautify';
import 'axios';
import 'superstruct';
import '@tanem/react-nprogress';
import 'chroma-js';
import 'js-cookie';
import 'is-email';
import 'is-uuid';
import 'is-url';
import 'anymatch';
import 'perf-request';
import '@syncpoint/wkx';
import 'buffer';
import '@turf/turf';
import '@mapbox/polylabel';
import 'turf-multipolygon';
import 'turf-polygon';
import 'gcoord';
import 'eventemitter2';
import 'geobuf';
import 'localforage';
import 'rc-menu';
import 'jszip';
import 'file-saver';
import 'screenfull';
import 'sql-formatter-fork';
import 'array-move';
import 'turf-multilinestring';
import 'maptalks.three';
import 'ajv';
import 'spark-md5';
import 'react-draggable';
import 'react-virtualized';
import 'turf-point';
import 'decamelize';
import 'rbush';
import 'qs';
import 'maptalks.snap';
import 'react-rnd';
import 'react-beautiful-dnd';

var prefixCls$5 = 'dm-map-setting-wrapper';
var SettingWrapper = React.memo(function (props) {
    var _a;
    var isCurrent = props.isCurrent, type = props.type, text = props.text, selected = props.selected, onClick = props.onClick, noMarginTop = props.noMarginTop;
    var isItem = type === 'item';
    return (React.createElement("div", { className: classNames(prefixCls$5, (_a = {},
            _a["".concat(prefixCls$5, "-current")] = isCurrent,
            _a["".concat(prefixCls$5, "-item")] = isItem,
            _a)), onClick: onClick, style: { marginTop: noMarginTop ? 0 : '' } },
        isItem && (React.createElement("div", { className: "".concat(prefixCls$5, "-placeholder") }, selected && React.createElement("div", { className: "".concat(prefixCls$5, "-selected") }))),
        text));
});
SettingWrapper.whyDidYouRender = true;
SettingWrapper.displayName = 'SettingWrapper';

var prefixCls$4 = 'dm-map-tool-wrapper';
var ToolWrapper = React.memo(function (props) {
    var text = props.text, checked = props.checked, onChange = props.onChange, id = props.id, provided = props.provided, showEdit = props.showEdit, onDelete = props.onDelete, onEdit = props.onEdit;
    var permissionStyles = Authorized.hasPermission(Previleges.addCustomBaseMap) &&
        Authorized.hasPermission(Previleges.updateAppPreference);
    return (React.createElement("div", { className: prefixCls$4 },
        checked ? (React.createElement(Icon, __assign({ icon: "drag-handle", className: "".concat(prefixCls$4, "-icon") }, provided === null || provided === void 0 ? void 0 : provided.dragHandleProps))) : (React.createElement("div", { className: "".concat(prefixCls$4, "-icon") },
            React.createElement("div", __assign({}, provided === null || provided === void 0 ? void 0 : provided.dragHandleProps)))),
        React.createElement(Checkbox, { checked: checked, onChange: onChange, title: text, value: id }),
        showEdit && (React.createElement(React.Fragment, null,
            permissionStyles && (React.createElement(IconButton, { icon: "edit", type: "only-icon", className: "".concat(prefixCls$4, "-edit-icon ").concat(prefixCls$4, "-mlmr8"), onClick: onEdit })),
            permissionStyles && (React.createElement(IconButton, { icon: "close", type: "only-icon", className: "".concat(prefixCls$4, "-edit-icon"), onClick: onDelete }))))));
});
ToolWrapper.whyDidYouRender = true;
ToolWrapper.displayName = 'ToolWrapper';

var i18nBaseCustom$1 = i18n$1.mapEdit.baseCustom;
var menus3 = [
    { title: i18nBaseCustom$1.copy, key: 'copy' },
    { title: i18nBaseCustom$1.paste, key: 'paste', divider: true },
    { title: i18nBaseCustom$1.delete, key: 'delete' },
];
var prefixCls$3 = 'dm-map-custom-base-layer-drawer-content-header';
var Header = function (props) {
    var onCancel = props.onCancel, changeBaseLayer = props.changeBaseLayer, onSave = props.onSave, onCopy = props.onCopy, onPaste = props.onPaste, onDelete = props.onDelete, saveLoading = props.saveLoading, zoom = props.zoom, setZoom = props.setZoom, center = props.center, setCenter = props.setCenter;
    var _onClickMenuItem = function (info) {
        console.log(info, 'info');
        switch (info === null || info === void 0 ? void 0 : info.key) {
            case 'copy':
                onCopy && onCopy();
                break;
            case 'paste':
                onPaste && onPaste();
                break;
            case 'delete':
                onDelete && onDelete();
                break;
        }
    };
    return (React.createElement("div", { className: prefixCls$3 },
        React.createElement(IconButton, { icon: "close", onClick: onCancel, type: "only-icon" }),
        React.createElement("div", { className: "".concat(prefixCls$3, "-name") }, i18nBaseCustom$1.addBase),
        React.createElement("div", null,
            "zoom:",
            React.createElement(Input, { className: "".concat(prefixCls$3, "-zoom"), value: zoom, placeholder: i18nBaseCustom$1.help1, onChange: function (e) {
                    var value = e.target.value;
                    setZoom(value);
                } })),
        React.createElement("div", null,
            "center:",
            React.createElement(Input, { className: "".concat(prefixCls$3, "-center"), value: center, placeholder: i18nBaseCustom$1.help2, onChange: function (e) {
                    var value = e.target.value;
                    setCenter(value);
                } })),
        React.createElement(Button, { onClick: changeBaseLayer, className: "mr12" }, i18nBaseCustom$1.refresh),
        React.createElement(Button, { onClick: onCancel }, i18n$1.mapEdit.cancelText),
        React.createElement(Button, { type: "primary", className: "ml8 mr12", onClick: onSave, loading: saveLoading }, i18nBaseCustom$1.save),
        React.createElement(Dropmenu, { menus: menus3, icon: 'more', onClickMenuItem: _onClickMenuItem })));
};

var useRef$2 = React.useRef, useImperativeHandle = React.useImperativeHandle, useEffect = React.useEffect;
// todo new update
var id = 'map-preview-base';
var center = [121.5303295328, 31.2063429624];
var zoom = 9;
var Preview = React.forwardRef(function (props, ref) {
    var refMap = useRef$2();
    useMount(function () {
        var _a;
        var mapDom = document.createElement('div');
        mapDom.style.width = '100%';
        mapDom.style.height = '100%';
        (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.appendChild(mapDom);
        refMap.current = new maptalks.Map(mapDom, {
            center: [121.5303295328, 31.2063429624],
            zoom: 9,
        });
    });
    var setCenter = function (center) {
        var _a;
        (_a = refMap.current) === null || _a === void 0 ? void 0 : _a.setCenter(new maptalks.Coordinate(center));
    };
    var changeBase = function (options, cfg) {
        var _a, _b;
        console.log(options, 'options-changeBase');
        var parentDom = document.getElementById(id);
        parentDom.innerHTML = '';
        (_a = refMap.current) === null || _a === void 0 ? void 0 : _a.remove();
        var mapDom = document.createElement('div');
        mapDom.style.width = '100%';
        mapDom.style.height = '100%';
        parentDom === null || parentDom === void 0 ? void 0 : parentDom.appendChild(mapDom);
        if (!options) {
            refMap.current = new maptalks.Map(mapDom, {
                center: (cfg === null || cfg === void 0 ? void 0 : cfg.center) || center,
                zoom: (cfg === null || cfg === void 0 ? void 0 : cfg.zoom) || zoom,
            });
            return;
        }
        var _options;
        if (!Array.isArray(options)) {
            _options = [options];
        }
        else {
            _options = options;
        }
        var config = {
            center: (cfg === null || cfg === void 0 ? void 0 : cfg.center) || center,
            zoom: (cfg === null || cfg === void 0 ? void 0 : cfg.zoom) || zoom,
        };
        refMap.current = new maptalks.Map(mapDom, config);
        var groupTile = map(_options, function (ops, index) {
            ops.spatialReference;
            if (ops.type === 'tencent') {
                // @ts-ignore
                return new TencentTileLayer('base' + index, __assign(__assign({}, options), { crossOrigin: 'Anonymous' }));
            }
            else {
                return new maptalks.TileLayer('base' + index, __assign(__assign({}, options), { crossOrigin: 'Anonymous' }));
            }
            // if (spatialReference) {
            //   refMap.current?.setSpatialReference({
            //     spatialReference,
            //   });
            // }
        });
        var baseLayer = new maptalks.GroupTileLayer('base', groupTile);
        (_b = refMap.current) === null || _b === void 0 ? void 0 : _b.setBaseLayer(baseLayer);
        // if (_options[0].resolutions) {
        //   set(config, 'spatialReference.resolutions', _options[0].resolutions);
        // }
    };
    var getMapDataUrl = function () {
        var _a;
        return (_a = refMap.current) === null || _a === void 0 ? void 0 : _a.toDataURL({
            mimeType: 'image/png',
            save: false,
            fileName: "picture_".concat(new Date().getTime()), // file name
        });
    };
    useImperativeHandle(ref, function () {
        return {
            setCenter: setCenter,
            changeBase: changeBase,
            getMapDataUrl: getMapDataUrl,
        };
    });
    useEffect(function () {
        return function () {
            var _a;
            (_a = refMap.current) === null || _a === void 0 ? void 0 : _a.remove();
        };
    }, []);
    return React.createElement("div", { id: id });
});

var JsonCodeEditor = LazyLoad(function () { return import('./index-11b99652.js'); });
var light$1 = i18n$1.mapEdit.mapSettings.toolThemeLight;
var dark$1 = i18n$1.mapEdit.mapSettings.toolThemeDark;
var i18nBaseCustom = i18n$1.mapEdit.baseCustom;
// const { useState } = React;
var options = [
    { key: light$1, label: light$1, value: light$1 },
    { key: dark$1, label: dark$1, value: dark$1 },
];
var prefixCls$2 = 'dm-map-custom-base-layer-drawer-content-setting';
var Setting = function (props) {
    var changeBaseLayer = props.changeBaseLayer, jsonCode = props.jsonCode, setJsonCode = props.setJsonCode, setBaseName = props.setBaseName, baseName = props.baseName, zoomBarStyle = props.zoomBarStyle, setZoomBarStyle = props.setZoomBarStyle;
    // const [jsonCode, setJsonCode] = useState(``);
    console.log(changeBaseLayer);
    var _nameChange = function (e) {
        var target = e.target;
        var value = target.value;
        setBaseName(value);
    };
    var formatJsCode = function () {
        setJsonCode(jsonCode);
    };
    var _a = __read(_default(), 2), ref = _a[0], _b = _a[1], height = _b.height, width = _b.width;
    var _setJsCode = function (value) {
        setJsonCode(value);
        // try {
        //   const options = JSON.parse(value);
        //   if (options) {
        //     changeBaseLayer(options);
        //   }
        // } catch (e) {
        //   console.log(e);
        // }
    };
    return (React.createElement("div", { className: prefixCls$2 },
        React.createElement("div", { className: "".concat(prefixCls$2, "-options") },
            React.createElement("div", { className: "".concat(prefixCls$2, "-title") }, i18nBaseCustom.baseOptions),
            React.createElement("div", { ref: ref, style: { flex: 1 } },
                React.createElement(JsonCodeEditor, { height: "".concat(height, "px"), width: "".concat(width, "px"), onChange: _setJsCode, 
                    // onValidate={onValidate}
                    value: jsonCode, commands: [
                        {
                            name: 'indent',
                            bindKey: { win: 'Ctrl-[', mac: 'Command-[' },
                            exec: function () {
                                formatJsCode();
                            },
                        },
                    ] }))),
        React.createElement("div", { className: "".concat(prefixCls$2, "-display") },
            React.createElement("div", { className: "".concat(prefixCls$2, "-title") }, i18nBaseCustom.showSettings),
            React.createElement("div", { className: "".concat(prefixCls$2, "-mlmr24") },
                React.createElement("div", { className: "mb8" },
                    i18nBaseCustom.baseName,
                    "\uFF1A"),
                React.createElement(Input, { className: "mb16", value: baseName, onChange: _nameChange, "data-test": "map-settings-custom-base-name-input" }),
                React.createElement("div", { className: "mb8" },
                    i18nBaseCustom.toolTheme,
                    ":"),
                React.createElement(Select, { className: "mb16", placeholder: "\u8BF7\u9009\u62E9", options: options, value: zoomBarStyle, onChange: setZoomBarStyle })))));
};

var light = i18n$1.mapEdit.mapSettings.toolThemeLight;
var dark = i18n$1.mapEdit.mapSettings.toolThemeDark;
var useState = React.useState, useRef$1 = React.useRef, useCallback$1 = React.useCallback;
var prefixCls$1 = 'dm-map-custom-base-layer-drawer-content';
var MapCustomBaseLayerDrawerContent = observer(function (props) {
    var _a = __read(useState(false), 2), saveLoading = _a[0], setSaveLoading = _a[1];
    var onCancel = props.onCancel, detail = props.detail, onDelete = props.onDelete;
    var routeStore = React.useContext(appContext.getContext()).routeStore;
    var MapSettingStore = routeStore.MapSettingStore;
    var updateMapCustomStyle = MapSettingStore.updateMapCustomStyle;
    var code = '';
    try {
        code = JSON.stringify(detail === null || detail === void 0 ? void 0 : detail.options);
    }
    catch (e) {
        console.log(e);
    }
    var _b = __read(useState(code), 2), jsonCode = _b[0], setJsonCode = _b[1];
    var _c = __read(useState((detail === null || detail === void 0 ? void 0 : detail.toolTheme) || light), 2), zoomBarStyle = _c[0], setZoomBarStyle = _c[1];
    var _d = __read(useState((detail === null || detail === void 0 ? void 0 : detail.content) || ""), 2), baseName = _d[0], setBaseName = _d[1];
    var _e = __read(useState(9), 2), zoom = _e[0], setZoom = _e[1];
    var _f = __read(useState('121.5303295328,31.2063429624'), 2), center = _f[0], setCenter = _f[1];
    var previewRef = useRef$1();
    // 刷新预览
    var changeBaseLayer = useCallback$1(function (code) {
        var _a, _b;
        try {
            var _code = isString(code) ? code || jsonCode : jsonCode;
            if (!_code)
                return;
            var options = JSON.parse(_code);
            var cfg = {};
            if (isNumber(Number(zoom))) {
                cfg.zoom = zoom;
            }
            if (size(center.split(',')) === 2 &&
                isNumber(Number(center.split(',')[0])) &&
                isNumber(Number(center.split(',')[1]))) {
                cfg.center = (_a = center.split(',')) === null || _a === void 0 ? void 0 : _a.map(function (current) { return Number(current); });
            }
            (_b = previewRef === null || previewRef === void 0 ? void 0 : previewRef.current) === null || _b === void 0 ? void 0 : _b.changeBase(options, cfg);
        }
        catch (e) {
            console.error(e);
            toastApi.error('baselayer options typeerror');
        }
    }, [center, jsonCode, zoom]);
    var onSave = function () { return __awaiter(void 0, void 0, void 0, function () {
        var options, img, url, id, data, resp, customBase, e_1;
        var _a, _b, _c;
        return __generator(this, function (_d) {
            switch (_d.label) {
                case 0:
                    _d.trys.push([0, 3, , 4]);
                    setSaveLoading(true);
                    options = JSON.parse(jsonCode);
                    img = '';
                    url = (_a = previewRef === null || previewRef === void 0 ? void 0 : previewRef.current) === null || _a === void 0 ? void 0 : _a.getMapDataUrl();
                    id = (detail === null || detail === void 0 ? void 0 : detail.id) || v4();
                    if (!url) return [3 /*break*/, 2];
                    data = dataURLtoFile(url);
                    return [4 /*yield*/, uploadUtilV2({ file: data }, PutFileTypeEnum.Image)];
                case 1:
                    resp = _d.sent();
                    // {name : img} = resp;
                    img = resp.name;
                    if (!img) {
                        setSaveLoading(false);
                        toastApi.error(i18n$2.common.screenshotFailed);
                        return [2 /*return*/];
                    }
                    _d.label = 2;
                case 2:
                    customBase = {
                        id: id,
                        options: options,
                        toolTheme: zoomBarStyle === dark ? 'dark' : 'light',
                        content: baseName,
                        checked: (_b = detail === null || detail === void 0 ? void 0 : detail.checked) !== null && _b !== void 0 ? _b : false,
                        img: (_c = detail === null || detail === void 0 ? void 0 : detail.img) !== null && _c !== void 0 ? _c : img,
                    };
                    // todo push options
                    onCancel();
                    updateMapCustomStyle(customBase);
                    setSaveLoading(false);
                    return [3 /*break*/, 4];
                case 3:
                    e_1 = _d.sent();
                    console.error(e_1);
                    setSaveLoading(false);
                    toastApi.error('baselayer options typeerror');
                    return [3 /*break*/, 4];
                case 4: return [2 /*return*/];
            }
        });
    }); };
    var onCopy = function () {
        var _a, _b;
        try {
            var options = JSON.parse(jsonCode);
            var customBase = {
                // id: detail?.id || uuid(),
                options: options,
                toolTheme: zoomBarStyle === dark ? 'dark' : 'light',
                content: baseName,
                checked: (_a = detail === null || detail === void 0 ? void 0 : detail.checked) !== null && _a !== void 0 ? _a : false,
                img: (_b = detail === null || detail === void 0 ? void 0 : detail.img) !== null && _b !== void 0 ? _b : '',
            };
            copy(JSON.stringify(customBase));
            toastApi.success('copy options success');
        }
        catch (e) {
            console.log(e);
            toastApi.error('baselayer options typeerror');
        }
    };
    var onPaste = function () { return __awaiter(void 0, void 0, void 0, function () {
        var data, _a, options, toolTheme, content, e_2;
        return __generator(this, function (_b) {
            switch (_b.label) {
                case 0:
                    _b.trys.push([0, 2, , 3]);
                    return [4 /*yield*/, navigator.clipboard.readText()];
                case 1:
                    data = _b.sent();
                    _a = JSON.parse(data), options = _a.options, toolTheme = _a.toolTheme, content = _a.content;
                    setZoomBarStyle(toolTheme);
                    setJsonCode(JSON.stringify(options));
                    setBaseName(content);
                    changeBaseLayer(JSON.stringify(options));
                    return [3 /*break*/, 3];
                case 2:
                    e_2 = _b.sent();
                    console.log(e_2);
                    return [3 /*break*/, 3];
                case 3: return [2 /*return*/];
            }
        });
    }); };
    useMount$1(function () {
        changeBaseLayer();
    });
    return (React.createElement("div", { className: prefixCls$1 },
        React.createElement(Header, { onCancel: onCancel, changeBaseLayer: changeBaseLayer, onSave: onSave, onDelete: onDelete, onCopy: onCopy, onPaste: onPaste, saveLoading: saveLoading, zoom: zoom, setZoom: setZoom, center: center, setCenter: setCenter }),
        React.createElement("div", { style: { display: 'flex', flex: 1, height: 'calc(100vh - 52px)', position: 'relative' } },
            React.createElement(SplitPanel, { split: "vertical", 
                // primary="second"
                // defaultSize="50%"
                minSize: 250 },
                React.createElement(Setting, { jsonCode: jsonCode, setJsonCode: setJsonCode, zoomBarStyle: zoomBarStyle, setZoomBarStyle: setZoomBarStyle, baseName: baseName, setBaseName: setBaseName }),
                React.createElement(Preview, { ref: previewRef })))));
});

var _a, _b, _c;
var ColorPickerWrapper = LazyLoad(function () { return import('./index-7c04fb6e.js'); });
var useRef = React.useRef, useMemo = React.useMemo, useCallback = React.useCallback;
var i18n = i18n$1.mapEdit.mapSettings;
var prefixCls = 'map-settings';
var textFollowLineRadioGroupOptions = [
    { label: i18n.smallSpacing, value: '30' },
    { label: i18n.largeSpacing, value: '2000' },
];
var geoAutoRunRadioGroupOptions = [
    { label: i18n.geoAutoRun, value: 'true' },
    { label: i18n.geoHandleRun, value: 'false' },
];
var geoFilterOptions = [
    { label: i18n.within, value: TYPE_SCREENING_METHOD.within },
    {
        label: i18n.intersectsNoTouches,
        value: TYPE_SCREENING_METHOD.intersectsNoTouches,
    },
    { label: i18n.intersects, value: TYPE_SCREENING_METHOD.intersects },
];
var textToSrs = (_a = {},
    _a[i18n.wgs84] = MapSrsSet.wgs84,
    _a[i18n.bd09] = MapSrsSet.bd09,
    _a[i18n.gcj02] = MapSrsSet.gcj02,
    _a);
var srsToText = (_b = {},
    _b[MapSrsSet.wgs84] = i18n.wgs84,
    _b[MapSrsSet.bd09] = i18n.bd09,
    _b[MapSrsSet.gcj02] = i18n.gcj02,
    _b);
var ids = [
    i18n.commonSettings,
    i18n.infoWindowTools,
    i18n.interfaceLayout,
    i18n.toolbar,
    i18n.geoTools,
    i18n.otherTools,
    i18n.interfaceStyle,
    i18n.mapBaseLayer,
    i18n.fenceStyle,
    i18n.initializationData,
    i18n.screeningMethod,
    i18n.searchReGeo,
    i18n.textFollowLine,
    // i18n.extendCustomFrence,
    // i18n.leftInfoClick,
    i18n.setView,
    i18n.zoomRange,
    i18n.infoWindow,
    i18n.infoWindowCanDrag,
    // i18n.infoWindowSingleCase,
    i18n.can3D,
    i18n.fenceSelect,
    i18n.showCards,
    i18n.showStartSearch,
    i18n.showFilter,
    i18n.showCollect,
    i18n.showSearch,
    i18n.showViewCollection,
    i18n.mapControl,
    i18n.functionPanel,
    i18n.onSearchBgc,
    i18n.mobileSettings,
    // i18n.experimental,
];
var idsLen = ids.length;
var idsMap = {};
for (var i = 0; i < idsLen; i++) {
    idsMap[ids[i]] = 'jump-' + v4();
}
var getMapIdFn = function (value) {
    return idsMap[value];
};
var getMapValueFn = function (id) {
    for (var key in idsMap) {
        if (id === idsMap[key]) {
            return key;
        }
    }
};
var mapUIOptions = [
    i18n.interfaceStyleBase,
    i18n.interfaceStyleTranslucent,
    i18n.interfaceStyleLight,
    i18n.interfaceStyleCustom,
];
var mapUIKV = (_c = {},
    _c[i18n.interfaceStyleBase] = MapUIStyleTypeSet.dark,
    _c[i18n.interfaceStyleTranslucent] = MapUIStyleTypeSet.darkTranslucent,
    _c[i18n.interfaceStyleLight] = MapUIStyleTypeSet.light,
    _c[i18n.interfaceStyleCustom] = MapUIStyleTypeSet.custom,
    _c);
var mapUIVK = {};
forEach(mapUIKV, function (v, k) {
    set(mapUIVK, v, k);
});
var MapSettings = observer(function () {
    var Context = appContext.getContext();
    var value = React.useContext(Context);
    var routeStore = value.routeStore;
    var MapSettingStore = routeStore.MapSettingStore, FenceSettingStore = routeStore.FenceSettingStore, GeoFiltersStore = routeStore.GeoFiltersStore, mapInstanceCanvas = routeStore.mapInstanceCanvas, selectMapStyle = routeStore.selectMapStyle;
    var geoToolsAutoRun = MapSettingStore.geoToolsAutoRun, setGeoToolsAutoRun = MapSettingStore.setGeoToolsAutoRun, textFollowLine = MapSettingStore.textFollowLine, toggleTextFollowLine = MapSettingStore.toggleTextFollowLine, textRepeatDistance = MapSettingStore.textRepeatDistance, setTextRepeatDistance = MapSettingStore.setTextRepeatDistance, isInitMap = MapSettingStore.isInitMap, changeInitMap = MapSettingStore.changeInitMap, 
    // extendCustomFrence,
    // changeExtendCustomFrence,
    interfaceStyle = MapSettingStore.interfaceStyle, changeInterfaceStyle = MapSettingStore.changeInterfaceStyle, leftInfoClick = MapSettingStore.leftInfoClick, changeLeftInfoClick = MapSettingStore.changeLeftInfoClick, rightInfoClick = MapSettingStore.rightInfoClick, changeRightInfoClick = MapSettingStore.changeRightInfoClick, doubleInfoClick = MapSettingStore.doubleInfoClick, changeDoubleInfoClick = MapSettingStore.changeDoubleInfoClick, can3D = MapSettingStore.can3D, changeCan3D = MapSettingStore.changeCan3D, geoFenceChoiceType = MapSettingStore.geoFenceChoiceType, changeGeoFenceChoiceType = MapSettingStore.changeGeoFenceChoiceType, autoSearch = MapSettingStore.autoSearch, changeAutoSearch = MapSettingStore.changeAutoSearch, showCards = MapSettingStore.showCards, changeShowCards = MapSettingStore.changeShowCards, showStartSearch = MapSettingStore.showStartSearch, changeShowStartSearch = MapSettingStore.changeShowStartSearch, showFilter = MapSettingStore.showFilter, changeShowFilter = MapSettingStore.changeShowFilter, showCollect = MapSettingStore.showCollect, changeShowCollecth = MapSettingStore.changeShowCollecth, showSearch = MapSettingStore.showSearch, changeShowSearch = MapSettingStore.changeShowSearch, screeningMethod = MapSettingStore.screeningMethod, changeScreeningMethod = MapSettingStore.changeScreeningMethod, showSearchTopping = MapSettingStore.showSearchTopping, changeShowSearchTopping = MapSettingStore.changeShowSearchTopping, showViewCollection = MapSettingStore.showViewCollection, changeShowViewCollection = MapSettingStore.changeShowViewCollection, geoTools = MapSettingStore.geoTools, changeGeoTools = MapSettingStore.changeGeoTools, otherTools = MapSettingStore.otherTools, changeOtherTools = MapSettingStore.changeOtherTools, otherToolsStatus = MapSettingStore.otherToolsStatus, geoToolsStatus = MapSettingStore.geoToolsStatus, setGeoTools = MapSettingStore.setGeoTools, isochroneTransport = MapSettingStore.isochroneTransport, changeIsochroneTransport = MapSettingStore.changeIsochroneTransport, changeOtherTool = MapSettingStore.changeOtherTool, setOtherTools = MapSettingStore.setOtherTools, changeGeoTool = MapSettingStore.changeGeoTool, cssFilter = MapSettingStore.cssFilter, changeCssFilter = MapSettingStore.changeCssFilter, projection = MapSettingStore.projection, setProjection = MapSettingStore.setProjection, srs = MapSettingStore.srs, changeSrs = MapSettingStore.changeSrs, showMapControl = MapSettingStore.showMapControl, changeShowMapControl = MapSettingStore.changeShowMapControl, toolTheme = MapSettingStore.toolTheme, changeToolTheme = MapSettingStore.changeToolTheme, mapStyles = MapSettingStore.mapStyles, changeMapStyle = MapSettingStore.changeMapStyle, changeMapStyles = MapSettingStore.changeMapStyles, mapStylesStatus = MapSettingStore.mapStylesStatus, setMapStyles = MapSettingStore.setMapStyles, changeShowMapSettings = MapSettingStore.changeShowMapSettings, rightScrollTop = MapSettingStore.rightScrollTop, setRightScrollTop = MapSettingStore.setRightScrollTop, followSystemBase = MapSettingStore.followSystemBase, changeFollowSystemBase = MapSettingStore.changeFollowSystemBase, infoWindowTools = MapSettingStore.infoWindowTools, changeInfoWindowTools = MapSettingStore.changeInfoWindowTools, infoWindowToolsStatus = MapSettingStore.infoWindowToolsStatus, setInfoWindowTools = MapSettingStore.setInfoWindowTools, changeInfoWindowTool = MapSettingStore.changeInfoWindowTool, openMapCustomCssEditor = MapSettingStore.openMapCustomCssEditor, openMapCustomCssVariableEditor = MapSettingStore.openMapCustomCssVariableEditor, mapCustomStyles = MapSettingStore.mapCustomStyles, setMapCustomStyles = MapSettingStore.setMapCustomStyles, changeMapCustomStyle = MapSettingStore.changeMapCustomStyle, deleteMapCustomStyle = MapSettingStore.deleteMapCustomStyle, setViewDuration = MapSettingStore.setViewDuration, setSetViewDuration = MapSettingStore.setSetViewDuration, maxZoom = MapSettingStore.maxZoom, minZoom = MapSettingStore.minZoom, setMinZoom = MapSettingStore.setMinZoom, setMaxZoom = MapSettingStore.setMaxZoom, capacityId = MapSettingStore.capacityId, setCapacityId = MapSettingStore.setCapacityId, bufferSize = MapSettingStore.bufferSize, setBufferSize = MapSettingStore.setBufferSize, infoWindowCanDrag = MapSettingStore.infoWindowCanDrag, changeInfoWindowCanDrag = MapSettingStore.changeInfoWindowCanDrag, onSearchBgc = MapSettingStore.onSearchBgc, setOnSearchBgc = MapSettingStore.setOnSearchBgc, routePlan = MapSettingStore.routePlan, setRoutePlan = MapSettingStore.setRoutePlan, fullScreenHideDetail = MapSettingStore.fullScreenHideDetail, setFullScreenHideDetail = MapSettingStore.setFullScreenHideDetail, searchReGeo = MapSettingStore.searchReGeo, changeSearchReGeo = MapSettingStore.changeSearchReGeo, 
    // infoWindowSingleCase,
    // changeInfoWindowSingleCase,
    // openMapCustomLayersEditor,
    // infoWindowEditButtonAction,
    // setInfoWindowEditButtonAction,
    openMobileSetting = MapSettingStore.openMobileSetting;
    // const [showCssEdit, setShowCssEdit] = React.useState(false);
    var _a = __read(React.useState(false), 2), showBaseLayerEditor = _a[0], setShowBaseLayerEditor = _a[1];
    var _b = __read(React.useState({}), 2), currentCustomDetail = _b[0], setCurrentCustomDetail = _b[1];
    var updateRenderCurrentGeo = GeoFiltersStore.updateRenderCurrentGeo;
    var fenceSetting = FenceSettingStore.fenceSetting, setDefaultFence = FenceSettingStore.setDefaultFence, setActiveFence = FenceSettingStore.setActiveFence;
    var defaultFence = fenceSetting.defaultFence, activeFence = fenceSetting.activeFence;
    var mapSettingsRef = useRef(null);
    var styleTextAreaRef = useRef(null);
    var getPopupContainer = function () { return mapSettingsRef.current; };
    var rightID = useMemo(function () { return prefixCls + v4(); }, []);
    var _geoTools = map(geoTools.slice(), function (g) {
        var content = get(i18n$1.mapEdit.tools, g.id);
        set(g, 'content', content);
        return g;
    });
    var _otherTools = map(otherTools.slice(), function (g) {
        var content = get(i18n$1.mapEdit.tools, g.id);
        set(g, 'content', content);
        return g;
    });
    var _mapStyles = map(mapStyles.slice(), function (g) {
        var content = get(i18n$1.mapEdit.mapStyles, g.id);
        set(g, 'content', content);
        return g;
    });
    var _infoWindowTools = map(infoWindowTools.slice(), function (g) {
        var content = get(i18n$1.mapEdit.tools, g.id);
        set(g, 'content', content);
        return g;
    });
    useMount(function () {
        var dom = document.getElementById(rightID);
        dom && animateScrollTo(rightScrollTop, { elementToScroll: dom });
        var settingCls = 'dm-map-setting-wrapper';
        var timeId = 0;
        var io = new IntersectionObserver(function (entries) {
            forEach(entries, function (entrie) {
                var isIntersecting = entrie.isIntersecting, target = entrie.target;
                var id = $(target).attr('id');
                var _id = getMapValueFn(id || '');
                forEach($(".".concat(settingCls)), function (w) {
                    var _a, _b;
                    var domStr = $(w).html();
                    if (_id) {
                        if (domStr.includes(_id)) {
                            if (isIntersecting) {
                                (_a = $(w)) === null || _a === void 0 ? void 0 : _a.addClass("".concat(settingCls, "-active"));
                            }
                            else {
                                (_b = $(w)) === null || _b === void 0 ? void 0 : _b.removeClass("".concat(settingCls, "-active"));
                            }
                        }
                    }
                });
            });
        }, {
            root: dom,
        });
        for (var i = 0; i < idsLen; i++) {
            io.observe(document.getElementById(getMapIdFn(ids[i])));
        }
        var setScroll = function () {
            timeId && window.clearTimeout(timeId);
            timeId = window.setTimeout(function () {
                setRightScrollTop((dom === null || dom === void 0 ? void 0 : dom.scrollTop) || 0);
            }, 100);
        };
        dom === null || dom === void 0 ? void 0 : dom.addEventListener('scroll', setScroll);
        return function () {
            dom === null || dom === void 0 ? void 0 : dom.removeEventListener('scroll', setScroll);
            io.disconnect();
        };
    });
    /**
     * 左侧点击 右侧跳转
     * @param id
     */
    var jumpTo = function (id) {
        var _a;
        var SettingsRightDom = (_a = mapSettingsRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('#' + rightID);
        var idDom = (SettingsRightDom === null || SettingsRightDom === void 0 ? void 0 : SettingsRightDom.querySelector('#' + id)) ||
            (SettingsRightDom === null || SettingsRightDom === void 0 ? void 0 : SettingsRightDom.querySelector('.' + id));
        var pos = idDom ? idDom.offsetTop : 0;
        if (SettingsRightDom) {
            animateScrollTo(pos, { elementToScroll: SettingsRightDom });
        }
    };
    var _changeGeoTools = function () {
        var checked = 0;
        var unChecked = 0;
        forEach(geoTools, function (ot) {
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            if (ot === null || ot === void 0 ? void 0 : ot.checked) {
                checked += 1;
            }
            else {
                unChecked += 1;
            }
        });
        if (size(geoTools) === checked) {
            changeGeoTools && changeGeoTools(false);
        }
        if (size(geoTools) >= unChecked && unChecked > 0) {
            changeGeoTools && changeGeoTools(true);
        }
    };
    var _changeOtherTools = function () {
        var checked = 0;
        var unChecked = 0;
        forEach(otherTools, function (ot) {
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            if (ot === null || ot === void 0 ? void 0 : ot.checked) {
                checked += 1;
            }
            else {
                unChecked += 1;
            }
        });
        if (size(otherTools) === checked) {
            changeOtherTools && changeOtherTools(false);
        }
        if (size(otherTools) >= unChecked && unChecked > 0) {
            changeOtherTools && changeOtherTools(true);
        }
    };
    var _changeMapStyles = function () {
        var checked = 0;
        var unChecked = 0;
        forEach(mapStyles, function (ot) {
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            if (ot === null || ot === void 0 ? void 0 : ot.checked) {
                checked += 1;
            }
            else {
                unChecked += 1;
            }
        });
        if (size(mapStyles) === checked) {
            changeMapStyles && changeMapStyles(false);
        }
        if (size(mapStyles) >= unChecked && unChecked > 0) {
            changeMapStyles && changeMapStyles(true);
        }
    };
    var _changeInfoWindowTools = function () {
        var checked = 0;
        var unChecked = 0;
        forEach(infoWindowTools, function (ot) {
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            if (ot === null || ot === void 0 ? void 0 : ot.checked) {
                checked += 1;
            }
            else {
                unChecked += 1;
            }
        });
        if (size(infoWindowTools) === checked) {
            changeInfoWindowTools && changeInfoWindowTools(false);
        }
        if (size(infoWindowTools) >= unChecked && unChecked > 0) {
            changeInfoWindowTools && changeInfoWindowTools(true);
        }
    };
    var otherToolRender = function (provided, item) {
        var _a = item, content = _a.content, checked = _a.checked, id = _a.id;
        return (React.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, { key: id, "data-test": "map-settings-other-tools" }),
            React.createElement(ToolWrapper, { key: id, id: id, onChange: changeOtherTool, text: content + '', checked: checked, provided: provided }),
            id === RULES && checked && (React.createElement(Checkbox, { checked: routePlan, onChange: setRoutePlan, title: i18n.ROUTEPLAN, className: "ml30" })),
            id === FULLSCREEN && checked && (React.createElement(Checkbox, { checked: fullScreenHideDetail, onChange: setFullScreenHideDetail, title: i18n.hideDetail, className: "ml30" }))));
    };
    var geoToolRender = function (provided, item) {
        var _a = item, content = _a.content, checked = _a.checked, id = _a.id;
        return (React.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, { key: id, "data-test": "map-settings-geo-tools" }),
            React.createElement(ToolWrapper, { id: id, onChange: changeGeoTool, text: content + '', checked: checked, provided: provided })));
    };
    var mapStyleRender = function (provided, item) {
        var _a = item, content = _a.content, checked = _a.checked, id = _a.id;
        return (React.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, { key: id }),
            React.createElement(ToolWrapper, { key: id, id: id, onChange: changeMapStyle, text: content + '', checked: checked, provided: provided })));
    };
    var permissionStyles = Authorized.hasPermission(Previleges.addCustomBaseMap) &&
        Authorized.hasPermission(Previleges.updateAppPreference);
    var mapCustomStyleRender = function (provided, item) {
        var _a = item, content = _a.content, checked = _a.checked, id = _a.id;
        return (React.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, { key: id }),
            React.createElement(ToolWrapper, { key: id, id: id, onChange: changeMapCustomStyle, text: content + '', checked: checked, provided: provided, onDelete: function () {
                    deleteMapCustomStyle(id);
                }, onEdit: function () {
                    setCurrentCustomDetail(item);
                    setShowBaseLayerEditor(true);
                }, showEdit: true })));
    };
    var infoWindowToolRender = function (provided, item) {
        var _a = item, content = _a.content, checked = _a.checked, id = _a.id;
        return (React.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, { key: id, "data-test": "map-settings-info-window-item-checkbox" }),
            React.createElement(ToolWrapper, { key: id, id: id, onChange: changeInfoWindowTool, text: content + '', checked: checked, provided: provided })));
    };
    var _changeCssFilter = useCallback(function (e) {
        var target = e.target;
        var value = target.value;
        changeCssFilter(value);
    }, [changeCssFilter]);
    var _activeFenceLineWidth = function (e) {
        var _a;
        var value = e.target.value;
        var obj = __assign(__assign({}, activeFence), { lineWidth: (_a = Number(value)) !== null && _a !== void 0 ? _a : 2 });
        setActiveFence(obj);
    };
    var _activeFenceLineDash = function (e) {
        var target = e.target;
        var value = target.value;
        var obj = __assign(__assign({}, activeFence), { lineDasharray: setDash(value) });
        setActiveFence(obj);
    };
    var _defaultFenceLineWidth = function (e) {
        var _a;
        var value = e.target.value;
        var obj = __assign(__assign({}, defaultFence), { lineWidth: (_a = Number(value)) !== null && _a !== void 0 ? _a : 1 });
        setDefaultFence(obj);
    };
    var _defaultFenceLineDash = function (e) {
        var target = e.target;
        var value = target.value;
        var obj = __assign(__assign({}, defaultFence), { lineDasharray: setDash(value) });
        setDefaultFence(obj);
    };
    var _setSetViewDuration = function (e) {
        var target = e.target;
        var value = Number(target.value);
        if (isNumber(value))
            setSetViewDuration(value);
    };
    var handleTextRepeatDistanceChange = useStaticCallback(function (value) {
        var v = Number.parseInt(value);
        if (v) {
            setTextRepeatDistance(v);
        }
    });
    var handleMapInfoWindowTriggerModeChange = function (val) {
        switch (val) {
            case 'leftClick':
                changeLeftInfoClick(true);
                break;
            case 'rightClick':
                changeRightInfoClick(true);
                break;
            case 'doubleClick':
                changeDoubleInfoClick(true);
                break;
        }
    };
    return (React.createElement("div", { className: prefixCls, ref: mapSettingsRef },
        React.createElement("div", { className: "".concat(prefixCls, "-close"), onClick: changeShowMapSettings },
            React.createElement(IconButton, { icon: "close", type: "only-icon" })),
        React.createElement("div", { className: "".concat(prefixCls, "-left") },
            React.createElement(SettingWrapper, { text: i18n.commonSettings, noMarginTop: true, onClick: function () { return jumpTo(getMapIdFn(i18n.commonSettings)); } }),
            React.createElement(SettingWrapper, { text: i18n.initializationData, type: "item", selected: isInitMap, onClick: function () { return jumpTo(getMapIdFn(i18n.initializationData)); } }),
            React.createElement(SettingWrapper, { text: i18n.screeningMethod, type: "item", selected: screeningMethod === TYPE_SCREENING_METHOD.intersects ? true : false, onClick: function () { return jumpTo(getMapIdFn(i18n.screeningMethod)); } }),
            React.createElement(SettingWrapper, { text: i18n.searchReGeo, type: "item", selected: searchReGeo, onClick: function () { return jumpTo(getMapIdFn(i18n.searchReGeo)); } }),
            React.createElement(SettingWrapper, { text: i18n.textFollowLine, type: "item", selected: textFollowLine, onClick: function () { return jumpTo(getMapIdFn(i18n.textFollowLine)); } }),
            React.createElement(SettingWrapper, { text: i18n.infoWindow, type: "item", onClick: function () { return jumpTo(getMapIdFn(i18n.infoWindow)); } }),
            React.createElement(SettingWrapper, { text: i18n.infoWindowCanDrag, type: "item", selected: infoWindowCanDrag, onClick: function () { return jumpTo(getMapIdFn(i18n.infoWindowCanDrag)); } }),
            React.createElement(SettingWrapper, { text: i18n.can3D, type: "item", selected: can3D, onClick: function () { return jumpTo(getMapIdFn(i18n.can3D)); } }),
            React.createElement(SettingWrapper, { text: i18n.setView, type: "item", onClick: function () { return jumpTo(getMapIdFn(i18n.setView)); } }),
            React.createElement(SettingWrapper, { text: i18n.zoomRange, type: "item", onClick: function () { return jumpTo(getMapIdFn(i18n.zoomRange)); } }),
            React.createElement(SettingWrapper, { text: i18n.fenceSelect, type: "item", onClick: function () { return jumpTo(getMapIdFn(i18n.fenceSelect)); } }),
            React.createElement(SettingWrapper, { text: i18n.mobileSettings, type: "item", onClick: function () { return jumpTo(getMapIdFn(i18n.mobileSettings)); } }),
            React.createElement(SettingWrapper, { text: i18n.interfaceLayout, onClick: function () { return jumpTo(getMapIdFn(i18n.interfaceLayout)); } }),
            React.createElement(SettingWrapper, { text: i18n.showCards, type: "item", selected: showCards, onClick: function () { return jumpTo(getMapIdFn(i18n.showCards)); } }),
            React.createElement(SettingWrapper, { text: i18n.showStartSearch, type: "item", selected: showStartSearch, onClick: function () { return jumpTo(getMapIdFn(i18n.showStartSearch)); } }),
            React.createElement(SettingWrapper, { text: i18n.showFilter, type: "item", selected: showFilter, onClick: function () { return jumpTo(getMapIdFn(i18n.showFilter)); } }),
            React.createElement(SettingWrapper, { text: i18n.showCollect, type: "item", selected: showCollect, onClick: function () { return jumpTo(getMapIdFn(i18n.showCollect)); } }),
            React.createElement(SettingWrapper, { text: i18n.showSearch, type: "item", selected: showSearch, onClick: function () { return jumpTo(getMapIdFn(i18n.showSearch)); } }),
            React.createElement(SettingWrapper, { text: i18n.showViewCollection, type: "item", selected: showViewCollection, onClick: function () { return jumpTo(getMapIdFn(i18n.showViewCollection)); } }),
            React.createElement(SettingWrapper, { text: i18n.toolbar, onClick: function () { return jumpTo(getMapIdFn(i18n.toolbar)); } }),
            React.createElement(SettingWrapper, { text: i18n.geoTools, type: "item", selected: geoToolsStatus !== 'none', onClick: function () { return jumpTo(getMapIdFn(i18n.geoTools)); } }),
            React.createElement(SettingWrapper, { text: i18n.otherTools, type: "item", selected: otherToolsStatus !== 'none', onClick: function () { return jumpTo(getMapIdFn(i18n.otherTools)); } }),
            React.createElement(SettingWrapper, { text: i18n.interfaceStyle, onClick: function () { return jumpTo(getMapIdFn(i18n.interfaceStyle)); } }),
            React.createElement(SettingWrapper, { text: i18n.functionPanel, type: "item", onClick: function () { return jumpTo(getMapIdFn(i18n.functionPanel)); } }),
            React.createElement(SettingWrapper, { text: i18n.onSearchBgc, type: "item", onClick: function () { return jumpTo(getMapIdFn(i18n.onSearchBgc)); } }),
            React.createElement(SettingWrapper, { text: i18n.mapControl, type: "item", onClick: function () { return jumpTo(getMapIdFn(i18n.mapControl)); } }),
            React.createElement(SettingWrapper, { text: i18n.mapBaseLayer, onClick: function () { return jumpTo(getMapIdFn(i18n.mapBaseLayer)); } }),
            React.createElement(SettingWrapper, { text: i18n.fenceStyle, onClick: function () { return jumpTo(getMapIdFn(i18n.fenceStyle)); } })),
        React.createElement("div", { className: "".concat(prefixCls, "-line") }),
        React.createElement(Scrollbar, { id: rightID },
            React.createElement("div", { className: "".concat(prefixCls, "-right") },
                React.createElement("div", { className: "".concat(prefixCls, "-right-title") },
                    React.createElement("div", { id: getMapIdFn(i18n.commonSettings), className: "".concat(prefixCls, "-right-type") }, i18n.commonSettings)),
                React.createElement("div", { id: getMapIdFn(i18n.initializationData) },
                    React.createElement(Checkbox, { className: "".concat(prefixCls, "-checkbox"), checked: isInitMap, onChange: changeInitMap, title: i18n.initializationData, subTitle: i18n.initializationDataDes })),
                React.createElement("div", { id: getMapIdFn(i18n.screeningMethod) },
                    React.createElement("div", null, i18n.screeningMethod),
                    React.createElement(RadioGroup, { className: "flex-col mb16", onChange: function (value) {
                            changeScreeningMethod === null || changeScreeningMethod === void 0 ? void 0 : changeScreeningMethod(value);
                        }, value: screeningMethod, options: geoFilterOptions })),
                React.createElement("div", { id: getMapIdFn(i18n.searchReGeo) },
                    React.createElement(Checkbox, { className: "".concat(prefixCls, "-checkbox"), checked: searchReGeo, onChange: changeSearchReGeo, title: i18n.searchReGeo, subTitle: i18n.searchReGeoDes })),
                React.createElement("div", { id: getMapIdFn(i18n.textFollowLine) },
                    React.createElement(Checkbox, { className: "".concat(prefixCls, "-checkbox ").concat(prefixCls, "-repeat-distance-checkbox"), checked: textFollowLine, onChange: toggleTextFollowLine, title: i18n.textFollowLine, subTitle: i18n.textFollowLineHint })),
                React.createElement("div", { className: "".concat(prefixCls, "-repeat-distance ").concat(prefixCls, "-ml24 mb8") }, textFollowLine && (React.createElement(RadioGroup, { onChange: handleTextRepeatDistanceChange, value: textRepeatDistance.toString(), options: textFollowLineRadioGroupOptions }))),
                React.createElement("div", { "data-test": "map-settings-info-window" },
                    React.createElement(Checkbox, { checked: infoWindowToolsStatus === 'all' ? true : false, onChange: _changeInfoWindowTools, title: i18n.infoWindowTools, indeterminate: infoWindowToolsStatus === 'part' ? true : false, "data-test": "map-settings-info-window-all-checkbox" }),
                    React.createElement("div", { className: "".concat(prefixCls, "-drag"), id: getMapIdFn(i18n.infoWindowTools) },
                        React.createElement(SortList, { list: _infoWindowTools, onChange: setInfoWindowTools, renderItem: infoWindowToolRender, valueKey: "id" }))),
                React.createElement("div", { className: "".concat(prefixCls, "-right-subTitle mb12"), id: getMapIdFn(i18n.infoWindow) }, i18n.infoWindow),
                React.createElement("div", { className: "ml8 mb8 info-window-trigger-mode" },
                    React.createElement(RadioGroup, { "data-test": "map-settings-map-info-window-trigger-mode", onChange: handleMapInfoWindowTriggerModeChange, value: leftInfoClick
                            ? 'leftClick'
                            : rightInfoClick
                                ? 'rightClick'
                                : doubleInfoClick
                                    ? 'doubleClick'
                                    : undefined, options: [
                            {
                                label: i18n.leftClick,
                                value: 'leftClick',
                            },
                            {
                                label: i18n.rightClick,
                                value: 'rightClick',
                            },
                            {
                                label: i18n.doubleClick,
                                value: 'doubleClick',
                            },
                        ] })),
                React.createElement("div", { id: getMapIdFn(i18n.infoWindowCanDrag) },
                    React.createElement(Checkbox, { className: "".concat(prefixCls, "-checkbox ").concat(prefixCls, "-repeat-distance-checkbox"), checked: infoWindowCanDrag, onChange: changeInfoWindowCanDrag, title: i18n.infoWindowCanDrag, subTitle: i18n.infoWindowCanDragDes, "data-test": "map-settings-info-window-can-drag" })),
                React.createElement("div", { id: getMapIdFn(i18n.can3D) },
                    React.createElement(Checkbox, { className: "".concat(prefixCls, "-checkbox"), checked: can3D, onChange: changeCan3D, title: i18n.can3D, subTitle: i18n.can3DDes })),
                React.createElement("div", { id: getMapIdFn(i18n.setView), className: "".concat(prefixCls, "-right-subTitle mb4") }, i18n.setView),
                React.createElement("div", { className: "".concat(prefixCls, "-right-type-detailed mb12 mt4") }, i18n.setViewDes),
                React.createElement(Input, { className: "".concat(prefixCls, "-duration-input mb8"), suffixAddon: "ms", size: "compact", defaultValue: setViewDuration, onChange: _setSetViewDuration }),
                React.createElement("div", { id: getMapIdFn(i18n.zoomRange), className: "".concat(prefixCls, "-right-subTitle mb4") }, i18n.zoomRange),
                React.createElement(Input, { className: "".concat(prefixCls, "-duration-input mb8"), suffixAddon: "maxZoom", size: "compact", type: 'menu-bg', defaultValue: maxZoom, onChange: function (e) {
                        var target = e.target;
                        var value = Number(target.value);
                        if (isNumber(value))
                            setMaxZoom(value);
                    } }),
                React.createElement(Input, { className: "".concat(prefixCls, "-duration-input mb8"), suffixAddon: "minZoom", size: "compact", type: 'menu-bg', defaultValue: minZoom, onChange: function (e) {
                        var target = e.target;
                        var value = Number(target.value);
                        if (isNumber(value))
                            setMinZoom(value);
                    } }),
                React.createElement("div", { className: "".concat(prefixCls, "-right-subTitle mb4") },
                    "capacityId",
                    React.createElement(Tooltip, { mouseEnterDelay: 0, mouseLeaveDelay: 0, title: i18n.help1, getPopupContainer: getPopupContainer },
                        React.createElement(Icon, { icon: "help", size: 10, className: "ml4" }))),
                React.createElement(Input, { className: "".concat(prefixCls, "-duration-input mb8"), suffixAddon: "capacityId", size: "compact", type: 'menu-bg', defaultValue: capacityId, onChange: function (e) {
                        var target = e.target;
                        var value = target.value;
                        setCapacityId(value || '');
                        // if (isNumber(value)) setMinZoom(value);
                    } }),
                React.createElement("div", { className: "".concat(prefixCls, "-right-subTitle mb4") },
                    "bufferSize",
                    React.createElement(Tooltip, { mouseEnterDelay: 0, mouseLeaveDelay: 0, title: i18n.help2, getPopupContainer: getPopupContainer },
                        React.createElement(Icon, { icon: "help", size: 10, className: "ml4" }))),
                React.createElement(Input, { className: "".concat(prefixCls, "-duration-input mb8"), suffixAddon: "bufferSize", size: "compact", type: 'menu-bg', defaultValue: bufferSize, onChange: function (e) {
                        var target = e.target;
                        var value = target.value;
                        setBufferSize(value);
                    } }),
                React.createElement("div", { className: "".concat(prefixCls, "-right-subTitle mb12"), id: getMapIdFn(i18n.fenceSelect) }, i18n.fenceSelect),
                React.createElement(RadioGroup, { className: "".concat(prefixCls, "-radio-group mb16"), value: geoFenceChoiceType === GeoFenceChoiceTypeSet.multi
                        ? i18n.fenceMulti
                        : i18n.fenceSingle, onChange: function (value) {
                        changeGeoFenceChoiceType &&
                            changeGeoFenceChoiceType(value === i18n.fenceMulti
                                ? GeoFenceChoiceTypeSet.multi
                                : GeoFenceChoiceTypeSet.single);
                    }, options: [i18n.fenceMulti, i18n.fenceSingle] }),
                geoFenceChoiceType !== GeoFenceChoiceTypeSet.multi && (React.createElement("div", { className: "".concat(prefixCls, "-search-topping") },
                    React.createElement(Checkbox, { className: "".concat(prefixCls, "-checkbox"), checked: autoSearch, onChange: changeAutoSearch, title: i18n.autoSearch }))),
                React.createElement("div", { className: "".concat(prefixCls, "-right-subTitle mb12"), id: getMapIdFn(i18n.mobileSettings) }, i18n.mobileSettings),
                React.createElement(Button, { onClick: function () { return openMobileSetting(Context, value); }, className: "mb16" }, i18n.mobileSettings),
                React.createElement("div", { className: "".concat(prefixCls, "-right-title") },
                    React.createElement("div", { id: getMapIdFn(i18n.interfaceLayout), className: "".concat(prefixCls, "-right-type") }, i18n.interfaceLayout),
                    React.createElement("div", { className: "".concat(prefixCls, "-right-type-detailed mt4") }, i18n.interfaceLayoutDes)),
                React.createElement("div", { id: getMapIdFn(i18n.showCards) },
                    React.createElement(Checkbox, { className: "".concat(prefixCls, "-checkbox"), checked: showCards, onChange: changeShowCards, title: i18n.showCards, subTitle: i18n.showCardsDes })),
                React.createElement("div", { id: getMapIdFn(i18n.showStartSearch) },
                    React.createElement(Checkbox, { className: "".concat(prefixCls, "-checkbox"), checked: showStartSearch, onChange: changeShowStartSearch, title: i18n.showStartSearch, subTitle: i18n.showStartSearchDes })),
                React.createElement("div", { id: getMapIdFn(i18n.showFilter) },
                    React.createElement(Checkbox, { className: "".concat(prefixCls, "-checkbox"), checked: showFilter, onChange: changeShowFilter, title: i18n.showFilter, subTitle: i18n.showFilterDes })),
                React.createElement("div", { id: getMapIdFn(i18n.showCollect) },
                    React.createElement(Checkbox
                    // disabled
                    , { 
                        // disabled
                        className: "".concat(prefixCls, "-checkbox"), checked: showCollect, onChange: changeShowCollecth, title: i18n.showCollect, subTitle: i18n.showCollectDes })),
                React.createElement("div", { id: getMapIdFn(i18n.showSearch) },
                    React.createElement(Checkbox, { className: "".concat(showSearch ? "mb8" : "".concat(prefixCls, "-checkbox")), checked: showSearch, onChange: changeShowSearch, title: i18n.showSearch, subTitle: i18n.showSearchDes })),
                showSearch && (React.createElement("div", { className: "".concat(prefixCls, "-search-topping") },
                    React.createElement(Checkbox, { className: "".concat(prefixCls, "-checkbox"), checked: showSearchTopping, onChange: changeShowSearchTopping, title: i18n.showSearchTopping }))),
                React.createElement("div", { id: getMapIdFn(i18n.showViewCollection) },
                    React.createElement(Checkbox, { className: "".concat(prefixCls, "-checkbox"), checked: showViewCollection, onChange: changeShowViewCollection, title: i18n.showViewCollection, subTitle: i18n.showViewCollectionDes })),
                React.createElement("div", { className: "".concat(prefixCls, "-right-title") },
                    React.createElement("div", { id: getMapIdFn(i18n.toolbar), className: "".concat(prefixCls, "-right-type") }, i18n.toolbar),
                    React.createElement("div", { className: "".concat(prefixCls, "-right-type-detailed mt4") }, i18n.toolbarDes)),
                React.createElement(RadioGroup, { onChange: function (value) {
                        setGeoToolsAutoRun(value === 'true');
                    }, value: geoToolsAutoRun ? 'true' : 'false', options: geoAutoRunRadioGroupOptions }),
                React.createElement("div", null,
                    React.createElement(Checkbox, { checked: geoToolsStatus === 'all' ? true : false, onChange: _changeGeoTools, title: i18n.geoTools, indeterminate: geoToolsStatus === 'part' ? true : false }),
                    React.createElement("div", { className: "".concat(prefixCls, "-drag"), id: getMapIdFn(i18n.geoTools) },
                        React.createElement("div", null,
                            React.createElement(Checkbox, { title: i18n.isochroneTransport, checked: isochroneTransport, onChange: changeIsochroneTransport })),
                        React.createElement(SortList, { list: _geoTools, onChange: setGeoTools, renderItem: geoToolRender, valueKey: "id" })),
                    React.createElement(Checkbox, { checked: otherToolsStatus === 'all' ? true : false, onChange: _changeOtherTools, title: i18n.otherTools, indeterminate: otherToolsStatus === 'part' ? true : false }),
                    React.createElement("div", { className: "".concat(prefixCls, "-drag"), id: getMapIdFn(i18n.otherTools) },
                        React.createElement(SortList, { list: _otherTools, onChange: setOtherTools, renderItem: otherToolRender, valueKey: "id" }))),
                React.createElement("div", { className: "".concat(prefixCls, "-right-title  mt36") },
                    React.createElement("div", { id: getMapIdFn(i18n.interfaceStyle), className: "".concat(prefixCls, "-right-type") }, i18n.interfaceStyle)),
                React.createElement("div", { className: "".concat(prefixCls, "-right-subTitle mb12"), id: getMapIdFn(i18n.functionPanel) }, i18n.functionPanel),
                React.createElement(RadioGroup, { className: "".concat(prefixCls, "-radio-group mb16"), value: get(mapUIVK, interfaceStyle), onChange: function (value) {
                        changeInterfaceStyle && changeInterfaceStyle(mapUIKV[value]);
                    }, options: mapUIOptions, "data-test": "map-settings-interface-style" }),
                interfaceStyle === MapUIStyleTypeSet.custom && (React.createElement(Button, { onClick: function () { return openMapCustomCssVariableEditor(Context, value); }, className: "mb16" }, i18n.modifyVariable)),
                React.createElement(Button, { onClick: function () { return openMapCustomCssEditor(Context, value); }, className: "mb16" }, i18n.customStyle),
                React.createElement("div", { className: "".concat(prefixCls, "-right-subTitle mb12"), id: getMapIdFn(i18n.onSearchBgc) },
                    i18n.onSearchBgc,
                    React.createElement(Tooltip, { mouseEnterDelay: 0, mouseLeaveDelay: 0, title: i18n.onSearchBgcHelp, getPopupContainer: getPopupContainer },
                        React.createElement(Icon, { icon: "help", size: 10 }))),
                React.createElement("div", { className: "mb12", style: { display: 'flex', alignItems: 'center' }, "data-test": "map-settings-start-analysis-button-color" },
                    React.createElement(ColorPickerWrapper, { getPopupContainer: getPopupContainer, color: onSearchBgc, onChange: function (color) {
                            setOnSearchBgc(color);
                        }, pickColorFromMap: true, toMeasureCanvas: mapInstanceCanvas }),
                    React.createElement(Input, { value: onSearchBgc, disabled: true, className: "ml8", style: { width: 120 } }),
                    onSearchBgc && (React.createElement(LinkButton, { size: "compact", className: "".concat(prefixCls, "-right-sub-title-link"), onClick: function () {
                            setOnSearchBgc('');
                        } },
                        React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
                            React.createElement(Icon, { icon: "refresh-2", size: 12 }),
                            i18n.resetOnSearchBgc)))),
                React.createElement("div", { className: "".concat(prefixCls, "-right-subTitle mb12"), id: getMapIdFn(i18n.mapControl) },
                    i18n.mapControl,
                    React.createElement(Tooltip, { mouseEnterDelay: 0, mouseLeaveDelay: 0, title: i18n.mapControlTips, getPopupContainer: getPopupContainer },
                        React.createElement(Icon, { icon: "help", size: 10, className: "ml4" }))),
                React.createElement("div", null,
                    React.createElement(Checkbox, { className: "".concat(prefixCls, "-checkbox"), checked: showMapControl, onChange: changeShowMapControl, title: i18n.showMapControl, subTitle: i18n.showMapControlDes, "data-test": "map-settings-show-map-control" })),
                React.createElement(Checkbox, { className: "".concat(prefixCls, "-checkbox"), checked: !followSystemBase, onChange: changeFollowSystemBase, title: i18n.dontFollowSystem, subTitle: i18n.dontFollowSystemDes, "data-test": "map-settings-map-control-custom-style" }),
                !followSystemBase && (React.createElement(RadioGroup, { className: "".concat(prefixCls, "-radio-group mb16 ml30"), value: toolTheme === TYPE_TOOL_THEME.light ? i18n.toolThemeLight : i18n.toolThemeDark, onChange: function (value) {
                        changeToolTheme &&
                            changeToolTheme(value === i18n.toolThemeLight ? TYPE_TOOL_THEME.light : TYPE_TOOL_THEME.dark);
                    }, options: [i18n.toolThemeLight, i18n.toolThemeDark], "data-test": "map-settings-map-control-custom-style-radio-group" })),
                React.createElement("div", { className: "".concat(prefixCls, "-right-title") },
                    React.createElement("div", { id: getMapIdFn(i18n.mapBaseLayer), className: "".concat(prefixCls, "-right-type") }, i18n.mapBaseLayer)),
                React.createElement("div", null,
                    React.createElement(Checkbox, { checked: mapStylesStatus === 'all' ? true : false, onChange: _changeMapStyles, title: i18n.systemDefaultBase, indeterminate: mapStylesStatus === 'part' ? true : false }),
                    React.createElement("div", { className: "".concat(prefixCls, "-drag"), "data-test": "map-settings-map-base-style-list" },
                        React.createElement(SortList, { list: _mapStyles, onChange: setMapStyles, renderItem: mapStyleRender, valueKey: "id" }))),
                size(mapCustomStyles) > 0 && (React.createElement(React.Fragment, null,
                    React.createElement("div", { className: "".concat(prefixCls, "-right-subTitle mb8") }, i18n$1.mapEdit.baseCustom.base),
                    React.createElement("div", { className: "".concat(prefixCls, "-drag"), "data-test": "map-settings-custom-base-list" },
                        React.createElement(SortList, { list: mapCustomStyles, onChange: setMapCustomStyles, renderItem: mapCustomStyleRender, valueKey: "id" })))),
                permissionStyles && (React.createElement(Button, { onClick: function () {
                        setCurrentCustomDetail({});
                        setShowBaseLayerEditor(true);
                    }, className: "mb16", "data-test": "map-settings-create-custom-base" }, i18n$1.mapEdit.baseCustom.addBase)),
                React.createElement("div", { className: "".concat(prefixCls, "-right-subTitle mb4") },
                    i18n.addBaseFilter,
                    React.createElement(LinkButton, { size: "compact", className: "".concat(prefixCls, "-right-sub-title-link"), href: "https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter", target: "_blank" }, i18n.documentation)),
                React.createElement("div", { className: "".concat(prefixCls, "-right-type-detailed mb4") },
                    i18n.cssFilterDemo,
                    React.createElement(LinkButton, { size: "compact", className: "".concat(prefixCls, "-right-sub-title-link"), onClick: function () {
                            var _a, _b;
                            var value = ((_b = (_a = styleTextAreaRef.current) === null || _a === void 0 ? void 0 : _a.textarea) === null || _b === void 0 ? void 0 : _b.value) || '';
                            changeCssFilter(value);
                            selectMapStyle();
                        } }, i18n.refreshStyle)),
                React.createElement(Textarea, { ref: styleTextAreaRef, className: "mb16", placeholder: i18n.addBaseFilterPlaceholder, defaultValue: cssFilter, onPressEnter: _changeCssFilter }),
                React.createElement("div", { className: "".concat(prefixCls, "-right-subTitle mb12") }, i18n.projection),
                React.createElement(RadioGroup, { className: "".concat(prefixCls, "-radio-group mb16"), value: projection, onChange: function (value) {
                        setProjection(value);
                    }, options: ['baidu', 'EPSG:3857', 'EPSG:4326', 'EPSG:4490'] }),
                React.createElement("div", { className: "".concat(prefixCls, "-right-subTitle mb12") }, i18n.coordinateSystem),
                React.createElement(RadioGroup, { className: "".concat(prefixCls, "-radio-group mb36"), value: srsToText[srs], onChange: function (value) {
                        var v = textToSrs[value] || MapSrsSet.wgs84;
                        changeSrs(v);
                    }, options: [i18n.wgs84, i18n.bd09, i18n.gcj02] }),
                React.createElement("div", { className: "".concat(prefixCls, "-right-title") },
                    React.createElement("div", { id: getMapIdFn(i18n.fenceStyle), className: "".concat(prefixCls, "-right-type") }, i18n.fenceStyle),
                    React.createElement("div", { className: "".concat(prefixCls, "-right-type-detailed mt4") },
                        i18n.fenceStyleDes,
                        React.createElement(LinkButton, { size: "compact", onClick: updateRenderCurrentGeo, className: "".concat(prefixCls, "-refresh-handle") }, i18n.refreshFence),
                        i18n.fenceStyleDes2)),
                React.createElement("div", { className: "".concat(prefixCls, "-right-sub-title mb8") }, i18n.activeFence),
                React.createElement("div", { className: "".concat(prefixCls, "-fence-setting mb16") },
                    React.createElement("div", { style: { display: 'flex' } },
                        React.createElement("div", { className: "".concat(prefixCls, "-fence-setting-item") },
                            React.createElement(ColorPickerWrapper, { getPopupContainer: getPopupContainer, color: activeFence.lineColor, onChange: function (color) {
                                    activeFence.lineColor = color;
                                }, pickColorFromMap: true, toMeasureCanvas: mapInstanceCanvas }),
                            React.createElement("div", { className: "mt8" }, i18n.color)),
                        React.createElement("div", { className: "".concat(prefixCls, "-fence-setting-item") },
                            React.createElement(InputNumber, { size: "compact", visibilityHandler: true, step: 0.1, defaultValue: activeFence.lineWidth, onPressEnter: _activeFenceLineWidth, onBlur: _activeFenceLineWidth }),
                            React.createElement("div", { className: "mt8" }, i18n.thickness)),
                        React.createElement("div", { className: "".concat(prefixCls, "-fence-setting-item") },
                            React.createElement(Input, { size: "compact", placeholder: "ep. 1,2,1,2", allowClear: false, defaultValue: activeFence.lineDasharray.join(), onPressEnter: _activeFenceLineDash, onBlur: _activeFenceLineDash }),
                            React.createElement("div", { className: "mt8" }, i18n.linear)))),
                React.createElement("div", { className: "".concat(prefixCls, "-right-sub-title mb8") }, i18n.defaultFence),
                React.createElement("div", { className: "".concat(prefixCls, "-fence-setting") },
                    React.createElement("div", { style: { display: 'flex' } },
                        React.createElement("div", { className: "".concat(prefixCls, "-fence-setting-item") },
                            React.createElement(ColorPickerWrapper, { getPopupContainer: getPopupContainer, color: defaultFence.lineColor, onChange: function (color) {
                                    defaultFence.lineColor = color;
                                }, pickColorFromMap: true, toMeasureCanvas: mapInstanceCanvas }),
                            React.createElement("div", { className: "mt8" }, i18n.color)),
                        React.createElement("div", { className: "".concat(prefixCls, "-fence-setting-item") },
                            React.createElement(InputNumber, { size: "compact", visibilityHandler: true, step: 0.1, defaultValue: defaultFence.lineWidth, onPressEnter: _defaultFenceLineWidth, onBlur: _defaultFenceLineWidth }),
                            React.createElement("div", { className: "mt8" }, i18n.thickness)),
                        React.createElement("div", { className: "".concat(prefixCls, "-fence-setting-item") },
                            React.createElement(Input, { size: "compact", placeholder: "ep. 1,2,1,2", allowClear: false, defaultValue: defaultFence.lineDasharray.join(), onPressEnter: _defaultFenceLineDash, onBlur: _defaultFenceLineDash }),
                            React.createElement("div", { className: "mt8" }, i18n.linear)))))),
        React.createElement(Drawer, { className: "map-drawer ppp", level: null, handler: false, open: showBaseLayerEditor, onClose: function () {
                setShowBaseLayerEditor(false);
            }, width: '80vw' }, showBaseLayerEditor && (React.createElement(MapCustomBaseLayerDrawerContent, { detail: currentCustomDetail, onCancel: function () {
                setShowBaseLayerEditor(false);
            }, onDelete: function () {
                deleteMapCustomStyle(currentCustomDetail === null || currentCustomDetail === void 0 ? void 0 : currentCustomDetail.id);
            } })))));
});
var MapSettings$1 = MapSettings;

export { MapSettings$1 as default };
