import * as React from 'react';
import { n as iconsUtil, w as appContext, bN as changeColorToRgba, bO as checkIcon, v as i18n, s as __assign, bo as Tooltip, ar as Tooltip$1 } from './MapEditView-24782753.js';
import { isString, map, size, get } from 'lodash';
import { M as MapColorPicker, a as MapPointSetting } from './MapColorPicker-41ec1c5c.js';
import classNames from 'classnames';
import { u as useDataValue } from './useDataValue-8bdb351c.js';

var useMemo$2 = React.useMemo;
var getIconColorPref = iconsUtil.getIconColorPref;
var ColumnListContent = React.memo(function (props) {
    var _a;
    var _b;
    var value = React.useContext(appContext.getContext());
    var routeStore = value.routeStore;
    var getPopupContainer = routeStore.getPopupContainer;
    var iconClick = props.iconClick, Icon = props.Icon, textClick = props.textClick, text = props.text, index = props.index, color = props.color, isIgnore = props.isIgnore, _c = props.iconInfo, iconList = _c.iconList, defaultIcon = _c.defaultIcon;
    var style = useMemo$2(function () {
        return {
            color: color,
            backgroundColor: isIgnore ? changeColorToRgba('#4c556e', 0.1) : changeColorToRgba(color, 0.1),
        };
    }, [color, isIgnore]);
    var isStr = Icon && isString(Icon);
    var iconDom;
    if (!isStr) {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        iconDom = Icon ? React.createElement(Icon, { color: color, size: 16 }) : null;
    }
    else {
        var _icon_1 = checkIcon(Icon);
        var iconBase64 = ((_b = iconList.find(function (i) { return i.name === _icon_1; })) === null || _b === void 0 ? void 0 : _b.url) || defaultIcon;
        iconDom = getIconColorPref(_icon_1) ? (React.createElement("img", { src: iconBase64, alt: "", className: "icon" })) : (React.createElement("div", { className: "".concat(prefixCls$1, "-culumn-list-item-icon"), style: {
                backgroundColor: isIgnore ? '#4c556e' : color,
                WebkitMaskImage: "url(".concat(iconBase64, ")"),
                maskImage: "url(".concat(iconBase64, ")"),
            } }));
    }
    var title = isIgnore
        ? "".concat(i18n.mapEdit.cards.showSegment, "\uFF1A").concat(text)
        : "".concat(i18n.mapEdit.cards.hideSegment, "\uFF1A").concat(text);
    return (React.createElement("div", { className: classNames("".concat(prefixCls$1, "-culumn-list"), (_a = {},
            _a["".concat(prefixCls$1, "-column-item-ignore")] = isIgnore,
            _a)) },
        React.createElement("div", { "data-value": index, className: "".concat(prefixCls$1, "-culumn-list-item"), style: __assign({}, style), onClick: iconClick }, iconDom),
        React.createElement(Tooltip, { title: title, placement: "left", mouseEnterDelay: 0, mouseLeaveDelay: 0, getPopupContainer: getPopupContainer },
            React.createElement("div", { "data-value": index, className: "text-ellipsis", 
                // style={{ color: isIgnore ? '#4c556e' : '' }}
                onClick: textClick }, text))));
});
ColumnListContent.whyDidYouRender = true;
ColumnListContent.displayName = 'NumberColorSegmentationColumnListContent';
var ColumnList = function (props) {
    var iconClick = props.iconClick, textClick = props.textClick, breaks = props.breaks, colors = props.colors, icons = props.icons, ignore = props.ignore, iconInfo = props.iconInfo;
    return (React.createElement("div", null, map(colors, function (color, index) {
        var Icon;
        if (icons && icons.length) {
            if (size(icons) < size(colors)) {
                Icon = icons[0];
            }
            else {
                if (icons) {
                    Icon = icons[index];
                }
            }
        }
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        var isIgnore = (ignore === null || ignore === void 0 ? void 0 : ignore.indexOf(index)) > -1;
        var text = "".concat(breaks === null || breaks === void 0 ? void 0 : breaks[index], "-").concat(breaks === null || breaks === void 0 ? void 0 : breaks[index + 1]);
        return (React.createElement(ColumnListContent, { key: index, textClick: textClick, text: text, color: color, index: index, iconClick: iconClick, Icon: Icon, isIgnore: isIgnore, iconInfo: iconInfo }));
    })));
};
ColumnList.whyDidYouRender = true;
var ColumnListMemo = React.memo(ColumnList);
ColumnListMemo.displayName = 'NumberColorSegmentationColumnList';

var Fragment = React.Fragment;
var RowListItemColorContent = React.memo(function (props) {
    var _a;
    var // showTooltip,
    // colorClick,
    originalColor = props.originalColor, color = props.color, index = props.index, colorWidth = props.colorWidth, colorsHeight = props.colorsHeight, changeVisualColor = props.changeVisualColor, isIgnore = props.isIgnore; props.getPopupContainer;
    var style = {
        backgroundColor: isIgnore ? 'var(--dm-map-card-ignore-color)' : color,
        width: colorWidth,
        height: colorsHeight,
    };
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    // const _customRender = (onClick: any) => {
    //   return <div data-value={index} onClick={onClick} style={style} />;
    // };
    // const node = (
    //   <ColorPicker
    //     color={color}
    //     onChange={color => {
    //     }}
    //     customRender={_customRender}
    //   ></ColorPicker>
    // );
    // return node;
    var _changeColor = function (color) {
        changeVisualColor && changeVisualColor({ color: color, index: index });
    };
    var _style = __assign(__assign({}, style), { width: '100%', cursor: 'pointer' });
    if (originalColor) {
        _style.backgroundColor = '#bac1d7';
    }
    return (React.createElement(MapColorPicker, { color: originalColor ? '#bac1d7' : color, width: colorWidth, onOk: _changeColor },
        React.createElement("div", { "data-value": index, className: classNames("", (_a = {},
                _a["".concat(prefixCls$1, "-row-item-ignore")] = isIgnore,
                _a)), style: _style })));
    // return showTooltip ? (
    //   <Tooltip placement="top" overlay={color} withWrapper={false}>
    //     <div data-value={index} onClick={colorClick} style={style} />
    //   </Tooltip>
    // ) : (
    //   <div data-value={index} onClick={colorClick} style={style} />
    // );
});
RowListItemColorContent.whyDidYouRender = true;
RowListItemColorContent.displayName = 'NumberColorSegmentationRowListItemColorContent';
var RowListItemIcon = function (props) {
    var colors = props.colors, icons = props.icons, iconClick = props.iconClick, colorWidth = props.colorWidth, changeVisualColor = props.changeVisualColor, ignore = props.ignore, _a = props.iconInfo, defaultIcon = _a.defaultIcon, iconList = _a.iconList, customIconPrefInfo = _a.customIconPrefInfo;
    // console.log('RowListItemIcon iconList: ', iconList);
    return (React.createElement("div", { className: "dis_flex_1_all_center" }, map(colors, function (color, index) {
        var _a, _b;
        var _c;
        // let Icon: React.ReactNode;
        var Icon;
        var isStr = icons && isString(icons[0]);
        if (icons && size(icons)) {
            if (size(icons) < size(colors)) {
                Icon = icons[0];
            }
            else {
                if (icons) {
                    Icon = icons[index];
                }
            }
        }
        var content = Icon;
        var _icon = checkIcon(Icon);
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        var isIgnore = (ignore === null || ignore === void 0 ? void 0 : ignore.indexOf(index)) > -1;
        var style = {
            width: colorWidth,
            backgroundColor: isIgnore
                ? 'var(--dm-map-card-ignore-bg-color)'
                : customIconPrefInfo[_icon]
                    ? changeColorToRgba('#bac1d7', 0.1)
                    : changeColorToRgba(color, 0.1),
        };
        if (!isStr) {
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            var iconDom = Icon ? React.createElement(Icon, { color: colors[index], size: 16 }) : null;
            return (React.createElement("div", { "data-value": index, key: index, className: classNames("dis_flex_1_all_center", (_a = {},
                    _a["".concat(prefixCls$1, "-row-item-ignore")] = isIgnore,
                    _a)), onClick: iconClick, style: style }, iconDom));
        }
        var _onOk = function (style) {
            var color = get(style, 'color');
            var icon = get(style, 'icon.content');
            changeVisualColor && changeVisualColor({ color: color, index: index, icon: icon });
        };
        var iconUrl = ((_c = iconList.find(function (i) { return i.name === _icon; })) === null || _c === void 0 ? void 0 : _c.url) || defaultIcon;
        return (React.createElement(MapPointSetting, { key: index, style: {
                color: color,
                icon: {
                    icon: _icon,
                    content: content,
                },
            }, onOk: _onOk, onlyIcon: true, otherContainerStyle: { flex: 1, alignSelf: 'stretch' } },
            React.createElement("div", { key: index, className: classNames("", (_b = {},
                    _b["".concat(prefixCls$1, "-row-item-ignore")] = isIgnore,
                    _b)), style: __assign(__assign({}, style), { width: '100%', height: '20px', padding: '4px 0', textAlign: 'center' }) }, customIconPrefInfo[_icon] ? (React.createElement("img", { src: iconUrl, alt: "", className: "icon" })) : (React.createElement("div", { "data-value": index, className: "dis_flex_1_all_center", onClick: iconClick, style: {
                    height: 12,
                    backgroundColor: isIgnore ? 'var(--dm-map-card-ignore-color)' : color,
                    WebkitMaskImage: "url(".concat(iconUrl, ")"),
                    maskImage: "url(".concat(iconUrl, ")"),
                    maskSize: 'contain',
                    WebkitMaskSize: 'contain',
                    WebkitMaskRepeat: 'no-repeat',
                    maskRepeat: 'no-repeat',
                    WebkitMaskPosition: 'center',
                    maskPosition: 'center',
                } })))));
    })));
};
RowListItemIcon.whyDidYouRender = true;
RowListItemIcon.displayName = 'NumberColorSegmentationRowListItemIcon';
var RowListItemColor = React.memo(function (props) {
    var _a = props.icons, icons = _a === void 0 ? [] : _a, colors = props.colors, colorsHeight = props.colorsHeight, colorWidth = props.colorWidth, colorClick = props.colorClick, showTooltip = props.showTooltip, changeVisualColor = props.changeVisualColor, ignore = props.ignore, customIconPrefInfo = props.customIconPrefInfo, getPopupContainer = props.getPopupContainer;
    return (React.createElement("div", { className: "dis_flex_1_all_center" }, map(colors, function (color, index) {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        var isIgnore = (ignore === null || ignore === void 0 ? void 0 : ignore.indexOf(index)) > -1;
        var Icon;
        var isStr = icons && isString(icons[0]);
        if (icons && size(icons)) {
            if (size(icons) < size(colors)) {
                Icon = icons[0];
            }
            else {
                if (icons) {
                    Icon = icons[index];
                }
            }
        }
        var _icon = checkIcon(Icon);
        var originalColor = isStr ? customIconPrefInfo[_icon] : false;
        return (React.createElement(RowListItemColorContent, { key: index, originalColor: originalColor, colorsHeight: colorsHeight, colorWidth: colorWidth, colorClick: colorClick, showTooltip: showTooltip, index: index, color: color, changeVisualColor: changeVisualColor, isIgnore: isIgnore, getPopupContainer: getPopupContainer }));
    })));
});
RowListItemColor.whyDidYouRender = true;
RowListItemColor.displayName = 'NumberColorSegmentationRowListItemColor';
var RowListItemText = React.memo(function (props) {
    var breaks = props.breaks, breaksWidth = props.breaksWidth, breaksTranslateX = props.breaksTranslateX, colorWidth = props.colorWidth, textClick = props.textClick, ignore = props.ignore, getPopupContainer = props.getPopupContainer;
    var style = { width: breaksWidth, transform: "translateX(-".concat(breaksTranslateX, ")") };
    return (React.createElement("div", { className: "dis_flex_1_all_center", style: style }, map(breaks, function (b, index) {
        var _a, _b;
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        var isIgnore = (ignore === null || ignore === void 0 ? void 0 : ignore.indexOf(index)) > -1;
        var last = index === breaks.length - 1;
        if (last) {
            return (React.createElement("div", { "data-value": index, key: index, className: classNames('text-ellipsis text-align-center', (_a = {},
                    _a["".concat(prefixCls$1, "-row-item-ignore")] = isIgnore,
                    _a)), style: {
                    width: colorWidth,
                    // color: isIgnore ? '#4c556e' : ''
                } }, b));
        }
        var title = isIgnore
            ? "".concat(i18n.mapEdit.cards.showSegment, "\uFF1A").concat(b, "~").concat(breaks[index + 1])
            : "".concat(i18n.mapEdit.cards.hideSegment, "\uFF1A").concat(b, "~").concat(breaks[index + 1]);
        return (React.createElement(Tooltip$1, { key: index, title: title, mouseEnterDelay: 0, mouseLeaveDelay: 0, getPopupContainer: getPopupContainer },
            React.createElement("div", { "data-value": index, key: index, className: classNames('text-ellipsis text-align-center', (_b = {},
                    _b["".concat(prefixCls$1, "-row-item-ignore")] = isIgnore,
                    _b)), style: {
                    width: colorWidth,
                    // color: isIgnore ? '#4c556e' : ''
                }, onClick: textClick }, b)));
    })));
});
RowListItemText.whyDidYouRender = true;
RowListItemText.displayName = 'NumberColorSegmentationRowListItemText';
var RowList = function (props) {
    var iconClick = props.iconClick, colorClick = props.colorClick, breaks = props.breaks, colors = props.colors, icons = props.icons, colorWidth = props.colorWidth, breaksWidth = props.breaksWidth, breaksTranslateX = props.breaksTranslateX, showTooltip = props.showTooltip, colorsHeight = props.colorsHeight, changeVisualColor = props.changeVisualColor, textClick = props.textClick, ignore = props.ignore, iconInfo = props.iconInfo, getPopupContainer = props.getPopupContainer;
    return (React.createElement(Fragment, null,
        React.createElement(RowListItemIcon, { colorWidth: colorWidth, iconClick: iconClick, icons: icons, colors: colors, changeVisualColor: changeVisualColor, ignore: ignore, iconInfo: iconInfo }),
        React.createElement(RowListItemColor, { icons: icons, colors: colors, colorsHeight: colorsHeight, colorWidth: colorWidth, showTooltip: showTooltip, colorClick: colorClick, changeVisualColor: changeVisualColor, ignore: ignore, customIconPrefInfo: iconInfo.customIconPrefInfo, getPopupContainer: getPopupContainer }),
        React.createElement(RowListItemText, { breaks: breaks, colorWidth: colorWidth, breaksWidth: breaksWidth, breaksTranslateX: breaksTranslateX, textClick: textClick, ignore: ignore, getPopupContainer: getPopupContainer })));
};
RowList.whyDidYouRender = true;
var RowListMemo = React.memo(RowList);
RowListMemo.displayName = 'NumberColorSegmentationRowList';

var useMemo$1 = React.useMemo;
var defaultColumn = 'column';
var defaultRow = 'row';
var prefixCls$1 = 'dmc-number-color-segmentation';
/**
 * 数值可视化部分
 * @param props
 * @returns {*}
 * @constructor
 */
var NumberColorSegmentation = function (props) {
    var showTooltip = props.showTooltip, colors = props.colors, breaks = props.breaks, colorsHeight = props.colorsHeight, icons = props.icons, direction = props.direction, colorClick = props.colorClick, iconClick = props.iconClick, textClick = props.textClick, changeVisualColor = props.changeVisualColor, ignore = props.ignore, _a = props.iconInfo, iconInfo = _a === void 0 ? {
        defaultIcon: '',
        iconList: [],
        customIconPrefInfo: {},
    } : _a, getPopupContainer = props.getPopupContainer;
    var colorLength = colors.length;
    var _b = useMemo$1(function () {
        var colorWidthPrecentage = 100 / colorLength;
        var colorWidth = "".concat(colorWidthPrecentage, "%");
        var breaksWidth = "".concat(100 + colorWidthPrecentage, "%");
        var breaksTranslateX = "".concat(100 / (colorLength + 1) / 2, "%");
        return { colorWidth: colorWidth, breaksWidth: breaksWidth, breaksTranslateX: breaksTranslateX };
    }, [colorLength]), colorWidth = _b.colorWidth, breaksWidth = _b.breaksWidth, breaksTranslateX = _b.breaksTranslateX;
    var _colorClick = useDataValue(colorClick);
    var _iconClick = useDataValue(iconClick);
    var _textClick = useDataValue(textClick);
    return (React.createElement("div", { className: prefixCls$1 }, direction === defaultColumn ? (React.createElement(ColumnListMemo, { colors: colors, breaks: breaks, icons: icons, iconClick: _iconClick, textClick: _textClick, ignore: ignore, iconInfo: iconInfo })) : (React.createElement(RowListMemo, { colors: colors, breaks: breaks, icons: icons, iconClick: _iconClick, colorClick: _colorClick, colorWidth: colorWidth, breaksWidth: breaksWidth, breaksTranslateX: breaksTranslateX, showTooltip: showTooltip, colorsHeight: colorsHeight, changeVisualColor: changeVisualColor, textClick: _textClick, ignore: ignore, iconInfo: iconInfo, getPopupContainer: getPopupContainer }))));
};
NumberColorSegmentation.defaultProps = {
    colors: [],
    breaks: [],
    icons: [],
    colorsHeight: 4,
    direction: defaultRow,
};
NumberColorSegmentation.whyDidYouRender = true;
var NumberColorSegmentationMemo = React.memo(NumberColorSegmentation);
NumberColorSegmentationMemo.displayName = 'NumberColorSegmentation';

var useMemo = React.useMemo;
var prefixCls = 'text-color-segmentation';
var Item = React.memo(function (props) {
    var _a;
    var _b;
    var value = React.useContext(appContext.getContext());
    var routeStore = value.routeStore;
    var getPopupContainer = routeStore.getPopupContainer;
    var index = props.index, text = props.text, Icon = props.Icon, color = props.color, iconClick = props.iconClick, textClick = props.textClick, style = props.style, changeVisualColor = props.changeVisualColor, isIgnore = props.isIgnore, defaultIcon = props.defaultIcon, iconList = props.iconList, customIconPrefInfo = props.customIconPrefInfo;
    var _changeColor = function (color) {
        changeVisualColor && changeVisualColor({ color: color, index: index });
    };
    var _onOk = function (style) {
        var color = get(style, 'color');
        var icon = get(style, 'icon.content');
        changeVisualColor && changeVisualColor({ color: color, index: index, icon: icon });
    };
    var isStr = Icon && isString(Icon);
    var content = '';
    if (isStr) {
        content = Icon;
    }
    var iconDom;
    if (!isStr) {
        iconDom = Icon ? (React.createElement(Icon, { color: isIgnore ? 'var(--dm-map-card-ignore-color)' : color, size: 16 })) : null;
        if (changeVisualColor) {
            iconDom = (React.createElement(MapColorPicker, { color: isIgnore ? 'var(--dm-map-card-ignore-color)' : color, onOk: _changeColor }, iconDom));
        }
    }
    else {
        var _icon_1 = checkIcon(Icon);
        var _style = {
            color: color,
            icon: {
                icon: _icon_1,
                content: content,
            },
        };
        var iconBase64 = ((_b = iconList.find(function (i) { return i.name === _icon_1; })) === null || _b === void 0 ? void 0 : _b.url) || defaultIcon;
        iconDom = (React.createElement(MapPointSetting, { key: index, width: '100%', height: '100%', style: _style, onOk: _onOk, onlyIcon: true, otherContainerStyle: { flex: 1 } }, customIconPrefInfo[_icon_1] ? (React.createElement("img", { src: iconBase64, alt: "", className: "dis_flex_1_all_center icon" })) : (React.createElement("div", { className: "".concat(prefixCls, "-li-icon-content"), style: {
                backgroundColor: color,
                WebkitMaskImage: "url(".concat(iconBase64, ")"),
                maskImage: "url(".concat(iconBase64, ")"),
            } }))));
        if (!iconClick) {
            iconDom = (React.createElement(React.Fragment, null, customIconPrefInfo[_icon_1] ? (React.createElement("img", { src: iconBase64, alt: "", className: "dis_flex_1_all_center icon" })) : (React.createElement("div", { className: "".concat(prefixCls, "-li-icon-content"), style: {
                    backgroundColor: color,
                    WebkitMaskImage: "url(".concat(iconBase64, ")"),
                    maskImage: "url(".concat(iconBase64, ")"),
                } }))));
        }
    }
    var title = isIgnore
        ? "".concat(i18n.mapEdit.cards.showSegment, "\uFF1A").concat(text)
        : "".concat(i18n.mapEdit.cards.hideSegment, "\uFF1A").concat(text);
    return (React.createElement("div", { className: classNames("".concat(prefixCls, "-li"), (_a = {},
            _a["".concat(prefixCls, "-li-ignore")] = isIgnore,
            _a)), style: style },
        React.createElement("div", { "data-value": index, className: "".concat(prefixCls, "-li-icon"), onClick: iconClick }, iconDom),
        React.createElement(Tooltip, { title: title, placement: "left", mouseEnterDelay: 0, mouseLeaveDelay: 0, getPopupContainer: getPopupContainer },
            React.createElement("div", { "data-value": index, className: "".concat(prefixCls, "-li-name"), onClick: textClick }, text))));
});
Item.whyDidYouRender = true;
Item.displayName = 'TypeColorSegmentationItem';
var TextColorSegmentation = function (props) {
    var breaks = props.breaks, icons = props.icons, column = props.column, colors = props.colors, iconClick = props.iconClick, textClick = props.textClick, changeVisualColor = props.changeVisualColor, ignore = props.ignore, _a = props.iconInfo, iconInfo = _a === void 0 ? {
        defaultIcon: '',
        iconList: [],
        customIconPrefInfo: {},
    } : _a;
    var defaultIcon = iconInfo.defaultIcon, iconList = iconInfo.iconList, customIconPrefInfo = iconInfo.customIconPrefInfo;
    var _iconClick = useDataValue(iconClick);
    var _textClick = useDataValue(textClick);
    var style = useMemo(function () {
        return { flex: "0 0 ".concat(100 / column, "%") };
    }, [column]);
    return (React.createElement("div", { className: prefixCls }, map(breaks, function (text, index) {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        var isIgnore = (ignore === null || ignore === void 0 ? void 0 : ignore.indexOf(index)) > -1;
        var Icon;
        if (icons && size(icons)) {
            if (size(icons) < size(colors)) {
                Icon = icons[0];
            }
            else {
                if (icons) {
                    Icon = icons[index];
                }
            }
        }
        var color = colors[index];
        return (React.createElement(Item, { key: index, index: index, text: text, color: color, style: style, textClick: _textClick, iconClick: iconClick ? _iconClick : undefined, Icon: Icon, isIgnore: isIgnore, changeVisualColor: changeVisualColor, defaultIcon: defaultIcon, iconList: iconList, customIconPrefInfo: customIconPrefInfo }));
    })));
};
TextColorSegmentation.defaultProps = {
    colors: [],
    breaks: [],
    icons: [],
    column: 2,
};
TextColorSegmentation.whyDidYouRender = true;
var TextColorSegmentationMemo = React.memo(TextColorSegmentation);
TextColorSegmentationMemo.displayName = 'TypeColorSegmentation';

export { NumberColorSegmentation as N, TextColorSegmentation as T };
