import * as React from 'react';
import { forwardRef, useCallback, useEffect } from 'react';
import classNames from 'classnames';
import { ah as LazyLoad, p as i18n$1, b1 as InputNumber, b4 as RadioGroup, a1 as Input, aw as Select, be as Slider, bv as CreateFilter, t as toastApi, q as appContext, bH as changeColorToRgba, K as LineIcon, l as iconsUtil, cz as GeoFlow, cA as _default, cB as initCustomColorSchemePref, a as __awaiter, b5 as getCustomColorSchemeRef, I as Icon, a2 as i18n$2, aG as Dropdown, ak as LinkButton, cC as ColorGradientMemo, ap as Checkbox, cD as THEME_COLOR, b6 as setCustomColorSchemePref, T as THEME_COLOR$1, b3 as splitColors, G as GEO_TYPES, w as GeometryType } from './MapEditView-f6381866.js';
import { map, set, isNumber, forEach } from 'lodash';
import { observer, useLocalStore } from 'mobx-react';
import Polygon from './index-2d7fc1f3.js';
import { a as MapPointSetting, M as MapColorPicker } from './MapColorPicker-dcab48f0.js';
import chroma from 'chroma-js';
import LocationToLocationIcon from './index-23029f1e.js';
import LocationToPolygonIcon from './index-f7347652.js';

const ColorPanelWrapper$2 = LazyLoad(() => import('./index-c49cc953.js').then((res) => res.ColorPanelWrapper));
const i18n = i18n$1.mapEdit.settingsPanel;
const { useRef: useRef$2, useState: useState$2 } = React;
const 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);
// }
const prefixCls$a = 'dm-map-polygon-setting';
const array$1 = new Array(4);
const InputWrapper = React.memo((props) => {
    const { value, onChange } = props;
    const _changeValue = (value) => {
        let _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');
        }
    };
    const _onPressEnter = (e) => {
        const target = e.target;
        _changeValue(target.value);
    };
    const _onBlur = (e) => {
        const target = e.target;
        _changeValue(target.value);
    };
    return (React.createElement(InputNumber, { className: `${prefixCls$a}-opacity-input`, size: "compact", type: "menu-bg", value: value, visibilityHandler: true, onPressEnter: _onPressEnter, onBlur: _onBlur }));
});
const MapPolygonSetting$1 = observer((props) => {
    var _a;
    const { style, onOk, onCancel, loading, children, className } = props;
    const [_style, setStyle] = useState$2(Object.assign({}, style));
    const { color, strokeDasharray, strokeStyle, fillOpacity, strokeOpacity, strokeWeight } = _style || {};
    const refPopup = useRef$2(null);
    const changeStrokeStyle = (value) => {
        const strokeStyle = value === i18n.lineStyleSolid ? 'solid' : 'dashed';
        const data = Object.assign(Object.assign({}, _style), { strokeStyle });
        setStyle(data);
    };
    const _changeStrokeDasharray = ({ index, value }) => {
        set(strokeDasharray || [0, 0, 0, 0], index, value);
        const data = Object.assign(Object.assign({}, _style), { strokeDasharray });
        setStyle(data);
    };
    const _changeStrokeWeight = (value) => {
        const strokeWeight = (value + '').replace(/px/g, ''); //option[0].key;
        const data = Object.assign(Object.assign({}, _style), { strokeWeight: Number(strokeWeight) });
        setStyle(data);
    };
    const _onChange = (color) => {
        const data = Object.assign(Object.assign({}, _style), { color });
        setStyle(data);
    };
    const _changeStrokeOpacity = (value) => {
        const data = Object.assign(Object.assign({}, _style), { strokeOpacity: Number(value) });
        setStyle(data);
    };
    const _changeFillOpacity = (value) => {
        const data = Object.assign(Object.assign({}, _style), { fillOpacity: Number(value) });
        setStyle(data);
    };
    const _onOk = () => {
        onOk && onOk(_style);
        onCancel && onCancel();
    };
    const _onCancel = () => {
        onCancel && onCancel();
    };
    const isSolid = strokeStyle === 'solid';
    const overlay = (React.createElement("div", { className: prefixCls$a },
        React.createElement("div", { className: `${prefixCls$a}-drag-wrap`, ref: refPopup },
            React.createElement("div", { className: `${prefixCls$a}-content` },
                React.createElement("div", { className: `${prefixCls$a}-left` },
                    React.createElement("div", { className: `${prefixCls$a}-title mb12` }, i18n.strokeStyle),
                    React.createElement("div", { style: { display: 'flex' }, className: `${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({
                            [`${prefixCls$a}-solid`]: isSolid,
                        }) }, map(array$1, (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: (e) => {
                                const { target } = e;
                                const value = target.value;
                                _changeStrokeDasharray({ index, value });
                            }, centered: true, allowClear: false }));
                    })),
                    React.createElement("div", { className: `${prefixCls$a}-title ${prefixCls$a}-mt19 mb10` }, i18n.strokeWidth),
                    React.createElement(Select, { className: `${prefixCls$a}-select ${prefixCls$a}-mb40`, getPopupContainer: () => refPopup.current, size: "compact", showSearch: true, options: childrens$1, createAble: true, type: "menu-bg", value: strokeWeight, onChange: _changeStrokeWeight }),
                    React.createElement("div", { className: `${prefixCls$a}-title` }, i18n.strokeOpacity),
                    React.createElement("div", { className: `${prefixCls$a}-opacity-item ${prefixCls$a}-mb50` },
                        React.createElement(Slider, { className: `${prefixCls$a}-opacity-slider`, size: "small", min: 0, max: 1, step: 0.01, value: Number(strokeOpacity), onChange: _changeStrokeOpacity, getTooltipPopupContainer: (node) => node === null || node === void 0 ? void 0 : node.closest('.dm-page-framewrap') }),
                        React.createElement(InputWrapper, { value: strokeOpacity, onChange: _changeStrokeOpacity })),
                    React.createElement("div", { className: `${prefixCls$a}-title` }, i18n.fillOpacity),
                    React.createElement("div", { className: `${prefixCls$a}-opacity-item` },
                        React.createElement(Slider, { className: `${prefixCls$a}-opacity-slider`, size: "small", min: 0, max: 1, step: 0.01, value: Number(fillOpacity), onChange: _changeFillOpacity, getTooltipPopupContainer: (node) => node === null || node === void 0 ? void 0 : node.closest('.dm-page-framewrap') }),
                        React.createElement(InputWrapper, { value: fillOpacity, onChange: _changeFillOpacity }))),
                React.createElement("div", { className: `${prefixCls$a}-right` },
                    React.createElement(ColorPanelWrapper$2, Object.assign({}, props, { color: color || '', onChange: _onChange, pickColorFromMap: true, toMeasureCanvas: (_a = props.mapInstanceCanvas) !== null && _a !== void 0 ? _a : null })))))));
    return (React.createElement(CreateFilter, { okButtonProps: { style: { marginRight: 12 } }, onClose: _onCancel, onOk: _onOk, loading: loading, overlay: overlay, footerClassName: `${prefixCls$a}-footer`, 
        // placement="bottomRight"
        className: classNames(`${prefixCls$a}-padding`, className), getPopupContainer: props.getPopupContainer }, children));
});

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

const prefixCls$9 = 'dm-map-visual-card-polygon-mark';
const PolygonMark = React.memo((props) => {
    const { isSimpleCardsMode, color, onClick, editable, className = '', style, updateStyle, currentVisual, } = props || {};
    const _onClick = () => {
        editable && onClick && onClick();
    };
    const { routeStore: { mapInstanceCanvas, getPopupContainer }, } = React.useContext(appContext.getContext());
    const _color = currentVisual ? '#bac1d7' : color;
    const ele = (React.createElement("div", { className: classNames(`${className} ${prefixCls$9}`, {
            [`${prefixCls$9}-simple`]: isSimpleCardsMode,
            [`${prefixCls$9}-normal`]: !updateStyle,
        }), 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, { getPopupContainer: getPopupContainer, mapInstanceCanvas: mapInstanceCanvas, onCancel: _onClick, style: style, onOk: updateStyle }, ele));
});
PolygonMark.whyDidYouRender = true;
PolygonMark.displayName = 'PolygonMark';

const ColorPanelWrapper$1 = LazyLoad(() => import('./index-c49cc953.js').then((res) => res.ColorPanelWrapper));
const { useRef: useRef$1, useState: useState$1 } = React;
const 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);
// }
const prefixCls$8 = 'dm-map-line-setting';
const array = new Array(4);
const MapLineSetting$1 = observer((props) => {
    var _a;
    const { style, onOk, onCancel, children, className, loading } = props;
    const [_style, setStyle] = useState$1(Object.assign({}, style));
    const { color, strokeDasharray, strokeStyle, strokeWeight } = _style || {};
    const refPopup = useRef$1(null);
    const changeStrokeStyle = (value) => {
        const strokeStyle = value === i18n.lineStyleSolid ? 'solid' : 'dashed';
        const data = Object.assign(Object.assign({}, _style), { strokeStyle });
        setStyle(data);
    };
    const _changeStrokeDasharray = ({ index, value }) => {
        set(strokeDasharray || [0, 0, 0, 0], index, value);
        const data = Object.assign(Object.assign({}, _style), { strokeDasharray });
        setStyle(data);
    };
    const _changeStrokeWeight = (value) => {
        const strokeWeight = (value + '').replace(/px/g, ''); //option[0].key;
        const data = Object.assign(Object.assign({}, _style), { strokeWeight: Number(strokeWeight) });
        setStyle(data);
    };
    const _onChange = (color) => {
        const data = Object.assign(Object.assign({}, _style), { color });
        setStyle(data);
    };
    const _onOk = () => {
        onOk && onOk(_style);
        onCancel && onCancel();
    };
    const _onCancel = () => {
        onCancel && onCancel();
    };
    const i18n = i18n$1.mapEdit.settingsPanel;
    const isSolid = strokeStyle === 'solid';
    const overlay = (React.createElement("div", { className: prefixCls$8 },
        React.createElement("div", { className: `${prefixCls$8}-drag-wrap`, ref: refPopup },
            React.createElement("div", { className: `${prefixCls$8}-content` },
                React.createElement("div", { className: `${prefixCls$8}-left` },
                    React.createElement("div", { className: `${prefixCls$8}-title mb12` }, i18n.strokeStyle),
                    React.createElement("div", { style: { display: 'flex' }, className: `${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({
                            [`${prefixCls$8}-solid`]: isSolid,
                        }) }, map(array, (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: (e) => {
                                const { target } = e;
                                const value = target.value;
                                _changeStrokeDasharray({ index, value });
                            }, centered: true, allowClear: false }));
                    })),
                    React.createElement("div", { className: `${prefixCls$8}-title ${prefixCls$8}-mt19 mb10` }, i18n.strokeWidth),
                    React.createElement(Select, { className: `${prefixCls$8}-select`, getPopupContainer: () => refPopup.current, size: "compact", showSearch: true, options: childrens, createAble: true, type: "menu-bg", value: strokeWeight, onChange: _changeStrokeWeight, getNewOptionTemp: (value) => `“${value}”` })),
                React.createElement("div", { className: `${prefixCls$8}-right` },
                    React.createElement(ColorPanelWrapper$1, Object.assign({}, props, { color: color || '', onChange: _onChange, pickColorFromMap: true, toMeasureCanvas: (_a = props.mapInstanceCanvas) !== null && _a !== void 0 ? _a : null })))))));
    return (React.createElement(CreateFilter, { okButtonProps: { style: { marginRight: 12 } }, onClose: _onCancel, onOk: _onOk, loading: loading, overlay: overlay, footerClassName: `${prefixCls$8}-footer`, className: classNames(`${prefixCls$8}-padding`, className), clickAway: true, getPopupContainer: props.getPopupContainer }, children));
});

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

const prefixCls$7 = 'dm-map-visual-card-line-mark';
const LineMark = React.memo((props) => {
    const { isSimpleCardsMode, color, editable, onClick, className = '', style, updateStyle, currentVisual, } = props || {};
    const { routeStore: { getPopupContainer, mapInstanceCanvas }, } = React.useContext(appContext.getContext());
    const _onClick = () => {
        editable && onClick && onClick();
    };
    const _color = currentVisual ? '#bac1d7' : color;
    const ele = (React.createElement("div", { className: classNames(`${className} ${prefixCls$7}`, {
            [`${prefixCls$7}-simple`]: isSimpleCardsMode,
            [`${prefixCls$7}-normal`]: !updateStyle,
        }), 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, { mapInstanceCanvas: mapInstanceCanvas, getPopupContainer: getPopupContainer, onCancel: _onClick, style: style, onOk: updateStyle }, ele));
});

const prefixCls$6 = 'dm-map-visual-card-point-mark';
const PointMark = observer((props) => {
    const { getIconUrl } = iconsUtil;
    const { isSimpleCardsMode, color, icon, editable, onClick, className = '', style, updateStyle, currentVisual, } = props || {};
    const _onClick = () => {
        editable && onClick && onClick();
    };
    const { routeStore: { defaultIcon, customIconPrefInfo, getPopupContainer, mapInstanceCanvas }, } = React.useContext(appContext.getContext());
    const iconUrl = (icon && getIconUrl(icon)) || '';
    const _icon = iconUrl || defaultIcon;
    const _color = currentVisual ? '#bac1d7' : color;
    const ele = (React.createElement("div", { className: classNames(`${className} ${prefixCls$6}`, {
            [`${prefixCls$6}-simple`]: isSimpleCardsMode,
            [`${prefixCls$6}-normal`]: !updateStyle,
        }), 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(${_icon})`,
            maskImage: `url(${_icon})`,
            maskSize: 'contain',
            WebkitMaskSize: 'contain',
            WebkitMaskRepeat: 'no-repeat',
            maskRepeat: 'no-repeat',
            WebkitMaskPosition: 'center',
            maskPosition: 'center',
        } }))));
    if (!updateStyle) {
        return ele;
    }
    return (React.createElement(MapPointSetting, { mapInstanceCanvas: mapInstanceCanvas, getPopupContainer: getPopupContainer, onCancel: _onClick, style: style, onOk: updateStyle }, ele));
});

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

const ColorPanelWrapper = LazyLoad(() => import('./index-c49cc953.js').then((res) => res.ColorPanelWrapper));
const PopupColorPanel = forwardRef(({ color, handleColorChange, getPopupContainer, overlayClassName, pickColorFromMap = false, clickAwayToClose = true, toMeasureCanvas, handleCanvasColorPickerVisibleChange, }, ref) => {
    return (React.createElement(CreateFilter, { clickAway: clickAwayToClose, loading: false, showFooter: false, getPopupContainer: getPopupContainer, overlayClassName: overlayClassName, overlay: () => {
            return (React.createElement(ColorPanelWrapper, { color: color, onChange: handleColorChange, pickColorFromMap: pickColorFromMap, toMeasureCanvas: toMeasureCanvas, handleCanvasColorPickerVisibleChange: handleCanvasColorPickerVisibleChange }));
        } },
        React.createElement("div", { ref: ref })));
});

const prefixCls$4 = 'color-list';
const defaultStopColor = '#fff';
var colorType;
(function (colorType) {
    colorType["preset"] = "preset";
    colorType["custom"] = "custom";
})(colorType || (colorType = {}));
const { useState, useRef } = React;
const generateStops = (colors) => {
    const _colors = colors.length > 7 ? chroma.scale(colors).colors(7) : colors;
    return _colors.map((v, i) => ({
        offset: i / (_colors.length - 1),
        color: v,
    }));
};
// TODO 关于段数过多情况下的颜色比较算法的性能优化问题
// 颜色存唯一 id，使用 id 比较，需修改所有渐变色数据存储结构
const ColorList = (props) => {
    const { saveColor, 
    // reverseColor,
    colors, // 初始颜色
    // changeReverseColor,
    changeSaveColor, changeGradientStop, changeColors, themeColor = THEME_COLOR, style, canCreate = true, reserveColorStatus = false, pickColorFromMap = false, clickAwayToClose = true, toMeasureCanvas, } = props;
    const [_clickAwayToClose, setClickAwayToClose] = useState(clickAwayToClose);
    const [_colors, setColors] = useState(colors);
    const [customColorScheme, setCustomColorScheme] = useState([]);
    const [_themColor, setThemeColor] = useState(themeColor);
    // 颜色下拉所有颜色 = 预定义颜色 + 自定义颜色
    const [colorList, setColorList] = useState([..._themColor, ...customColorScheme]);
    // 当前行为
    const [action, setAction] = useState(colorType.preset);
    // 选中的 stop 对应的颜色
    const [curStopColor, setCurStopColor] = useState('');
    // 选中的 stop index
    const [curStopIndex, setCurStopIndex] = useState(0);
    // 颜色 stop，根据颜色数量平分
    const [stops, setStops] = useState([]);
    // 颜色下拉可见
    const [colorDropDownVisible, setColorDropDownVisible] = useState(false);
    const ref = useRef(null);
    // stop 颜色选择面板 ref
    const colorPanelRef = useRef(null);
    // 自然断点
    // const [naturalBreakpoint, setNaturalBreakpoint] = useState<boolean>(false);
    _default(ref, () => {
        setColorDropDownVisible(false);
        // setCurStopIndex(-1);
    });
    const handleGradientStopChange = (newStops) => {
        if (newStops.length > stops.length) {
            const index = newStops.findIndex((v) => !stops.includes(v));
            handleSelectColorStop(defaultStopColor, index);
        }
        // stop 删除时对应的下一个颜色取值逻辑
        let 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);
    };
    const handleToggleSelectPopup = () => {
        setColorDropDownVisible(!colorDropDownVisible);
    };
    // const handleToggleReserveColor = (checked: boolean) => {
    //   changeReverseColor?.(checked);
    // };
    const handleToggleSaveColor = (checked) => {
        changeSaveColor === null || changeSaveColor === void 0 ? void 0 : changeSaveColor(checked);
    };
    const toReverseColor = () => {
        const color = [...((_colors === null || _colors === void 0 ? void 0 : _colors.reverse()) || [])];
        setColors(color);
        changeColors === null || changeColors === void 0 ? void 0 : changeColors(color);
    };
    // 下拉颜色选择
    const handleSelectColor = (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);
    };
    const handleCreateNewColorScheme = () => {
        handleToggleSelectPopup();
        setAction(colorType.custom);
        if (stops.length === 0) {
            setStops(_colors ? generateStops(_colors) : []);
        }
    };
    // const handleNaturalBreakpointChange = (checked: boolean) => {
    //   setNaturalBreakpoint(checked);
    // };
    const handleSelectColorStop = (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();
    };
    const handleStepColorChange = (newStepColor) => {
        const newStops = stops.map((v, i) => {
            if (i === curStopIndex) {
                return Object.assign(Object.assign({}, v), { color: newStepColor });
            }
            return v;
        });
        setStops(newStops);
        setCurStopColor(newStepColor);
        changeGradientStop === null || changeGradientStop === void 0 ? void 0 : changeGradientStop(newStops);
    };
    const handleDeleteColorScheme = (e, index) => {
        e.preventDefault();
        e.stopPropagation();
        if (index >= 0) {
            const newColorSchemes = [...customColorScheme];
            newColorSchemes.splice(index, 1);
            setCustomColorSchemePref(newColorSchemes).then(() => {
                setCustomColorScheme(newColorSchemes);
            });
        }
    };
    const handleCanvasColorPickerVisibleChange = useCallback((v) => {
        setClickAwayToClose(!v);
    }, []);
    // 初始化偏好
    useEffect(() => {
        initCustomColorSchemePref();
    }, []);
    useEffect(() => {
        setThemeColor(themeColor);
    }, [themeColor]);
    // 获取偏好数据
    useEffect(() => {
        (() => __awaiter(void 0, void 0, void 0, function* () {
            const _customColorScheme = yield getCustomColorSchemeRef();
            setCustomColorScheme(_customColorScheme || []);
        }))();
    }, []);
    useEffect(() => {
        if (!reserveColorStatus) {
            setColors(colors || []);
        }
    }, [colors, reserveColorStatus]);
    useEffect(() => {
        const colorList = [...themeColor, ...customColorScheme];
        setColorList(colorList);
    }, [customColorScheme, themeColor]);
    useEffect(() => {
        setClickAwayToClose(clickAwayToClose);
    }, [clickAwayToClose]);
    const overlay = (React.createElement("div", { className: `${prefixCls$4}-color-pop` },
        React.createElement("div", { className: `${prefixCls$4}-color-pop-inner` }, colorList.map((color, index) => {
            const isCustomColorScheme = index >= _themColor.length;
            return (React.createElement("div", { key: index, onClick: () => handleSelectColor(color, index), className: `${prefixCls$4}-color-pop-inner-li` },
                React.createElement("div", { className: `${prefixCls$4}-color-pop-inner-li-color`, style: {
                        background: `linear-gradient(to right,${color === null || color === void 0 ? void 0 : color.join(',')})`,
                    } }),
                React.createElement("div", { className: `${prefixCls$4}-color-pop-inner-li-check` }, isCustomColorScheme && (React.createElement(Icon, { icon: "delete-2", size: 12, className: "delete", onClick: (e) => 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: `${prefixCls$4}-line` },
            React.createElement("div", { className: `${prefixCls$4}-line-left` },
                i18n$2.common.colorTheme,
                ":"),
            React.createElement("div", { className: `${prefixCls$4}-line-center` },
                React.createElement(Dropdown, { getPopupContainer: () => ref.current, visible: colorDropDownVisible, placement: "bottomLeft", overlay: overlay },
                    React.createElement("div", { className: `${prefixCls$4}-line-center-color`, onClick: handleToggleSelectPopup },
                        action === 'preset' ? (React.createElement("div", { className: `${prefixCls$4}-line-center-color-current`, style: {
                                background: _colors
                                    ? _colors.length > 1
                                        ? `linear-gradient(to right,${_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: `${prefixCls$4}-line-right` }, action === 'preset' && (React.createElement(LinkButton, { className: `${prefixCls$4}-reverse-color`, onClick: toReverseColor },
                React.createElement(Icon, { icon: "swap-horiz", size: 16 }),
                i18n$2.common.reverseColor)))),
        action === 'custom' && (React.createElement("div", { className: `${prefixCls$4}-line gradient-height` },
            React.createElement("div", { className: `${prefixCls$4}-line-left` }),
            React.createElement("div", { className: `${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: `${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: `${prefixCls$4}-color-picker`, getPopupContainer: () => ref.current || document.body, pickColorFromMap: pickColorFromMap, clickAwayToClose: _clickAwayToClose, toMeasureCanvas: toMeasureCanvas, handleCanvasColorPickerVisibleChange: handleCanvasColorPickerVisibleChange })));
};
var ColorList$1 = observer(ColorList);

const defOkProps = {
    doSaveColor: true,
    restoreReserveColorStatus: true,
};
const prefixCls$3 = 'dm-map-heat-color-setting';
const getColorSet = (colors) => map(colors === null || colors === void 0 ? void 0 : colors.value, (color) => {
    return color.v;
});
const MapHeatSetting = observer((props) => {
    const { routeStore: { mapInstanceCanvas, getPopupContainer }, } = React.useContext(appContext.getContext());
    const { children, className, onOk, visual } = props;
    const store = useLocalStore(() => {
        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 返回的原始颜色
        };
    });
    const { colors, tempColors, sourceColors, saveColor, reserveColorStatus, sourceStops } = store;
    const _onOk = ({ doSaveColor, restoreReserveColorStatus, highPriorityColors, } = defOkProps) => {
        if (restoreReserveColorStatus && reserveColorStatus) {
            store.reserveColorStatus = false;
        }
        // 当前渐变色
        const curColors = highPriorityColors
            ? highPriorityColors
            : sourceStops.length
                ? [...sourceStops].sort((a, b) => a.offset - b.offset).map((i) => i.color)
                : sourceColors;
        const newColors = _changeColors(curColors);
        const v = Object.assign(Object.assign({}, visual), { colors: newColors });
        onOk && onOk(v);
        if (doSaveColor && saveColor) {
            (() => __awaiter(void 0, void 0, void 0, function* () {
                const _customColorScheme = yield getCustomColorSchemeRef();
                if (curColors === null || curColors === void 0 ? void 0 : curColors.length) {
                    setCustomColorSchemePref([..._customColorScheme, curColors]);
                }
            }))();
        }
    };
    // 预览样式
    const handlePreviewStyle = () => {
        // 存储当前颜色，以备恢复
        if (!tempColors) {
            store['tempColors'] = colors;
        }
        if (!reserveColorStatus) {
            store.reserveColorStatus = true;
        }
        _onOk({
            doSaveColor: false,
            restoreReserveColorStatus: false,
        });
    };
    // 恢复样式
    const handleRestoreColor = () => {
        if (tempColors) {
            store.colors = tempColors || [];
            _onOk({
                doSaveColor: true,
                restoreReserveColorStatus: true,
                highPriorityColors: tempColors,
            });
            store['tempColors'] = undefined;
        }
    };
    const _changeColors = (colors) => {
        const tmpColors = {
            value: [],
        };
        if (colors.length) {
            const currentColors = splitColors(colors, 7);
            const newV = [];
            forEach(currentColors, (t, index) => {
                const len = currentColors.length;
                const k = (index + 1) / len;
                const v = { k: k, v: t };
                newV.push(v);
            });
            tmpColors.value = newV;
            store.colors = getColorSet(tmpColors);
            return tmpColors;
        }
        else {
            store.colors = getColorSet({ value: [] });
            return tmpColors;
        }
    };
    const _changeGradientStop = (newStop) => {
        const _sourceColors = newStop.map((i) => i.color);
        store.sourceStops = newStop;
        store['sourceColors'] = _sourceColors;
    };
    const _changeSaveColor = (checked) => {
        store['saveColor'] = checked;
    };
    const handleResetState = useCallback(() => {
        store['saveColor'] = false;
        store['colors'] = getColorSet(visual === null || visual === void 0 ? void 0 : visual.colors);
        store['sourceStops'] = [];
    }, [store, visual]);
    useEffect(() => {
        if (visual) {
            handleResetState();
        }
    }, [handleResetState, visual]);
    useEffect(() => {
        store['sourceColors'] = colors;
    }, [colors, store]);
    const changeColors = useCallback((colors) => {
        store['sourceColors'] = colors;
    }, [store]);
    const overlay = (React.createElement("div", { className: `${prefixCls$3}-content` },
        React.createElement(ColorList$1, { 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: `${prefixCls$3}-footer`, className: classNames(prefixCls$3, className), getPopupContainer: getPopupContainer, footerPrefixEl: () => (React.createElement(LinkButton, { onClick: handlePreviewStyle }, i18n$1.mapEdit.previewStyle)) }, children));
});

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

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

const prefixCls = 'dm-map-visual-card-point-to-polygon-mark';
const PointToPolygonMark = (props) => {
    const { editable, onClick, style, updateStyle, isSimpleCardsMode, className, color } = props;
    const _onClick = () => {
        editable && onClick && onClick();
    };
    const ele = (React.createElement("div", { className: classNames(`${className} ${prefixCls}`, {
            [`${prefixCls}-simple`]: isSimpleCardsMode,
        }), style: { backgroundColor: changeColorToRgba(color || '', 0.1) } },
        React.createElement(LocationToPolygonIcon, { color: color, size: isSimpleCardsMode ? 14 : 16 })));
    const { routeStore: { getPopupContainer, mapInstanceCanvas }, } = React.useContext(appContext.getContext());
    return (React.createElement(MapPointSetting, { mapInstanceCanvas: mapInstanceCanvas, getPopupContainer: getPopupContainer, onCancel: _onClick, style: style, onOk: updateStyle }, ele));
};

const MapVisualGeoIcon = React.memo((props) => {
    const { className, type, onClick, style, updateStyle, isHeat, currentVisual, isFlow, changeHeatVisual, } = props || {};
    const { color, icon } = style || {};
    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$1 as C, MapVisualGeoIcon as M, MapHeatSetting as a };
