import * as React from 'react';
import React__default from 'react';
import { map, isString, isNumber, size, forEach, set, get } from 'lodash';
import { aH as Authorized, aI as Previleges, I as Icon, ap as Checkbox, s as IconButton, p as i18n$3, a1 as Input, al as Button, W as Dropmenu, jx as TencentTileLayer, ah as LazyLoad, N as _default, aw as Select$1, q as appContext, t as toastApi, jy as SplitPanel, a as __awaiter, jz as dataURLtoFile, jA as uploadUtilV2, jB as PutFileTypeEnum, a2 as i18n$4, b1 as InputNumber, ay as jsxRuntimeExports, bS as _objectWithoutProperties, bV as ConfigContext, bP as _objectSpread2, bQ as _defineProperty$2, co as Icon$1, bW as ForwardRef$3, cx as ForwardRef$4, jC as Option, jD as OptGroup, cl as SizeContext, ck as useCompactItemContext, cg as FormItemInputContext, cd as _default$1, cf as DisabledContext, jE as TypedSelect, jF as getTransitionName, jG as getTransitionDirection, V as filter, O as map$1, jH as TYPE_SCREENING_METHOD, jI as MapSrsSet, bu as MapUIStyleTypeSet, u as useStaticCallback, y as Scrollbar, b4 as RadioGroup, x as SortList, am as Tooltip, jJ as GeoFenceChoiceTypeSet, ak as LinkButton, jK as TYPE_TOOL_THEME, jL as Textarea, aq as Drawer, jM as RULES, b0 as FULLSCREEN, jN as setDash } from './MapEditView-f6381866.js';
import classNames from 'classnames';
import 'perfect-scrollbar';
import { v4 } from 'uuid';
import { observer } from 'mobx-react';
import { useMount, useCreation } 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 'axios';
import animateScrollTo from 'animated-scroll-to';
import { F as ForwardRef$2, b as ForwardRef$5, g as getStatusClassNames, a as getMergedStatus } from './Search-8ea8abe8.js';
import 'mobx';
import 'lz-string';
import 'dayjs';
import 'react-dom';
import 'react-is';
import '@loadable/component';
import 'js-beautify';
import 'superstruct';
import '@tanem/react-nprogress';
import 'chroma-js';
import 'js-cookie';
import 'is-email';
import 'is-uuid';
import 'is-url';
import 'anymatch';
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';

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

const prefixCls$6 = 'dm-map-tool-wrapper';
const ToolWrapper = React.memo((props) => {
    const { text, checked, onChange, id, provided, showEdit, onDelete, onEdit } = props;
    const permissionStyles = Authorized.hasPermission(Previleges.addCustomBaseMap) &&
        Authorized.hasPermission(Previleges.updateAppPreference);
    return (React.createElement("div", { className: prefixCls$6 },
        checked ? (React.createElement(Icon, Object.assign({ icon: "drag-handle", className: `${prefixCls$6}-icon` }, provided === null || provided === void 0 ? void 0 : provided.dragHandleProps))) : (React.createElement("div", { className: `${prefixCls$6}-icon` },
            React.createElement("div", Object.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: `${prefixCls$6}-edit-icon ${prefixCls$6}-mlmr8`, onClick: onEdit })),
            permissionStyles && (React.createElement(IconButton, { icon: "close", type: "only-icon", className: `${prefixCls$6}-edit-icon`, onClick: onDelete }))))));
});
ToolWrapper.whyDidYouRender = true;
ToolWrapper.displayName = 'ToolWrapper';

const i18nBaseCustom$1 = i18n$3.mapEdit.baseCustom;
const menus3 = [
    { title: i18nBaseCustom$1.copy, key: 'copy' },
    { title: i18nBaseCustom$1.paste, key: 'paste', divider: true },
    { title: i18nBaseCustom$1.delete, key: 'delete' },
];
const prefixCls$5 = 'dm-map-custom-base-layer-drawer-content-header';
const Header = (props) => {
    const { onCancel, changeBaseLayer, onSave, onCopy, onPaste, onDelete, saveLoading, zoom, setZoom, center, setCenter, } = props;
    const _onClickMenuItem = (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$5 },
        React.createElement(IconButton, { icon: "close", onClick: onCancel, type: "only-icon" }),
        React.createElement("div", { className: `${prefixCls$5}-name` }, i18nBaseCustom$1.addBase),
        React.createElement("div", null,
            "zoom:",
            React.createElement(Input, { className: `${prefixCls$5}-zoom`, value: zoom, placeholder: i18nBaseCustom$1.help1, onChange: (e) => {
                    const value = e.target.value;
                    setZoom(value);
                } })),
        React.createElement("div", null,
            "center:",
            React.createElement(Input, { className: `${prefixCls$5}-center`, value: center, placeholder: i18nBaseCustom$1.help2, onChange: (e) => {
                    const value = e.target.value;
                    setCenter(value);
                } })),
        React.createElement(Button, { onClick: changeBaseLayer, className: `mr12` }, i18nBaseCustom$1.refresh),
        React.createElement(Button, { onClick: onCancel }, i18n$3.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 })));
};

const { useRef: useRef$2, useImperativeHandle, useEffect } = React;
// todo new update
const id = 'map-preview-base';
const center = [121.5303295328, 31.2063429624];
const zoom = 9;
const Preview = React.forwardRef((props, ref) => {
    const refMap = useRef$2();
    useMount(() => {
        var _a;
        const 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,
        });
    });
    const setCenter = (center) => {
        var _a;
        (_a = refMap.current) === null || _a === void 0 ? void 0 : _a.setCenter(new maptalks.Coordinate(center));
    };
    const changeBase = (options, cfg) => {
        var _a, _b;
        console.log(options, 'options-changeBase');
        const parentDom = document.getElementById(id);
        parentDom.innerHTML = '';
        (_a = refMap.current) === null || _a === void 0 ? void 0 : _a.remove();
        const 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;
        }
        let _options;
        if (!Array.isArray(options)) {
            _options = [options];
        }
        else {
            _options = options;
        }
        const 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);
        const groupTile = map(_options, (ops, index) => {
            if (ops.type === 'tencent') {
                // @ts-ignore
                return new TencentTileLayer('base' + index, Object.assign(Object.assign({}, options), { crossOrigin: 'Anonymous' }));
            }
            else {
                return new maptalks.TileLayer('base' + index, Object.assign(Object.assign({}, options), { crossOrigin: 'Anonymous' }));
            }
            // if (spatialReference) {
            //   refMap.current?.setSpatialReference({
            //     spatialReference,
            //   });
            // }
        });
        const 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);
        // }
    };
    const getMapDataUrl = () => {
        var _a;
        return (_a = refMap.current) === null || _a === void 0 ? void 0 : _a.toDataURL({
            mimeType: 'image/png',
            save: false,
            fileName: `picture_${new Date().getTime()}`, // file name
        });
    };
    useImperativeHandle(ref, () => {
        return {
            setCenter,
            changeBase,
            getMapDataUrl,
        };
    });
    useEffect(() => {
        return () => {
            var _a;
            (_a = refMap.current) === null || _a === void 0 ? void 0 : _a.remove();
        };
    }, []);
    return React.createElement("div", { id: id });
});

const JsonCodeEditor = LazyLoad(() => import('./index-5d31e445.js'));
const light$1 = i18n$3.mapEdit.mapSettings.toolThemeLight;
const dark$1 = i18n$3.mapEdit.mapSettings.toolThemeDark;
const i18nBaseCustom = i18n$3.mapEdit.baseCustom;
// const { useState } = React;
const options = [
    { key: light$1, label: light$1, value: light$1 },
    { key: dark$1, label: dark$1, value: dark$1 },
];
const prefixCls$4 = 'dm-map-custom-base-layer-drawer-content-setting';
const Setting = (props) => {
    const { changeBaseLayer, jsonCode, setJsonCode, setBaseName, baseName, zoomBarStyle, setZoomBarStyle, } = props;
    // const [jsonCode, setJsonCode] = useState(``);
    console.log(changeBaseLayer);
    const _nameChange = (e) => {
        const target = e.target;
        const value = target.value;
        setBaseName(value);
    };
    const formatJsCode = () => {
        setJsonCode(jsonCode);
    };
    const [ref, { height, width }] = _default();
    const _setJsCode = (value) => {
        setJsonCode(value);
        // try {
        //   const options = JSON.parse(value);
        //   if (options) {
        //     changeBaseLayer(options);
        //   }
        // } catch (e) {
        //   console.log(e);
        // }
    };
    return (React.createElement("div", { className: prefixCls$4 },
        React.createElement("div", { className: `${prefixCls$4}-options` },
            React.createElement("div", { className: `${prefixCls$4}-title` }, i18nBaseCustom.baseOptions),
            React.createElement("div", { ref: ref, style: { flex: 1 } },
                React.createElement(JsonCodeEditor, { height: `${height}px`, width: `${width}px`, onChange: _setJsCode, 
                    // onValidate={onValidate}
                    value: jsonCode, commands: [
                        {
                            name: 'indent',
                            bindKey: { win: 'Ctrl-[', mac: 'Command-[' },
                            exec: () => {
                                formatJsCode();
                            },
                        },
                    ] }))),
        React.createElement("div", { className: `${prefixCls$4}-display` },
            React.createElement("div", { className: `${prefixCls$4}-title` }, i18nBaseCustom.showSettings),
            React.createElement("div", { className: `${prefixCls$4}-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$1, { className: `mb16`, placeholder: "\u8BF7\u9009\u62E9", options: options, value: zoomBarStyle, onChange: setZoomBarStyle })))));
};

const light = i18n$3.mapEdit.mapSettings.toolThemeLight;
const dark = i18n$3.mapEdit.mapSettings.toolThemeDark;
const { useState, useRef: useRef$1, useCallback: useCallback$1 } = React;
const prefixCls$3 = 'dm-map-custom-base-layer-drawer-content';
const MapCustomBaseLayerDrawerContent = observer((props) => {
    const [saveLoading, setSaveLoading] = useState(false);
    const { onCancel, detail, onDelete } = props;
    const { routeStore } = React.useContext(appContext.getContext());
    const { MapSettingStore } = routeStore;
    const { updateMapCustomStyle } = MapSettingStore;
    let code = '';
    try {
        code = JSON.stringify(detail === null || detail === void 0 ? void 0 : detail.options);
    }
    catch (e) {
        console.log(e);
    }
    const [jsonCode, setJsonCode] = useState(code);
    const [zoomBarStyle, setZoomBarStyle] = useState((detail === null || detail === void 0 ? void 0 : detail.toolTheme) || light);
    const [baseName, setBaseName] = useState((detail === null || detail === void 0 ? void 0 : detail.content) || ``);
    const [zoom, setZoom] = useState(9);
    const [center, setCenter] = useState('121.5303295328,31.2063429624');
    const previewRef = useRef$1();
    // 刷新预览
    const changeBaseLayer = useCallback$1((code) => {
        var _a, _b;
        try {
            const _code = isString(code) ? code || jsonCode : jsonCode;
            if (!_code)
                return;
            const options = JSON.parse(_code);
            const 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((current) => 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]);
    const onSave = () => __awaiter(void 0, void 0, void 0, function* () {
        var _a, _b, _c;
        try {
            setSaveLoading(true);
            const options = JSON.parse(jsonCode);
            let img = '';
            const url = (_a = previewRef === null || previewRef === void 0 ? void 0 : previewRef.current) === null || _a === void 0 ? void 0 : _a.getMapDataUrl();
            const id = (detail === null || detail === void 0 ? void 0 : detail.id) || v4();
            if (url) {
                const data = dataURLtoFile(url);
                const resp = yield uploadUtilV2({ file: data }, PutFileTypeEnum.Image);
                // {name : img} = resp;
                img = resp.name;
                if (!img) {
                    setSaveLoading(false);
                    toastApi.error(i18n$4.common.screenshotFailed);
                    return;
                }
            }
            const customBase = {
                id,
                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);
        }
        catch (e) {
            console.error(e);
            setSaveLoading(false);
            toastApi.error('baselayer options typeerror');
        }
    });
    const onCopy = () => {
        var _a, _b;
        try {
            const options = JSON.parse(jsonCode);
            const customBase = {
                // id: detail?.id || uuid(),
                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');
        }
    };
    const onPaste = () => __awaiter(void 0, void 0, void 0, function* () {
        try {
            const data = yield navigator.clipboard.readText();
            const { options, toolTheme, content } = JSON.parse(data);
            setZoomBarStyle(toolTheme);
            setJsonCode(JSON.stringify(options));
            setBaseName(content);
            changeBaseLayer(JSON.stringify(options));
        }
        catch (e) {
            console.log(e);
        }
    });
    useMount$1(() => {
        changeBaseLayer();
    });
    return (React.createElement("div", { className: prefixCls$3 },
        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 })))));
});

const i18n$2 = i18n$3.mapEdit.mapSettings;
const prefixCls$2 = 'map-settings';
const InfoWindowStyle = (props) => {
    const { getMapIdFn } = props;
    const Context = appContext.getContext();
    const value = React.useContext(Context);
    const { routeStore } = value;
    const { MapSettingStore: { infoWindowStyle, setInfoWindowStyle }, } = routeStore;
    const _changeWidth = (e) => {
        const value = e.target.value;
        if (isNumber(Number(value))) {
            setInfoWindowStyle(Object.assign(Object.assign({}, infoWindowStyle), { width: Number(value) }));
        }
    };
    const _changeMaxHeight = (e) => {
        const value = e.target.value;
        if (isNumber(Number(value))) {
            setInfoWindowStyle(Object.assign(Object.assign({}, infoWindowStyle), { maxHeight: Number(value) }));
        }
    };
    const _changeContentFontSize = (e) => {
        const value = e.target.value;
        if (isNumber(Number(value))) {
            setInfoWindowStyle(Object.assign(Object.assign({}, infoWindowStyle), { contentFontSize: Number(value) }));
        }
    };
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: `${prefixCls$2}-right-subTitle mb12`, id: getMapIdFn(i18n$2.infoWindowWidth) }, i18n$2.infoWindowWidth),
        React.createElement("div", { className: "flex_center mb4", "data-test": "infowindow-width" },
            React.createElement(InputNumber, { size: "compact", step: 1, defaultValue: infoWindowStyle.width, onPressEnter: _changeWidth, onBlur: _changeWidth }),
            React.createElement("div", { className: "ml8" }, "px")),
        React.createElement("div", { className: "", id: getMapIdFn(i18n$2.infoWindowMaxHeight) }, i18n$2.infoWindowMaxHeight),
        React.createElement("div", { className: "flex_center mb4", "data-test": "infowindow-max-height" },
            React.createElement(InputNumber, { size: "compact", step: 1, defaultValue: infoWindowStyle.maxHeight, onPressEnter: _changeMaxHeight, onBlur: _changeMaxHeight }),
            React.createElement("div", { className: "ml8" }, "px")),
        React.createElement("div", { className: "", id: getMapIdFn(i18n$2.infoWindowContentFontSize) }, i18n$2.infoWindowContentFontSize),
        React.createElement("div", { className: "flex_center mb4", "data-test": "infowindow-content-font-size" },
            React.createElement(InputNumber, { size: "compact", step: 1, defaultValue: infoWindowStyle.contentFontSize, onPressEnter: _changeContentFontSize, onBlur: _changeContentFontSize }),
            React.createElement("div", { className: "ml8" }, "px"))));
};
var InfoWindowStyle$1 = observer(InfoWindowStyle);

var EmptyImage = function EmptyImage() {
  return /*#__PURE__*/jsxRuntimeExports.jsx("svg", {
    width: "184",
    height: "152",
    viewBox: "0 0 184 152",
    xmlns: "http://www.w3.org/2000/svg",
    children: /*#__PURE__*/jsxRuntimeExports.jsxs("g", {
      fill: "none",
      fillRule: "evenodd",
      children: [/*#__PURE__*/jsxRuntimeExports.jsxs("g", {
        transform: "translate(24 31.67)",
        children: [/*#__PURE__*/jsxRuntimeExports.jsx("ellipse", {
          fillOpacity: ".8",
          fill: "var(--metro-secondary-light-2)",
          cx: "67.797",
          cy: "106.89",
          rx: "67.797",
          ry: "12.668"
        }), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
          d: "M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z",
          fill: "var(--metro-secondary-1)"
        }), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
          d: "M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z",
          fill: "url(#linearGradient-1)",
          transform: "translate(13.56)"
        }), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
          d: "M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z",
          fill: "var(--metro-secondary-1)"
        }), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
          d: "M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z",
          fill: "var(--metro-secondary-disabled)"
        })]
      }), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
        d: "M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z",
        fill: "var(--metro-secondary-1)"
      }), /*#__PURE__*/jsxRuntimeExports.jsxs("g", {
        transform: "translate(149.65 15.383)",
        fill: "var(--metro-text-3)",
        children: [/*#__PURE__*/jsxRuntimeExports.jsx("ellipse", {
          cx: "20.654",
          cy: "3.167",
          rx: "2.849",
          ry: "2.815"
        }), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
          d: "M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"
        })]
      })]
    })
  });
};
EmptyImage.displayName = 'EmptyImage';

var SimpleImage = function SimpleImage() {
  var borderColor = 'var(--metro-border-1)',
    shadowColor = 'var(--metro-secondary-light-2)',
    contentColor = 'var(--metro-secondary-disabled)';
  return /*#__PURE__*/jsxRuntimeExports.jsx("svg", {
    width: "64",
    height: "41",
    viewBox: "0 0 64 41",
    xmlns: "http://www.w3.org/2000/svg",
    children: /*#__PURE__*/jsxRuntimeExports.jsxs("g", {
      transform: "translate(0 1)",
      fill: "none",
      fillRule: "evenodd",
      children: [/*#__PURE__*/jsxRuntimeExports.jsx("ellipse", {
        fill: shadowColor,
        cx: "32",
        cy: "33",
        rx: "32",
        ry: "7"
      }), /*#__PURE__*/jsxRuntimeExports.jsxs("g", {
        fillRule: "nonzero",
        stroke: borderColor,
        children: [/*#__PURE__*/jsxRuntimeExports.jsx("path", {
          d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
        }), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
          d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z",
          fill: contentColor
        })]
      })]
    })
  });
};
SimpleImage.displayName = 'SimpleImage';

var _excluded$1 = ["className", "rootClassName", "prefixCls", "image", "description", "children", "imageStyle"];
var defaultEmptyImg = /*#__PURE__*/jsxRuntimeExports.jsx(EmptyImage, {});
var simpleEmptyImg = /*#__PURE__*/jsxRuntimeExports.jsx(SimpleImage, {});
var Empty = function Empty(_ref) {
  var className = _ref.className,
    rootClassName = _ref.rootClassName,
    customizePrefixCls = _ref.prefixCls,
    _ref$image = _ref.image,
    image = _ref$image === void 0 ? defaultEmptyImg : _ref$image,
    description = _ref.description,
    children = _ref.children,
    imageStyle = _ref.imageStyle,
    restProps = _objectWithoutProperties(_ref, _excluded$1);
  var _React$useContext = React.useContext(ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('empty', customizePrefixCls);
  var alt = typeof description === 'string' ? description : 'empty';
  var imageNode = null;
  if (typeof image === 'string') {
    imageNode = /*#__PURE__*/jsxRuntimeExports.jsx("img", {
      alt: alt,
      src: image
    });
  } else {
    imageNode = image;
  }
  return /*#__PURE__*/jsxRuntimeExports.jsxs("div", _objectSpread2(_objectSpread2({
    className: classNames(prefixCls, _defineProperty$2({}, "".concat(prefixCls, "-normal"), image === simpleEmptyImg), className, rootClassName)
  }, restProps), {}, {
    children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
      className: "".concat(prefixCls, "-image"),
      style: imageStyle,
      children: imageNode
    }), description && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
      className: "".concat(prefixCls, "-description"),
      children: description
    }), children && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
      className: "".concat(prefixCls, "-footer"),
      children: children
    })]
  }));
};
Empty.PRESENTED_IMAGE_DEFAULT = defaultEmptyImg;
Empty.PRESENTED_IMAGE_SIMPLE = simpleEmptyImg;
Empty.displayName = 'Empty';

var DefaultRenderEmpty = function DefaultRenderEmpty(props) {
  var componentName = props.componentName,
    customizePrefixCls = props.prefixCls;
  var _React$useContext = React__default.useContext(ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefix = getPrefixCls('empty', customizePrefixCls);
  switch (componentName) {
    case 'Table':
    case 'List':
      return /*#__PURE__*/jsxRuntimeExports.jsx(Empty, {
        image: Empty.PRESENTED_IMAGE_SIMPLE,
        children: "\u6682\u65E0\u6570\u636E"
      });
    case 'Select':
    case 'TreeSelect':
    case 'Cascader':
    case 'Transfer':
    case 'Mentions':
      return /*#__PURE__*/jsxRuntimeExports.jsx(Empty, {
        image: Empty.PRESENTED_IMAGE_SIMPLE,
        className: "".concat(prefix, "-small"),
        children: "\u6682\u65E0\u6570\u636E"
      });
    /* istanbul ignore next */
    default:
      // Should never hit if we take all the component into consider.
      return /*#__PURE__*/jsxRuntimeExports.jsx(Empty, {});
  }
};

/**
 * Since Select, TreeSelect, Cascader is same Select like component.
 * We just use same hook to handle this logic.
 *
 * If `showArrow` not configured, always show it.
 */
function useShowArrow(showArrow) {
  return showArrow !== null && showArrow !== void 0 ? showArrow : true;
}

function _typeof$1(obj) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$1(obj); }
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty$1(obj, key, value) { key = _toPropertyKey$1(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey$1(arg) { var key = _toPrimitive$1(arg, "string"); return _typeof$1(key) === "symbol" ? key : String(key); }
function _toPrimitive$1(input, hint) { if (_typeof$1(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$1(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
var generateComp$1 = function generateComp(svgRef) {
  return function () {
    return /*#__PURE__*/React.createElement("svg", {
      width: "1em",
      height: "1em",
      viewBox: "0 0 48 48",
      fill: "currentColor",
      xmlns: "http://www.w3.org/2000/svg",
      focusable: false,
      "aria-hidden": "true",
      ref: svgRef
    }, /*#__PURE__*/React.createElement("path", {
      d: "M8.836 17.086a2 2 0 012.828 0L24 29.422l12.336-12.336a2 2 0 112.828 2.828l-13.75 13.75a2 2 0 01-2.828 0l-13.75-13.75a2 2 0 010-2.828z",
      fill: "currentColor"
    }));
  };
};
var SvgChevronDown = function SvgChevronDown(props, svgRef) {
  var newProps = _objectSpread$1(_objectSpread$1({}, props), {}, {
    name: "SvgChevronDown"
  });
  return /*#__PURE__*/React.createElement(Icon$1, _objectSpread$1(_objectSpread$1({}, newProps), {}, {
    component: generateComp$1(svgRef)
  }));
};
var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgChevronDown);

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
var generateComp = function generateComp(svgRef) {
  return function () {
    return /*#__PURE__*/React.createElement("svg", {
      width: "1em",
      height: "1em",
      viewBox: "0 0 48 48",
      fill: "currentColor",
      xmlns: "http://www.w3.org/2000/svg",
      focusable: false,
      "aria-hidden": "true",
      ref: svgRef
    }, /*#__PURE__*/React.createElement("path", {
      d: "M43.543 11.957a2.182 2.182 0 010 3.086l-24 24a2.182 2.182 0 01-3.086 0l-10.5-10.5a2.182 2.182 0 113.086-3.086L18 34.414l22.457-22.457a2.182 2.182 0 013.086 0z",
      fill: "currentColor"
    }));
  };
};
var SvgDoneCheck = function SvgDoneCheck(props, svgRef) {
  var newProps = _objectSpread(_objectSpread({}, props), {}, {
    name: "SvgDoneCheck"
  });
  return /*#__PURE__*/React.createElement(Icon$1, _objectSpread(_objectSpread({}, newProps), {}, {
    component: generateComp(svgRef)
  }));
};
var ForwardRef = /*#__PURE__*/React.forwardRef(SvgDoneCheck);

function getIcons(_ref) {
  var suffixIcon = _ref.suffixIcon,
    clearIcon = _ref.clearIcon,
    menuItemSelectedIcon = _ref.menuItemSelectedIcon,
    removeIcon = _ref.removeIcon,
    loading = _ref.loading,
    multiple = _ref.multiple,
    hasFeedback = _ref.hasFeedback,
    prefixCls = _ref.prefixCls,
    showArrow = _ref.showArrow,
    feedbackIcon = _ref.feedbackIcon;
  // Clear Icon
  var mergedClearIcon = clearIcon !== null && clearIcon !== void 0 ? clearIcon : /*#__PURE__*/jsxRuntimeExports.jsx(ForwardRef$2, {});

  // Validation Feedback Icon
  var getSuffixIconNode = function getSuffixIconNode(arrowIcon) {
    return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
      children: [showArrow !== false && arrowIcon, hasFeedback && feedbackIcon]
    });
  };

  // Arrow item icon
  var mergedSuffixIcon = null;
  if (suffixIcon !== undefined) {
    mergedSuffixIcon = getSuffixIconNode(suffixIcon);
  } else if (loading) {
    mergedSuffixIcon = getSuffixIconNode( /*#__PURE__*/jsxRuntimeExports.jsx(ForwardRef$4, {
      className: "".concat(prefixCls, "-loading")
    }));
  } else {
    var iconCls = "".concat(prefixCls, "-suffix");
    mergedSuffixIcon = function mergedSuffixIcon(_ref2) {
      var open = _ref2.open,
        showSearch = _ref2.showSearch;
      if (open && showSearch) {
        return getSuffixIconNode( /*#__PURE__*/jsxRuntimeExports.jsx(ForwardRef$5, {
          className: iconCls
        }));
      }
      return getSuffixIconNode( /*#__PURE__*/jsxRuntimeExports.jsx(ForwardRef$1, {
        className: iconCls
      }));
    };
  }

  // Checked item icon
  var mergedItemIcon = null;
  if (menuItemSelectedIcon !== undefined) {
    mergedItemIcon = menuItemSelectedIcon;
  } else if (multiple) {
    mergedItemIcon = /*#__PURE__*/jsxRuntimeExports.jsx(ForwardRef, {});
  } else {
    mergedItemIcon = null;
  }
  var mergedRemoveIcon = null;
  if (removeIcon !== undefined) {
    mergedRemoveIcon = removeIcon;
  } else {
    mergedRemoveIcon = /*#__PURE__*/jsxRuntimeExports.jsx(ForwardRef$3, {});
  }
  return {
    clearIcon: mergedClearIcon,
    suffixIcon: mergedSuffixIcon,
    itemIcon: mergedItemIcon,
    removeIcon: mergedRemoveIcon
  };
}

var _excluded = ["prefixCls", "bordered", "className", "rootClassName", "popupClassName", "listHeight", "placement", "listItemHeight", "size", "disabled", "notFoundContent", "status", "width", "style", "showArrow", "block", "getPopupContainer"];
var SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
var InternalSelect = function InternalSelect(_ref, ref) {
  var customizePrefixCls = _ref.prefixCls,
    _ref$bordered = _ref.bordered,
    bordered = _ref$bordered === void 0 ? true : _ref$bordered,
    className = _ref.className,
    rootClassName = _ref.rootClassName,
    popupClassName = _ref.popupClassName,
    _ref$listHeight = _ref.listHeight,
    listHeight = _ref$listHeight === void 0 ? 256 : _ref$listHeight,
    placement = _ref.placement,
    _ref$listItemHeight = _ref.listItemHeight,
    listItemHeight = _ref$listItemHeight === void 0 ? 24 : _ref$listItemHeight,
    customizeSize = _ref.size,
    customDisabled = _ref.disabled,
    notFoundContent = _ref.notFoundContent,
    customStatus = _ref.status,
    width = _ref.width,
    _ref$style = _ref.style,
    customStyle = _ref$style === void 0 ? {} : _ref$style,
    showArrow = _ref.showArrow,
    block = _ref.block,
    getPopupContainer = _ref.getPopupContainer,
    props = _objectWithoutProperties(_ref, _excluded);
  var size = React.useContext(SizeContext);
  var _React$useContext = React.useContext(ConfigContext),
    rootPrefixCls = _React$useContext.rootPrefixCls,
    getPrefixCls = _React$useContext.getPrefixCls,
    getContextPopupContainer = _React$useContext.getPopupContainer;
  var prefixCls = getPrefixCls('select', customizePrefixCls);
  var mergedWidth = block ? '100%' : width;
  var mergedStyle = mergedWidth ? _objectSpread2({
    width: mergedWidth
  }, customStyle) : customStyle;
  var _useCompactItemContex = useCompactItemContext(prefixCls),
    compactSize = _useCompactItemContex.compactSize,
    compactItemClassnames = _useCompactItemContex.compactItemClassnames;
  var mode = React.useMemo(function () {
    var _ref2 = props,
      m = _ref2.mode;
    if (m === 'combobox') {
      return undefined;
    }
    if (m === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
      return 'combobox';
    }
    return m;
  }, [props.mode]);
  var isMultiple = mode === 'multiple' || mode === 'tags';
  var mergedShowArrow = useShowArrow(showArrow);

  // ===================== Form Status =====================
  var _React$useContext2 = React.useContext(FormItemInputContext),
    contextStatus = _React$useContext2.status,
    hasFeedback = _React$useContext2.hasFeedback,
    isFormItemInput = _React$useContext2.isFormItemInput,
    feedbackIcon = _React$useContext2.feedbackIcon;
  var mergedStatus = getMergedStatus(contextStatus, customStatus);

  // ===================== Empty =====================
  var mergedNotFound;
  if (notFoundContent !== undefined) {
    mergedNotFound = notFoundContent;
  } else {
    mergedNotFound = /*#__PURE__*/jsxRuntimeExports.jsx(DefaultRenderEmpty, {
      componentName: "Select"
    });
  }

  // ===================== Icons =====================
  var _getIcons = getIcons(_objectSpread2(_objectSpread2({}, props), {}, {
      multiple: isMultiple,
      hasFeedback: hasFeedback,
      feedbackIcon: feedbackIcon,
      showArrow: mergedShowArrow,
      prefixCls: prefixCls
    })),
    suffixIcon = _getIcons.suffixIcon,
    itemIcon = _getIcons.itemIcon,
    removeIcon = _getIcons.removeIcon,
    clearIcon = _getIcons.clearIcon;
  var selectProps = _default$1(props, ['suffixIcon', 'itemIcon']);
  var rcSelectRtlDropdownClassName = classNames(popupClassName, rootClassName);
  var mergedSize = compactSize || customizeSize || size;

  // ===================== Disabled =====================
  var disabled = React.useContext(DisabledContext);
  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;
  var mergedClassName = classNames(_defineProperty$2(_defineProperty$2(_defineProperty$2(_defineProperty$2({}, "".concat(prefixCls, "-lg"), mergedSize === 'large'), "".concat(prefixCls, "-sm"), mergedSize === 'small'), "".concat(prefixCls, "-borderless"), !bordered), "".concat(prefixCls, "-in-form-item"), isFormItemInput), getStatusClassNames(prefixCls, mergedStatus, hasFeedback), compactItemClassnames, className, rootClassName);

  // ===================== Placement =====================
  var memoPlacement = React.useMemo(function () {
    if (placement !== undefined) {
      return placement;
    }
    return 'bottomLeft';
  }, [placement]);

  // ====================== Render =======================
  return /*#__PURE__*/jsxRuntimeExports.jsx(TypedSelect, _objectSpread2(_objectSpread2({
    ref: ref
  }, selectProps), {}, {
    style: mergedStyle,
    transitionName: getTransitionName(rootPrefixCls, getTransitionDirection(placement), props.transitionName),
    listHeight: listHeight,
    listItemHeight: listItemHeight,
    mode: mode,
    prefixCls: prefixCls,
    placement: memoPlacement,
    inputIcon: suffixIcon,
    menuItemSelectedIcon: itemIcon,
    removeIcon: removeIcon,
    clearIcon: clearIcon,
    notFoundContent: mergedNotFound,
    className: mergedClassName,
    dropdownClassName: rcSelectRtlDropdownClassName,
    showArrow: hasFeedback || mergedShowArrow,
    disabled: mergedDisabled,
    getPopupContainer: getPopupContainer || getContextPopupContainer
  }));
};
var Select = /*#__PURE__*/React.forwardRef(InternalSelect);
Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
Select.Option = Option;
Select.OptGroup = OptGroup;

const i18n$1 = i18n$3.mapEdit.mapSettings;
const prefixCls$1 = 'map-settings';
const AutoFly = (props) => {
    const { getMapIdFn } = props;
    const Context = appContext.getContext();
    const value = React.useContext(Context);
    const { routeStore } = value;
    const { MapSettingStore: { setAutoFly, autoFly }, CardsStore: { cards }, } = routeStore;
    const ref = React.useRef(null);
    const items = useCreation(() => {
        const _cards = filter(cards, (card) => !!card.isStatic === false);
        return map$1(_cards, (card) => {
            return { value: card.uuid, label: card.name };
        });
    }, [cards]);
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { ref: ref, className: "mb12" },
            React.createElement("div", { className: `${prefixCls$1}-right-subTitle mb12`, id: getMapIdFn(i18n$1.autoFly) }, i18n$1.autoFly),
            React.createElement(Select, { value: autoFly, getPopupContainer: () => ref.current, onChange: (value, option) => {
                    console.log(value, option);
                    setAutoFly(option.value);
                }, options: [{ value: '', label: 'None' }, ...items] }))));
};
var AutoFly$1 = observer(AutoFly);

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

export { MapSettings$1 as default };
