import * as React from 'react';
import { isString, map, size, get } from 'lodash';
import { q as appContext, bH as changeColorToRgba, bI as checkIcon, p as i18n, bk as Tooltip, l as iconsUtil, am as Tooltip$1 } from './MapEditView-f6381866.js';
import { M as MapColorPicker, a as MapPointSetting } from './MapColorPicker-dcab48f0.js';
import classNames from 'classnames';
import { u as useDataValue } from './useDataValue-6bd3790f.js';

const { useMemo: useMemo$2 } = React;
const { getIconColorPref } = iconsUtil;
const ColumnListContent = React.memo((props) => {
    var _a;
    const value = React.useContext(appContext.getContext());
    const { routeStore } = value;
    const { getPopupContainer } = routeStore;
    const { iconClick, Icon, textClick, text, index, color, isIgnore, iconInfo: { iconList, defaultIcon }, } = props;
    const style = useMemo$2(() => {
        return {
            color,
            backgroundColor: isIgnore ? changeColorToRgba('#4c556e', 0.1) : changeColorToRgba(color, 0.1),
        };
    }, [color, isIgnore]);
    const isStr = Icon && isString(Icon);
    let 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 {
        const _icon = checkIcon(Icon);
        const iconBase64 = ((_a = iconList.find((i) => i.name === _icon)) === null || _a === void 0 ? void 0 : _a.url) || defaultIcon;
        iconDom = getIconColorPref(_icon) ? (React.createElement("img", { src: iconBase64, alt: "", className: "icon" })) : (React.createElement("div", { className: `${prefixCls$1}-culumn-list-item-icon`, style: {
                backgroundColor: isIgnore ? '#4c556e' : color,
                WebkitMaskImage: `url(${iconBase64})`,
                maskImage: `url(${iconBase64})`,
            } }));
    }
    const title = isIgnore
        ? `${i18n.mapEdit.cards.showSegment}：${text}`
        : `${i18n.mapEdit.cards.hideSegment}：${text}`;
    return (React.createElement("div", { className: classNames(`${prefixCls$1}-culumn-list`, {
            [`${prefixCls$1}-column-item-ignore`]: isIgnore,
        }) },
        React.createElement("div", { "data-value": index, className: `${prefixCls$1}-culumn-list-item`, style: Object.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';
const ColumnList = (props) => {
    const { iconClick, textClick, breaks, colors, icons, ignore, iconInfo } = props;
    return (React.createElement("div", null, map(colors, (color, index) => {
        let 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
        const isIgnore = (ignore === null || ignore === void 0 ? void 0 : ignore.indexOf(index)) > -1;
        const text = `${breaks === null || breaks === void 0 ? void 0 : breaks[index]}-${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;
const ColumnListMemo = React.memo(ColumnList);
ColumnListMemo.displayName = 'NumberColorSegmentationColumnList';

const { Fragment } = React;
const RowListItemColorContent = React.memo((props) => {
    const { 
    // showTooltip,
    // colorClick,
    originalColor, color, index, colorWidth, colorsHeight, changeVisualColor, isIgnore, getPopupContainer, } = props;
    const 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;
    const _changeColor = (color) => {
        changeVisualColor && changeVisualColor({ color, index });
    };
    const _style = Object.assign(Object.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(``, {
                [`${prefixCls$1}-row-item-ignore`]: isIgnore,
            }), 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';
const RowListItemIcon = (props) => {
    const { colors, icons, iconClick, colorWidth, changeVisualColor, ignore, iconInfo: { defaultIcon, iconList, customIconPrefInfo }, } = props;
    const { routeStore: { getPopupContainer, mapInstanceCanvas }, } = React.useContext(appContext.getContext());
    // console.log('RowListItemIcon iconList: ', iconList);
    return (React.createElement("div", { className: "dis_flex_1_all_center" }, map(colors, (color, index) => {
        var _a;
        // let Icon: React.ReactNode;
        let Icon;
        const isStr = icons && isString(icons[0]);
        if (icons && size(icons)) {
            if (size(icons) < size(colors)) {
                Icon = icons[0];
            }
            else {
                if (icons) {
                    Icon = icons[index];
                }
            }
        }
        const content = Icon;
        const _icon = checkIcon(Icon);
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        const isIgnore = (ignore === null || ignore === void 0 ? void 0 : ignore.indexOf(index)) > -1;
        const 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
            const 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`, {
                    [`${prefixCls$1}-row-item-ignore`]: isIgnore,
                }), onClick: iconClick, style: style }, iconDom));
        }
        const _onOk = (style) => {
            const color = get(style, 'color');
            const icon = get(style, 'icon.content');
            changeVisualColor && changeVisualColor({ color, index, icon });
        };
        const iconUrl = ((_a = iconList.find((i) => i.name === _icon)) === null || _a === void 0 ? void 0 : _a.url) || defaultIcon;
        return (React.createElement(MapPointSetting, { getPopupContainer: getPopupContainer, mapInstanceCanvas: mapInstanceCanvas, key: index, style: {
                color,
                icon: {
                    icon: _icon,
                    content,
                },
            }, onOk: _onOk, onlyIcon: true, otherContainerStyle: { flex: 1, alignSelf: 'stretch' } },
            React.createElement("div", { key: index, className: classNames(``, {
                    [`${prefixCls$1}-row-item-ignore`]: isIgnore,
                }), style: Object.assign(Object.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(${iconUrl})`,
                    maskImage: `url(${iconUrl})`,
                    maskSize: 'contain',
                    WebkitMaskSize: 'contain',
                    WebkitMaskRepeat: 'no-repeat',
                    maskRepeat: 'no-repeat',
                    WebkitMaskPosition: 'center',
                    maskPosition: 'center',
                } })))));
    })));
};
RowListItemIcon.whyDidYouRender = true;
RowListItemIcon.displayName = 'NumberColorSegmentationRowListItemIcon';
const RowListItemColor = React.memo((props) => {
    const { icons = [], colors, colorsHeight, colorWidth, colorClick, showTooltip, changeVisualColor, ignore, customIconPrefInfo, getPopupContainer, } = props;
    return (React.createElement("div", { className: "dis_flex_1_all_center" }, map(colors, (color, index) => {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        const isIgnore = (ignore === null || ignore === void 0 ? void 0 : ignore.indexOf(index)) > -1;
        let Icon;
        const isStr = icons && isString(icons[0]);
        if (icons && size(icons)) {
            if (size(icons) < size(colors)) {
                Icon = icons[0];
            }
            else {
                if (icons) {
                    Icon = icons[index];
                }
            }
        }
        const _icon = checkIcon(Icon);
        const 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';
const RowListItemText = React.memo((props) => {
    const { breaks, breaksWidth, breaksTranslateX, colorWidth, textClick, ignore, getPopupContainer, } = props;
    const style = { width: breaksWidth, transform: `translateX(-${breaksTranslateX})` };
    return (React.createElement("div", { className: "dis_flex_1_all_center", style: style }, map(breaks, (b, index) => {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        const isIgnore = (ignore === null || ignore === void 0 ? void 0 : ignore.indexOf(index)) > -1;
        const last = index === breaks.length - 1;
        if (last) {
            return (React.createElement("div", { "data-value": index, key: index, className: classNames('text-ellipsis text-align-center', {
                    [`${prefixCls$1}-row-item-ignore`]: isIgnore,
                }), style: {
                    width: colorWidth,
                    // color: isIgnore ? '#4c556e' : ''
                } }, b));
        }
        const title = isIgnore
            ? `${i18n.mapEdit.cards.showSegment}：${b}~${breaks[index + 1]}`
            : `${i18n.mapEdit.cards.hideSegment}：${b}~${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', {
                    [`${prefixCls$1}-row-item-ignore`]: isIgnore,
                }), style: {
                    width: colorWidth,
                    // color: isIgnore ? '#4c556e' : ''
                }, onClick: textClick }, b)));
    })));
});
RowListItemText.whyDidYouRender = true;
RowListItemText.displayName = 'NumberColorSegmentationRowListItemText';
const RowList = (props) => {
    const { iconClick, colorClick, breaks, colors, icons, colorWidth, breaksWidth, breaksTranslateX, showTooltip, colorsHeight, changeVisualColor, textClick, ignore, iconInfo, getPopupContainer, } = props;
    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;
const RowListMemo = React.memo(RowList);
RowListMemo.displayName = 'NumberColorSegmentationRowList';

const { useMemo: useMemo$1 } = React;
const defaultColumn = 'column';
const defaultRow = 'row';
const prefixCls$1 = 'dmc-number-color-segmentation';
/**
 * 数值可视化部分
 * @param props
 * @returns {*}
 * @constructor
 */
const NumberColorSegmentation = (props) => {
    const { showTooltip, colors, breaks, colorsHeight, icons, direction, colorClick, iconClick, textClick, changeVisualColor, ignore, iconInfo = {
        defaultIcon: '',
        iconList: [],
        customIconPrefInfo: {},
    }, getPopupContainer, } = props;
    const colorLength = colors.length;
    const { colorWidth, breaksWidth, breaksTranslateX } = useMemo$1(() => {
        const colorWidthPrecentage = 100 / colorLength;
        const colorWidth = `${colorWidthPrecentage}%`;
        const breaksWidth = `${100 + colorWidthPrecentage}%`;
        const breaksTranslateX = `${100 / (colorLength + 1) / 2}%`;
        return { colorWidth, breaksWidth, breaksTranslateX };
    }, [colorLength]);
    const _colorClick = useDataValue(colorClick);
    const _iconClick = useDataValue(iconClick);
    const _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;
const NumberColorSegmentationMemo = React.memo(NumberColorSegmentation);
NumberColorSegmentationMemo.displayName = 'NumberColorSegmentation';

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

export { NumberColorSegmentation as N, TextColorSegmentation as T };
