import * as React from 'react';
import { forwardRef, useCallback, useEffect } from 'react';
import classNames from 'classnames';
import { aj as LazyLoad, v as i18n$1, b4 as InputNumber, w as appContext, i as __read, s as __assign, bx as RadioGroup, a3 as Input, az as Select, bw as CreateFilter, t as toastApi, bK as changeColorToRgba, O as LineIcon, n as iconsUtil, cI as GeoFlow, h as __spreadArray, cJ as _default, cK as initCustomColorSchemePref, b as __awaiter, c as __generator, I as Icon, a4 as i18n$2, aI as Dropdown, am as LinkButton, ar as Checkbox, cL as THEME_COLOR, b7 as setCustomColorSchemePref, b8 as getCustomColorSchemeRef, T as THEME_COLOR$1, b6 as splitColors, G as GEO_TYPES, B as GeometryType } from './MapEditView-67426f04.js';
import { S as Slider } from './Slider-6a70ba99.js';
import { map, set, isNumber, forEach } from 'lodash';
import { observer, useLocalStore } from 'mobx-react';
import Polygon from './index-bed45a70.js';
import { a as MapPointSetting, M as MapColorPicker } from './MapColorPicker-37a8d2be.js';
import chroma from 'chroma-js';
import { C as ColorGradientMemo } from './ColorGradient-81d3123c.js';
import LocationToLocationIcon from './index-830bc1c2.js';
import LocationToPolygonIcon from './index-5ce94b5f.js';

var ColorPanelWrapper$2 = LazyLoad(function () {
    return import('./index-79356d28.js').then(function (n) { return n.n; }).then(function (res) { return res.ColorPanelWrapper; });
});
var i18n = i18n$1.mapEdit.settingsPanel;
var useRef$2 = React.useRef, useState$2 = React.useState;
var childrens$1 = [
    {
        label: '0.2px',
        value: '0.2px',
        key: 0.2,
    },
    {
        label: '0.5px',
        value: '0.5px',
        key: 0.5,
    },
    {
        label: '0.8px',
        value: '0.8px',
        key: 0.8,
    },
    {
        label: '1px',
        value: '1px',
        key: 1,
    },
    {
        label: '2px',
        value: '2px',
        key: 2,
    },
    {
        label: '3px',
        value: '3px',
        key: 3,
    },
    {
        label: '4px',
        value: '4px',
        key: 4,
    },
];
// for (let i = 1; i <= 20; i++) {
//   const item = {
//     label: `${i}px`,
//     value: `${i}px`,
//     key: i,
//   };
//   childrens.push(item);
// }
var prefixCls$a = 'dm-map-polygon-setting';
var array$1 = new Array(4);
var InputWrapper = React.memo(function (props) {
    var value = props.value, onChange = props.onChange;
    var _changeValue = function (value) {
        var _value = Number(value);
        if (isNumber(_value)) {
            if (_value > 1) {
                _value = 1;
            }
            else if (_value < 0) {
                _value = 0;
            }
            onChange && onChange(_value);
        }
        else {
            toastApi.warning('Illegal number');
        }
    };
    var _onPressEnter = function (e) {
        var target = e.target;
        _changeValue(target.value);
    };
    var _onBlur = function (e) {
        var target = e.target;
        _changeValue(target.value);
    };
    return (React.createElement(InputNumber, { className: "".concat(prefixCls$a, "-opacity-input"), size: "compact", type: "menu-bg", value: value, visibilityHandler: true, onPressEnter: _onPressEnter, onBlur: _onBlur }));
});
var MapPolygonSetting$1 = observer(function (props) {
    var _a;
    var _b = React.useContext(appContext.getContext()).routeStore, mapInstanceCanvas = _b.mapInstanceCanvas, getPopupContainer = _b.getPopupContainer;
    var style = props.style, onOk = props.onOk, onCancel = props.onCancel, loading = props.loading, children = props.children, className = props.className;
    var _c = __read(useState$2(__assign({}, style)), 2), _style = _c[0], setStyle = _c[1];
    var _d = _style || {}, color = _d.color, strokeDasharray = _d.strokeDasharray, strokeStyle = _d.strokeStyle, fillOpacity = _d.fillOpacity, strokeOpacity = _d.strokeOpacity, strokeWeight = _d.strokeWeight;
    var refPopup = useRef$2(null);
    var changeStrokeStyle = function (value) {
        var strokeStyle = value === i18n.lineStyleSolid ? 'solid' : 'dashed';
        var data = __assign(__assign({}, _style), { strokeStyle: strokeStyle });
        setStyle(data);
    };
    var _changeStrokeDasharray = function (_a) {
        var index = _a.index, value = _a.value;
        set(strokeDasharray || [0, 0, 0, 0], index, value);
        var data = __assign(__assign({}, _style), { strokeDasharray: strokeDasharray });
        setStyle(data);
    };
    var _changeStrokeWeight = function (value) {
        var strokeWeight = (value + '').replace(/px/g, ''); //option[0].key;
        var data = __assign(__assign({}, _style), { strokeWeight: Number(strokeWeight) });
        setStyle(data);
    };
    var _onChange = function (color) {
        var data = __assign(__assign({}, _style), { color: color });
        setStyle(data);
    };
    var _changeStrokeOpacity = function (value) {
        var data = __assign(__assign({}, _style), { strokeOpacity: Number(value) });
        setStyle(data);
    };
    var _changeFillOpacity = function (value) {
        var data = __assign(__assign({}, _style), { fillOpacity: Number(value) });
        setStyle(data);
    };
    var _onOk = function () {
        onOk && onOk(_style);
        onCancel && onCancel();
    };
    var _onCancel = function () {
        onCancel && onCancel();
    };
    var isSolid = strokeStyle === 'solid';
    var overlay = (React.createElement("div", { className: prefixCls$a },
        React.createElement("div", { className: "".concat(prefixCls$a, "-drag-wrap"), ref: refPopup },
            React.createElement("div", { className: "".concat(prefixCls$a, "-content") },
                React.createElement("div", { className: "".concat(prefixCls$a, "-left") },
                    React.createElement("div", { className: "".concat(prefixCls$a, "-title mb12") }, i18n.strokeStyle),
                    React.createElement("div", { style: { display: 'flex' }, className: "".concat(prefixCls$a, "-linestyle") },
                        React.createElement(RadioGroup, { className: "mb8", value: isSolid ? i18n.lineStyleSolid : i18n.lineStyleDashed, onChange: changeStrokeStyle, options: [i18n.lineStyleSolid, i18n.lineStyleDashed] })),
                    React.createElement("div", { style: { display: 'flex' }, className: classNames((_a = {},
                            _a["".concat(prefixCls$a, "-solid")] = isSolid,
                            _a)) }, map(array$1, function (a, index) {
                        return (React.createElement(Input, { type: "menu-bg", key: index, size: "compact", placeholder: "", className: "input", defaultValue: (strokeDasharray === null || strokeDasharray === void 0 ? void 0 : strokeDasharray[index]) + '', onChange: function (e) {
                                var target = e.target;
                                var value = target.value;
                                _changeStrokeDasharray({ index: index, value: value });
                            }, centered: true, allowClear: false }));
                    })),
                    React.createElement("div", { className: "".concat(prefixCls$a, "-title ").concat(prefixCls$a, "-mt19 mb10") }, i18n.strokeWidth),
                    React.createElement(Select, { className: "".concat(prefixCls$a, "-select ").concat(prefixCls$a, "-mb40"), getPopupContainer: function () { return refPopup.current; }, size: "compact", showSearch: true, options: childrens$1, createAble: true, type: "menu-bg", value: strokeWeight, onChange: _changeStrokeWeight }),
                    React.createElement("div", { className: "".concat(prefixCls$a, "-title") }, i18n.strokeOpacity),
                    React.createElement("div", { className: "".concat(prefixCls$a, "-opacity-item ").concat(prefixCls$a, "-mb50") },
                        React.createElement(Slider, { className: "".concat(prefixCls$a, "-opacity-slider"), size: "small", min: 0, max: 1, step: 0.01, value: Number(strokeOpacity), onChange: _changeStrokeOpacity, getTooltipPopupContainer: function (node) { return node === null || node === void 0 ? void 0 : node.closest('.dm-page-root'); } }),
                        React.createElement(InputWrapper, { value: strokeOpacity, onChange: _changeStrokeOpacity })),
                    React.createElement("div", { className: "".concat(prefixCls$a, "-title") }, i18n.fillOpacity),
                    React.createElement("div", { className: "".concat(prefixCls$a, "-opacity-item") },
                        React.createElement(Slider, { className: "".concat(prefixCls$a, "-opacity-slider"), size: "small", min: 0, max: 1, step: 0.01, value: Number(fillOpacity), onChange: _changeFillOpacity, getTooltipPopupContainer: function (node) { return node === null || node === void 0 ? void 0 : node.closest('.dm-page-root'); } }),
                        React.createElement(InputWrapper, { value: fillOpacity, onChange: _changeFillOpacity }))),
                React.createElement("div", { className: "".concat(prefixCls$a, "-right") },
                    React.createElement(ColorPanelWrapper$2, __assign({}, props, { color: color || '', onChange: _onChange, pickColorFromMap: true, toMeasureCanvas: mapInstanceCanvas })))))));
    return (React.createElement(CreateFilter, { okButtonProps: { style: { marginRight: 12 } }, onClose: _onCancel, onOk: _onOk, loading: loading, overlay: overlay, footerClassName: "".concat(prefixCls$a, "-footer"), 
        // placement="bottomRight"
        className: classNames("".concat(prefixCls$a, "-padding"), className), getPopupContainer: getPopupContainer }, children));
});

var MapPolygonSetting = React.memo(MapPolygonSetting$1);

var prefixCls$9 = 'dm-map-visual-card-polygon-mark';
var PolygonMark = React.memo(function (props) {
    var _a;
    var _b = props || {}, isSimpleCardsMode = _b.isSimpleCardsMode, color = _b.color, onClick = _b.onClick, editable = _b.editable, _c = _b.className, className = _c === void 0 ? '' : _c, style = _b.style, updateStyle = _b.updateStyle, currentVisual = _b.currentVisual;
    var _onClick = function () {
        editable && onClick && onClick();
    };
    var _color = currentVisual ? '#bac1d7' : color;
    var ele = (React.createElement("div", { className: classNames("".concat(className, " ").concat(prefixCls$9), (_a = {},
            _a["".concat(prefixCls$9, "-simple")] = isSimpleCardsMode,
            _a["".concat(prefixCls$9, "-normal")] = !updateStyle,
            _a)), style: { backgroundColor: changeColorToRgba(_color || '', 0.1) }, onClick: _onClick },
        React.createElement(Polygon, { color: _color, size: isSimpleCardsMode ? 14 : 16 })));
    if (!updateStyle) {
        return ele;
    }
    return (React.createElement(MapPolygonSetting, { onCancel: _onClick, style: style, onOk: updateStyle }, ele));
});
PolygonMark.whyDidYouRender = true;
PolygonMark.displayName = 'PolygonMark';

var ColorPanelWrapper$1 = LazyLoad(function () {
    return import('./index-79356d28.js').then(function (n) { return n.n; }).then(function (res) { return res.ColorPanelWrapper; });
});
var useRef$1 = React.useRef, useState$1 = React.useState;
var childrens = [
    {
        label: '0.2px',
        value: '0.2px',
        key: 0.2,
    },
    {
        label: '0.5px',
        value: '0.5px',
        key: 0.5,
    },
    {
        label: '0.8px',
        value: '0.8px',
        key: 0.8,
    },
    {
        label: '1px',
        value: '1px',
        key: 1,
    },
    {
        label: '2px',
        value: '2px',
        key: 2,
    },
    {
        label: '3px',
        value: '3px',
        key: 3,
    },
    {
        label: '4px',
        value: '4px',
        key: 4,
    },
];
// for (let i = 1; i <= 20; i++) {
//   const item = {
//     label: `${i}px`,
//     value: `${i}px`,
//     key: i,
//   };
//   childrens.push(item);
// }
var prefixCls$8 = 'dm-map-line-setting';
var array = new Array(4);
var MapLineSetting$1 = observer(function (props) {
    var _a;
    var _b = React.useContext(appContext.getContext()).routeStore, mapInstanceCanvas = _b.mapInstanceCanvas, getPopupContainer = _b.getPopupContainer;
    var style = props.style, onOk = props.onOk, onCancel = props.onCancel, children = props.children, className = props.className, loading = props.loading;
    var _c = __read(useState$1(__assign({}, style)), 2), _style = _c[0], setStyle = _c[1];
    var _d = _style || {}, color = _d.color, strokeDasharray = _d.strokeDasharray, strokeStyle = _d.strokeStyle, strokeWeight = _d.strokeWeight;
    var refPopup = useRef$1(null);
    var changeStrokeStyle = function (value) {
        var strokeStyle = value === i18n.lineStyleSolid ? 'solid' : 'dashed';
        var data = __assign(__assign({}, _style), { strokeStyle: strokeStyle });
        setStyle(data);
    };
    var _changeStrokeDasharray = function (_a) {
        var index = _a.index, value = _a.value;
        set(strokeDasharray || [0, 0, 0, 0], index, value);
        var data = __assign(__assign({}, _style), { strokeDasharray: strokeDasharray });
        setStyle(data);
    };
    var _changeStrokeWeight = function (value) {
        var strokeWeight = (value + '').replace(/px/g, ''); //option[0].key;
        var data = __assign(__assign({}, _style), { strokeWeight: Number(strokeWeight) });
        setStyle(data);
    };
    var _onChange = function (color) {
        var data = __assign(__assign({}, _style), { color: color });
        setStyle(data);
    };
    var _onOk = function () {
        onOk && onOk(_style);
        onCancel && onCancel();
    };
    var _onCancel = function () {
        onCancel && onCancel();
    };
    var i18n = i18n$1.mapEdit.settingsPanel;
    var isSolid = strokeStyle === 'solid';
    var overlay = (React.createElement("div", { className: prefixCls$8 },
        React.createElement("div", { className: "".concat(prefixCls$8, "-drag-wrap"), ref: refPopup },
            React.createElement("div", { className: "".concat(prefixCls$8, "-content") },
                React.createElement("div", { className: "".concat(prefixCls$8, "-left") },
                    React.createElement("div", { className: "".concat(prefixCls$8, "-title mb12") }, i18n.strokeStyle),
                    React.createElement("div", { style: { display: 'flex' }, className: "".concat(prefixCls$8, "-strokeStyle") },
                        React.createElement(RadioGroup, { className: "mb8", value: isSolid ? i18n.lineStyleSolid : i18n.lineStyleDashed, onChange: changeStrokeStyle, options: [i18n.lineStyleSolid, i18n.lineStyleDashed] })),
                    React.createElement("div", { style: { display: 'flex' }, className: classNames((_a = {},
                            _a["".concat(prefixCls$8, "-solid")] = isSolid,
                            _a)) }, map(array, function (a, index) {
                        return (React.createElement(Input, { type: "menu-bg", size: "compact", key: index, placeholder: "", className: "input", defaultValue: (strokeDasharray === null || strokeDasharray === void 0 ? void 0 : strokeDasharray[index]) + '', onChange: function (e) {
                                var target = e.target;
                                var value = target.value;
                                _changeStrokeDasharray({ index: index, value: value });
                            }, centered: true, allowClear: false }));
                    })),
                    React.createElement("div", { className: "".concat(prefixCls$8, "-title ").concat(prefixCls$8, "-mt19 mb10") }, i18n.strokeWidth),
                    React.createElement(Select, { className: "".concat(prefixCls$8, "-select"), getPopupContainer: function () { return refPopup.current; }, size: "compact", showSearch: true, options: childrens, createAble: true, type: "menu-bg", value: strokeWeight, onChange: _changeStrokeWeight, getNewOptionTemp: function (value) { return "\u201C".concat(value, "\u201D"); } })),
                React.createElement("div", { className: "".concat(prefixCls$8, "-right") },
                    React.createElement(ColorPanelWrapper$1, __assign({}, props, { color: color || '', onChange: _onChange, pickColorFromMap: true, toMeasureCanvas: mapInstanceCanvas })))))));
    return (React.createElement(CreateFilter, { okButtonProps: { style: { marginRight: 12 } }, onClose: _onCancel, onOk: _onOk, loading: loading, overlay: overlay, footerClassName: "".concat(prefixCls$8, "-footer"), className: classNames("".concat(prefixCls$8, "-padding"), className), clickAway: true, getPopupContainer: getPopupContainer }, children));
});

var MapLineSetting = React.memo(MapLineSetting$1);

var prefixCls$7 = 'dm-map-visual-card-line-mark';
var LineMark = React.memo(function (props) {
    var _a;
    var _b = props || {}, isSimpleCardsMode = _b.isSimpleCardsMode, color = _b.color, editable = _b.editable, onClick = _b.onClick, _c = _b.className, className = _c === void 0 ? '' : _c, style = _b.style, updateStyle = _b.updateStyle, currentVisual = _b.currentVisual;
    var _onClick = function () {
        editable && onClick && onClick();
    };
    var _color = currentVisual ? '#bac1d7' : color;
    var ele = (React.createElement("div", { className: classNames("".concat(className, " ").concat(prefixCls$7), (_a = {},
            _a["".concat(prefixCls$7, "-simple")] = isSimpleCardsMode,
            _a["".concat(prefixCls$7, "-normal")] = !updateStyle,
            _a)), style: { backgroundColor: changeColorToRgba(_color || '', 0.1) }, onClick: _onClick },
        React.createElement(LineIcon, { color: _color, size: isSimpleCardsMode ? 14 : 16 })));
    if (!updateStyle) {
        return ele;
    }
    return (React.createElement(MapLineSetting, { onCancel: _onClick, style: style, onOk: updateStyle }, ele));
});

var prefixCls$6 = 'dm-map-visual-card-point-mark';
var PointMark = observer(function (props) {
    var _a;
    var getIconUrl = iconsUtil.getIconUrl;
    var _b = props || {}, isSimpleCardsMode = _b.isSimpleCardsMode, color = _b.color, icon = _b.icon, editable = _b.editable, onClick = _b.onClick, _c = _b.className, className = _c === void 0 ? '' : _c, style = _b.style, updateStyle = _b.updateStyle, currentVisual = _b.currentVisual;
    var _onClick = function () {
        editable && onClick && onClick();
    };
    var _d = React.useContext(appContext.getContext()).routeStore, defaultIcon = _d.defaultIcon, customIconPrefInfo = _d.customIconPrefInfo;
    var iconUrl = (icon && getIconUrl(icon)) || '';
    var _icon = iconUrl || defaultIcon;
    var _color = currentVisual ? '#bac1d7' : color;
    var ele = (React.createElement("div", { className: classNames("".concat(className, " ").concat(prefixCls$6), (_a = {},
            _a["".concat(prefixCls$6, "-simple")] = isSimpleCardsMode,
            _a["".concat(prefixCls$6, "-normal")] = !updateStyle,
            _a)), style: {
            backgroundColor: changeColorToRgba(_color || '', 0.1),
        }, onClick: _onClick }, icon && customIconPrefInfo[icon] ? (React.createElement("img", { src: _icon, alt: "", className: "icon" })) : (React.createElement("div", { style: {
            width: 12,
            height: 12,
            backgroundColor: _color,
            WebkitMaskImage: "url(".concat(_icon, ")"),
            maskImage: "url(".concat(_icon, ")"),
            maskSize: 'contain',
            WebkitMaskSize: 'contain',
            WebkitMaskRepeat: 'no-repeat',
            maskRepeat: 'no-repeat',
            WebkitMaskPosition: 'center',
            maskPosition: 'center',
        } }))));
    if (!updateStyle) {
        return ele;
    }
    return (React.createElement(MapPointSetting, { onCancel: _onClick, style: style, onOk: updateStyle }, ele));
});

var prefixCls$5 = 'dm-map-visual-card-flow-mark';
var FlowMark = function (props) {
    var _a;
    var isSimpleCardsMode = props.isSimpleCardsMode, className = props.className, editable = props.editable, onClick = props.onClick, color = props.color, updateStyle = props.updateStyle;
    var _onClick = function () {
        editable && onClick && onClick();
    };
    var _color = color;
    var _changeColor = function (color) {
        console.log(color);
        updateStyle && updateStyle({ color: color });
    };
    return (React.createElement(MapColorPicker, { color: color, onOk: _changeColor },
        React.createElement("div", { className: classNames("".concat(className, " ").concat(prefixCls$5), (_a = {},
                _a["".concat(prefixCls$5, "-simple")] = isSimpleCardsMode,
                _a)), style: { backgroundColor: changeColorToRgba(_color || '', 0.1) }, onClick: _onClick },
            React.createElement(GeoFlow, { color: _color, size: isSimpleCardsMode ? 14 : 16 }))));
};

var ColorPanelWrapper = LazyLoad(function () {
    return import('./index-79356d28.js').then(function (n) { return n.n; }).then(function (res) { return res.ColorPanelWrapper; });
});
var PopupColorPanel = forwardRef(function (_a, ref) {
    var color = _a.color, handleColorChange = _a.handleColorChange, getPopupContainer = _a.getPopupContainer, overlayClassName = _a.overlayClassName, _b = _a.pickColorFromMap, pickColorFromMap = _b === void 0 ? false : _b, _c = _a.clickAwayToClose, clickAwayToClose = _c === void 0 ? true : _c, toMeasureCanvas = _a.toMeasureCanvas, handleCanvasColorPickerVisibleChange = _a.handleCanvasColorPickerVisibleChange;
    return (React.createElement(CreateFilter, { clickAway: clickAwayToClose, loading: false, showFooter: false, getPopupContainer: getPopupContainer, overlayClassName: overlayClassName, overlay: function () {
            return (React.createElement(ColorPanelWrapper, { color: color, onChange: handleColorChange, pickColorFromMap: pickColorFromMap, toMeasureCanvas: toMeasureCanvas, handleCanvasColorPickerVisibleChange: handleCanvasColorPickerVisibleChange }));
        } },
        React.createElement("div", { ref: ref })));
});

var prefixCls$4 = 'color-list';
var defaultStopColor = '#fff';
var colorType;
(function (colorType) {
    colorType["preset"] = "preset";
    colorType["custom"] = "custom";
})(colorType || (colorType = {}));
var useState = React.useState, useRef = React.useRef;
var generateStops = function (colors) {
    var _colors = colors.length > 7 ? chroma.scale(colors).colors(7) : colors;
    return _colors.map(function (v, i) { return ({
        offset: i / (_colors.length - 1),
        color: v,
    }); });
};
// TODO 关于段数过多情况下的颜色比较算法的性能优化问题
// 颜色存唯一 id，使用 id 比较，需修改所有渐变色数据存储结构
var ColorList = function (props) {
    var saveColor = props.saveColor, 
    // reverseColor,
    colors = props.colors, // 初始颜色
    // changeReverseColor,
    changeSaveColor = props.changeSaveColor, changeGradientStop = props.changeGradientStop, changeColors = props.changeColors, _a = props.themeColor, themeColor = _a === void 0 ? THEME_COLOR : _a, style = props.style, _b = props.canCreate, canCreate = _b === void 0 ? true : _b, _c = props.reserveColorStatus, reserveColorStatus = _c === void 0 ? false : _c, _d = props.pickColorFromMap, pickColorFromMap = _d === void 0 ? false : _d, _e = props.clickAwayToClose, clickAwayToClose = _e === void 0 ? true : _e, toMeasureCanvas = props.toMeasureCanvas;
    var _f = __read(useState(clickAwayToClose), 2), _clickAwayToClose = _f[0], setClickAwayToClose = _f[1];
    var _g = __read(useState(colors), 2), _colors = _g[0], setColors = _g[1];
    var _h = __read(useState([]), 2), customColorScheme = _h[0], setCustomColorScheme = _h[1];
    var _j = __read(useState(themeColor), 2), _themColor = _j[0], setThemeColor = _j[1];
    // 颜色下拉所有颜色 = 预定义颜色 + 自定义颜色
    var _k = __read(useState(__spreadArray(__spreadArray([], __read(_themColor), false), __read(customColorScheme), false)), 2), colorList = _k[0], setColorList = _k[1];
    // 当前行为
    var _l = __read(useState(colorType.preset), 2), action = _l[0], setAction = _l[1];
    // 选中的 stop 对应的颜色
    var _m = __read(useState(''), 2), curStopColor = _m[0], setCurStopColor = _m[1];
    // 选中的 stop index
    var _o = __read(useState(0), 2), curStopIndex = _o[0], setCurStopIndex = _o[1];
    // 颜色 stop，根据颜色数量平分
    var _p = __read(useState([]), 2), stops = _p[0], setStops = _p[1];
    // 颜色下拉可见
    var _q = __read(useState(false), 2), colorDropDownVisible = _q[0], setColorDropDownVisible = _q[1];
    var ref = useRef(null);
    // stop 颜色选择面板 ref
    var colorPanelRef = useRef(null);
    // 自然断点
    // const [naturalBreakpoint, setNaturalBreakpoint] = useState<boolean>(false);
    _default(ref, function () {
        setColorDropDownVisible(false);
        // setCurStopIndex(-1);
    });
    var handleGradientStopChange = function (newStops) {
        if (newStops.length > stops.length) {
            var index_1 = newStops.findIndex(function (v) { return !stops.includes(v); });
            handleSelectColorStop(defaultStopColor, index_1);
        }
        // stop 删除时对应的下一个颜色取值逻辑
        var index = curStopIndex;
        while (newStops[index] === undefined && index >= 0 && newStops.length > 0) {
            index = (index + 1) % newStops.length;
        }
        if (newStops[index]) {
            setCurStopColor(newStops[index].color);
        }
        else {
            setCurStopColor('');
        }
        setStops(newStops);
        changeGradientStop === null || changeGradientStop === void 0 ? void 0 : changeGradientStop(newStops);
    };
    var handleToggleSelectPopup = function () {
        setColorDropDownVisible(!colorDropDownVisible);
    };
    // const handleToggleReserveColor = (checked: boolean) => {
    //   changeReverseColor?.(checked);
    // };
    var handleToggleSaveColor = function (checked) {
        changeSaveColor === null || changeSaveColor === void 0 ? void 0 : changeSaveColor(checked);
    };
    var toReverseColor = function () {
        var color = __spreadArray([], __read(((_colors === null || _colors === void 0 ? void 0 : _colors.reverse()) || [])), false);
        setColors(color);
        changeColors === null || changeColors === void 0 ? void 0 : changeColors(color);
    };
    // 下拉颜色选择
    var handleSelectColor = function (color, index) {
        changeColors === null || changeColors === void 0 ? void 0 : changeColors(color);
        handleToggleSelectPopup();
        setAction(index <= themeColor.length ? colorType.preset : colorType.custom);
        setStops(generateStops(color));
        setColors(color);
    };
    var handleCreateNewColorScheme = function () {
        handleToggleSelectPopup();
        setAction(colorType.custom);
        if (stops.length === 0) {
            setStops(_colors ? generateStops(_colors) : []);
        }
    };
    // const handleNaturalBreakpointChange = (checked: boolean) => {
    //   setNaturalBreakpoint(checked);
    // };
    var handleSelectColorStop = function (color, index) {
        var _a;
        setCurStopColor(color);
        setCurStopIndex(index !== null && index !== void 0 ? index : 0);
        (_a = colorPanelRef.current) === null || _a === void 0 ? void 0 : _a.click();
    };
    var handleStepColorChange = function (newStepColor) {
        var newStops = stops.map(function (v, i) {
            if (i === curStopIndex) {
                return __assign(__assign({}, v), { color: newStepColor });
            }
            return v;
        });
        setStops(newStops);
        setCurStopColor(newStepColor);
        changeGradientStop === null || changeGradientStop === void 0 ? void 0 : changeGradientStop(newStops);
    };
    var handleDeleteColorScheme = function (e, index) {
        e.preventDefault();
        e.stopPropagation();
        if (index >= 0) {
            var newColorSchemes_1 = __spreadArray([], __read(customColorScheme), false);
            newColorSchemes_1.splice(index, 1);
            setCustomColorSchemePref(newColorSchemes_1).then(function () {
                setCustomColorScheme(newColorSchemes_1);
            });
        }
    };
    var handleCanvasColorPickerVisibleChange = useCallback(function (v) {
        setClickAwayToClose(!v);
    }, []);
    // 初始化偏好
    useEffect(function () {
        initCustomColorSchemePref();
    }, []);
    useEffect(function () {
        setThemeColor(themeColor);
    }, [themeColor]);
    // 获取偏好数据
    useEffect(function () {
        (function () { return __awaiter(void 0, void 0, void 0, function () {
            var _customColorScheme;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0: return [4 /*yield*/, getCustomColorSchemeRef()];
                    case 1:
                        _customColorScheme = _a.sent();
                        setCustomColorScheme(_customColorScheme || []);
                        return [2 /*return*/];
                }
            });
        }); })();
    }, []);
    useEffect(function () {
        if (!reserveColorStatus) {
            setColors(colors || []);
        }
    }, [colors, reserveColorStatus]);
    useEffect(function () {
        var colorList = __spreadArray(__spreadArray([], __read(themeColor), false), __read(customColorScheme), false);
        setColorList(colorList);
    }, [customColorScheme, themeColor]);
    useEffect(function () {
        setClickAwayToClose(clickAwayToClose);
    }, [clickAwayToClose]);
    var overlay = (React.createElement("div", { className: "".concat(prefixCls$4, "-color-pop") },
        React.createElement("div", { className: "".concat(prefixCls$4, "-color-pop-inner") }, colorList.map(function (color, index) {
            var isCustomColorScheme = index >= _themColor.length;
            return (React.createElement("div", { key: index, onClick: function () { return handleSelectColor(color, index); }, className: "".concat(prefixCls$4, "-color-pop-inner-li") },
                React.createElement("div", { className: "".concat(prefixCls$4, "-color-pop-inner-li-color"), style: {
                        background: "linear-gradient(to right,".concat(color === null || color === void 0 ? void 0 : color.join(','), ")"),
                    } }),
                React.createElement("div", { className: "".concat(prefixCls$4, "-color-pop-inner-li-check") }, isCustomColorScheme && (React.createElement(Icon, { icon: "delete-2", size: 12, className: "delete", onClick: function (e) { return handleDeleteColorScheme(e, index - _themColor.length); } })))));
        })),
        canCreate && action !== 'custom' && (React.createElement(React.Fragment, null,
            React.createElement("div", { className: "split-line" }),
            React.createElement("div", { className: "new-color-scheme", onClick: handleCreateNewColorScheme },
                React.createElement(Icon, { icon: "add", size: 16 }),
                i18n$2.common.newCustomColor)))));
    return (React.createElement("div", { className: prefixCls$4, ref: ref, style: style },
        React.createElement("div", { className: "".concat(prefixCls$4, "-line") },
            React.createElement("div", { className: "".concat(prefixCls$4, "-line-left") },
                i18n$2.common.colorTheme,
                ":"),
            React.createElement("div", { className: "".concat(prefixCls$4, "-line-center") },
                React.createElement(Dropdown, { getPopupContainer: function () { return ref.current; }, visible: colorDropDownVisible, placement: "bottomLeft", overlay: overlay },
                    React.createElement("div", { className: "".concat(prefixCls$4, "-line-center-color"), onClick: handleToggleSelectPopup },
                        action === 'preset' ? (React.createElement("div", { className: "".concat(prefixCls$4, "-line-center-color-current"), style: {
                                background: _colors
                                    ? _colors.length > 1
                                        ? "linear-gradient(to right,".concat(_colors === null || _colors === void 0 ? void 0 : _colors.join(','), ")")
                                        : _colors === null || _colors === void 0 ? void 0 : _colors[0]
                                    : '',
                            } })) : (React.createElement("span", { className: "color-300" }, i18n$2.common.newCustomColor)),
                        React.createElement(Icon, { icon: "arrow-down", size: 12 })))),
            React.createElement("div", { className: "".concat(prefixCls$4, "-line-right") }, action === 'preset' && (React.createElement(LinkButton, { className: "".concat(prefixCls$4, "-reverse-color"), onClick: toReverseColor },
                React.createElement(Icon, { icon: "swap-horiz", size: 16 }),
                i18n$2.common.reverseColor)))),
        action === 'custom' && (React.createElement("div", { className: "".concat(prefixCls$4, "-line gradient-height") },
            React.createElement("div", { className: "".concat(prefixCls$4, "-line-left") }),
            React.createElement("div", { className: "".concat(prefixCls$4, "-line-center relative-position") },
                React.createElement(React.Fragment, null,
                    React.createElement(ColorGradientMemo, { color: defaultStopColor, stops: stops, onChange: handleGradientStopChange, onSelect: handleSelectColorStop, activeIndex: curStopIndex }),
                    React.createElement("span", { className: "gradient-hint" }, i18n$2.common.colorSchemeHint))),
            React.createElement("div", { className: "".concat(prefixCls$4, "-line-right") },
                React.createElement(Checkbox, { checked: saveColor, title: i18n$2.common.saveColorScheme, onChange: handleToggleSaveColor })))),
        React.createElement(PopupColorPanel, { ref: colorPanelRef, color: curStopColor, handleColorChange: handleStepColorChange, overlayClassName: "".concat(prefixCls$4, "-color-picker"), getPopupContainer: function () { return ref.current || document.body; }, pickColorFromMap: pickColorFromMap, clickAwayToClose: _clickAwayToClose, toMeasureCanvas: toMeasureCanvas, handleCanvasColorPickerVisibleChange: handleCanvasColorPickerVisibleChange })));
};

var defOkProps = {
    doSaveColor: true,
    restoreReserveColorStatus: true,
};
var prefixCls$3 = 'dm-map-heat-color-setting';
var getColorSet = function (colors) {
    return map(colors === null || colors === void 0 ? void 0 : colors.value, function (color) {
        return color.v;
    });
};
var MapHeatSetting = observer(function (props) {
    var _a = React.useContext(appContext.getContext()).routeStore, mapInstanceCanvas = _a.mapInstanceCanvas, getPopupContainer = _a.getPopupContainer;
    var children = props.children, className = props.className, onOk = props.onOk, visual = props.visual;
    var store = useLocalStore(function () {
        return {
            saveColor: false,
            reserveColorStatus: false,
            sourceStops: [],
            colors: getColorSet(visual === null || visual === void 0 ? void 0 : visual.colors) || [],
            tempColors: undefined,
            sourceColors: getColorSet(visual === null || visual === void 0 ? void 0 : visual.colors) || [], // colorList 返回的原始颜色
        };
    });
    var colors = store.colors, tempColors = store.tempColors, sourceColors = store.sourceColors, saveColor = store.saveColor, reserveColorStatus = store.reserveColorStatus, sourceStops = store.sourceStops;
    var _onOk = function (_a) {
        var _b = _a === void 0 ? defOkProps : _a, doSaveColor = _b.doSaveColor, restoreReserveColorStatus = _b.restoreReserveColorStatus, highPriorityColors = _b.highPriorityColors;
        if (restoreReserveColorStatus && reserveColorStatus) {
            store.reserveColorStatus = false;
        }
        // 当前渐变色
        var curColors = highPriorityColors
            ? highPriorityColors
            : sourceStops.length
                ? __spreadArray([], __read(sourceStops), false).sort(function (a, b) { return a.offset - b.offset; }).map(function (i) { return i.color; })
                : sourceColors;
        var newColors = _changeColors(curColors);
        var v = __assign(__assign({}, visual), { colors: newColors });
        onOk && onOk(v);
        if (doSaveColor && saveColor) {
            (function () { return __awaiter(void 0, void 0, void 0, function () {
                var _customColorScheme;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0: return [4 /*yield*/, getCustomColorSchemeRef()];
                        case 1:
                            _customColorScheme = _a.sent();
                            if (curColors === null || curColors === void 0 ? void 0 : curColors.length) {
                                setCustomColorSchemePref(__spreadArray(__spreadArray([], __read(_customColorScheme), false), [curColors], false));
                            }
                            return [2 /*return*/];
                    }
                });
            }); })();
        }
    };
    // 预览样式
    var handlePreviewStyle = function () {
        // 存储当前颜色，以备恢复
        if (!tempColors) {
            store['tempColors'] = colors;
        }
        if (!reserveColorStatus) {
            store.reserveColorStatus = true;
        }
        _onOk({
            doSaveColor: false,
            restoreReserveColorStatus: false,
        });
    };
    // 恢复样式
    var handleRestoreColor = function () {
        if (tempColors) {
            store.colors = tempColors || [];
            _onOk({
                doSaveColor: true,
                restoreReserveColorStatus: true,
                highPriorityColors: tempColors,
            });
            store['tempColors'] = undefined;
        }
    };
    var _changeColors = function (colors) {
        var tmpColors = {
            value: [],
        };
        if (colors.length) {
            var currentColors_1 = splitColors(colors, 7);
            var newV_1 = [];
            forEach(currentColors_1, function (t, index) {
                var len = currentColors_1.length;
                var k = (index + 1) / len;
                var v = { k: k, v: t };
                newV_1.push(v);
            });
            tmpColors.value = newV_1;
            store.colors = getColorSet(tmpColors);
            return tmpColors;
        }
        else {
            store.colors = getColorSet({ value: [] });
            return tmpColors;
        }
    };
    var _changeGradientStop = function (newStop) {
        var _sourceColors = newStop.map(function (i) { return i.color; });
        store.sourceStops = newStop;
        store['sourceColors'] = _sourceColors;
    };
    var _changeSaveColor = function (checked) {
        store['saveColor'] = checked;
    };
    var handleResetState = useCallback(function () {
        store['saveColor'] = false;
        store['colors'] = getColorSet(visual === null || visual === void 0 ? void 0 : visual.colors);
        store['sourceStops'] = [];
    }, [store, visual]);
    useEffect(function () {
        if (visual) {
            handleResetState();
        }
    }, [handleResetState, visual]);
    useEffect(function () {
        store['sourceColors'] = colors;
    }, [colors, store]);
    var changeColors = useCallback(function (colors) {
        store['sourceColors'] = colors;
    }, [store]);
    var overlay = (React.createElement("div", { className: "".concat(prefixCls$3, "-content") },
        React.createElement(ColorList, { saveColor: saveColor, themeColor: THEME_COLOR$1, colors: colors, changeColors: changeColors, changeSaveColor: _changeSaveColor, reserveColorStatus: reserveColorStatus, changeGradientStop: _changeGradientStop, pickColorFromMap: true, toMeasureCanvas: mapInstanceCanvas })));
    return (React.createElement(CreateFilter, { onOk: _onOk, onClose: handleRestoreColor, loading: false, overlay: overlay, footerClassName: "".concat(prefixCls$3, "-footer"), className: classNames(prefixCls$3, className), getPopupContainer: getPopupContainer, footerPrefixEl: function () { return (React.createElement(LinkButton, { onClick: handlePreviewStyle }, i18n$1.mapEdit.previewStyle)); } }, children));
});

var prefixCls$2 = 'dm-map-visual-card-heat-mark';
var HeatMark = React.memo(function (props) {
    var _a;
    var _b, _c, _d;
    var _e = props || {}, isSimpleCardsMode = _e.isSimpleCardsMode, color = _e.color, _f = _e.className, className = _f === void 0 ? '' : _f, style = _e.style, changeHeatVisual = _e.changeHeatVisual;
    var _backgroundImage = (_d = (_c = (_b = style === null || style === void 0 ? void 0 : style.colors) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.slice().reverse()) === null || _d === void 0 ? void 0 : _d.map(function (it) { return "".concat(it.v, " ").concat(100 - it.k * 100, "%"); });
    return (React.createElement(MapHeatSetting, { visual: style, onOk: changeHeatVisual },
        React.createElement("div", { className: classNames("".concat(className, " ").concat(prefixCls$2), (_a = {},
                _a["".concat(prefixCls$2, "-simple")] = isSimpleCardsMode,
                _a)), style: {
                backgroundColor: changeColorToRgba(color || '#939FBD', 0.1),
            } },
            React.createElement("div", { style: {
                    width: 10,
                    height: 10,
                    borderRadius: '50%',
                    backgroundImage: "radial-gradient(".concat(_backgroundImage, ")"),
                } }))));
});

var prefixCls$1 = 'dm-map-visual-card-point-to-point-mark';
var PointToPointMark = function (props) {
    var _a;
    var isSimpleCardsMode = props.isSimpleCardsMode, className = props.className, color = props.color;
    return (React.createElement("div", { className: classNames("".concat(className, " ").concat(prefixCls$1), (_a = {},
            _a["".concat(prefixCls$1, "-simple")] = isSimpleCardsMode,
            _a)), style: { backgroundColor: changeColorToRgba(color || '', 0.1) } },
        React.createElement(LocationToLocationIcon, { color: color, size: isSimpleCardsMode ? 14 : 16 })));
};

var prefixCls = 'dm-map-visual-card-point-to-polygon-mark';
var PointToPolygonMark = function (props) {
    var _a;
    var editable = props.editable, onClick = props.onClick, style = props.style, updateStyle = props.updateStyle, isSimpleCardsMode = props.isSimpleCardsMode, className = props.className, color = props.color;
    var _onClick = function () {
        editable && onClick && onClick();
    };
    var ele = (React.createElement("div", { className: classNames("".concat(className, " ").concat(prefixCls), (_a = {},
            _a["".concat(prefixCls, "-simple")] = isSimpleCardsMode,
            _a)), style: { backgroundColor: changeColorToRgba(color || '', 0.1) } },
        React.createElement(LocationToPolygonIcon, { color: color, size: isSimpleCardsMode ? 14 : 16 })));
    return (React.createElement(MapPointSetting, { onCancel: _onClick, style: style, onOk: updateStyle }, ele));
};

var MapVisualGeoIcon = React.memo(function (props) {
    var _a = props || {}, className = _a.className, type = _a.type, onClick = _a.onClick, style = _a.style, updateStyle = _a.updateStyle, isHeat = _a.isHeat, currentVisual = _a.currentVisual, isFlow = _a.isFlow, changeHeatVisual = _a.changeHeatVisual;
    var _b = style || {}, color = _b.color, icon = _b.icon;
    if (isHeat && type !== GEO_TYPES[GeometryType.pointToPoint]) {
        return React.createElement(HeatMark, { className: className, style: style, changeHeatVisual: changeHeatVisual });
    }
    if (type === GEO_TYPES[GeometryType.point]) {
        return (React.createElement(PointMark, { color: color, className: className, onClick: onClick, icon: (icon === null || icon === void 0 ? void 0 : icon.icon) || 'marker-15.svg', style: style, updateStyle: updateStyle, currentVisual: currentVisual }));
    }
    else if (type === GEO_TYPES[GeometryType.line]) {
        return (React.createElement(LineMark, { color: color, className: className, onClick: onClick, style: style, updateStyle: updateStyle, currentVisual: currentVisual }));
    }
    else if (type === GEO_TYPES[GeometryType.polygon]) {
        return (React.createElement(PolygonMark, { color: color, className: className, onClick: onClick, style: style, updateStyle: updateStyle, currentVisual: currentVisual }));
    }
    else if (type === GEO_TYPES[GeometryType.pointToPoint]) {
        if (isFlow) {
            return React.createElement(FlowMark, { className: className, color: color, updateStyle: updateStyle });
        }
        else {
            return React.createElement(PointToPointMark, { className: className, color: '#BAC1D7' });
        }
    }
    else if (type === GEO_TYPES[GeometryType.pointToPolygon]) {
        return (React.createElement(PointToPolygonMark, { className: className, color: color, onClick: onClick, style: style, updateStyle: updateStyle }));
    }
    return React.createElement(PolygonMark, { className: className });
});

export { ColorList as C, MapVisualGeoIcon as M, MapHeatSetting as a };
