import React__default from 'react';
import { observer } from 'mobx-react';
import { B as BottomWrapper } from './BottomWrapper-5b88a1bb.js';
import { q as appContext, b8 as getIcon, bq as NUMBER_VISUAL, bp as TYPE_VISUAL, bA as HEAT_VISUAL, bB as GRID_HEAT_VISUAL, bC as HEXAGON_HEAT_VISUAL, l as iconsUtil } from './MapEditView-f6381866.js';
import { find, map, get, forEach } from 'lodash';
import classNames from 'classnames';
import { useSetState, useCreation } from 'ahooks';
import { N as NumberColorSegmentation, T as TextColorSegmentation } from './TextColorSegmentation-a1171529.js';
import { a as getCurrentVisualConfig, g as getCardIconInfo } from './getCardIconInfo-a22a818f.js';
import 'maptalks';
import 'uuid';
import 'mobx';
import 'lz-string';
import 'dayjs';
import 'react-dom';
import 'react-is';
import '@loadable/component';
import 'js-beautify';
import 'axios';
import 'superstruct';
import '@tanem/react-nprogress';
import 'jquery';
import 'chroma-js';
import 'js-cookie';
import 'is-email';
import 'is-uuid';
import 'is-url';
import 'anymatch';
import '@syncpoint/wkx';
import 'buffer';
import '@turf/turf';
import '@mapbox/polylabel';
import 'turf-multipolygon';
import 'turf-polygon';
import 'gcoord';
import 'eventemitter2';
import 'geobuf';
import 'localforage';
import 'rc-menu';
import 'perfect-scrollbar';
import 'jszip';
import 'file-saver';
import 'screenfull';
import 'sql-formatter-fork';
import 'array-move';
import 'turf-multilinestring';
import 'copy-to-clipboard';
import 'maptalks.three';
import 'ajv';
import 'spark-md5';
import 'react-draggable';
import 'react-virtualized';
import 'turf-point';
import 'decamelize';
import 'rbush';
import 'qs';
import 'maptalks.snap';
import 'react-use';
import 'react-rnd';
import 'react-beautiful-dnd';
import './MapColorPicker-dcab48f0.js';
import './useDataValue-6bd3790f.js';

const VisualDescription = (props) => {
    return React__default.createElement("div", { className: "dm-map-mobile-visual-description" }, props.children);
};

const visualTypeMap = {
    [`${NUMBER_VISUAL}`]: '数值可视化',
    [`${TYPE_VISUAL}`]: '类型可视化',
    [`${HEAT_VISUAL}`]: '热力可视化',
    [`${GRID_HEAT_VISUAL}`]: '热力可视化',
    [`${HEXAGON_HEAT_VISUAL}`]: '热力可视化',
};
const LegendItem = observer((props) => {
    const Context = appContext.getContext();
    const value = React__default.useContext(Context);
    const { routeStore, prefixCls } = value;
    const { defaultIcon, customIconPrefInfo, SuppFiltersStore: { getSuppPackage }, } = routeStore;
    const { card } = props;
    const [state, setState] = useSetState({
        openModal: false,
    });
    const { defaultStyle, uuid } = card;
    const visualList = card.visualList;
    const currentVisual = find(visualList, { isCurrent: true });
    const suppPackage = useCreation(() => {
        return getSuppPackage(card.uuid);
    }, [card.uuid]);
    const { getCol, geometryType, getColumnValueById } = suppPackage;
    const { iconCache, getIconUrl, getIconColorPref } = iconsUtil;
    const [currentVisualDetail, currentVisualType, currentVisualField, currentVisualFieldId, currentVisualOpinion,] = getCurrentVisualConfig({
        currentVisual,
        card,
        packageInfo: suppPackage,
    });
    const { isHeat, isCurrentHeatVisual, isCurrentGridHeatVisual, isCurrentHexagonHeatVisual, isCurrentTypeVisual, isCurrentNumberVisual, isFlow, isPolygon3DVisual, isLine3DVisual, isPoint3DVisual, isPointToPoint, isPoint, } = currentVisualOpinion;
    const _getCurrentBreaks = () => {
        const currentBreaks = [];
        if (isCurrentTypeVisual) {
            forEach(currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.breaks, (b) => {
                const data = getColumnValueById({ uuid, col: currentVisualField, id: b });
                currentBreaks.push(data === null || data === void 0 ? void 0 : data.value);
            });
        }
        if (isFlow || isPolygon3DVisual) {
            const field = getCol({ uuid, fieldId: currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.colorFieldId });
            forEach(currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.breaks, (b) => {
                const data = getColumnValueById({ uuid, col: field, id: b });
                currentBreaks.push(data === null || data === void 0 ? void 0 : data.value);
            });
        }
        return currentBreaks;
    };
    const iconInfo = useCreation(() => {
        return getCardIconInfo({
            getIconColorPref,
            getIconUrl,
            iconCache,
            customIconPrefInfo,
            defaultIcon,
        });
    }, [
        getIconColorPref,
        getIconUrl,
        defaultIcon,
        customIconPrefInfo,
        iconCache.customIconList,
        iconCache.defaultIconList,
    ]);
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement("div", { className: classNames('dm-map-mobile-legend-item', {
                show: props.show,
            }), onClick: () => {
                if (props.show) {
                    setState({
                        openModal: true,
                    });
                }
                else {
                    card.changeCardHidden(false);
                }
            } },
            !card.hidden && (React__default.createElement("div", { className: "dm-map-mobile-legend-item-show-icon" },
                React__default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                    React__default.createElement("path", { d: "M0 0H20V20H6C2.68629 20 0 17.3137 0 14V0Z", fill: "var(--primary-primary-border-1, #5578f4)" }),
                    React__default.createElement("path", { d: "M14.7349 5.15935C15.2107 5.46171 15.3513 6.09258 15.049 6.56842L9.85981 14.735C9.69233 14.9985 9.41343 15.171 9.1028 15.203C8.79216 15.2349 8.48397 15.123 8.26629 14.8991L5.2889 11.8366C4.8959 11.4324 4.905 10.7861 5.30923 10.3931C5.71346 10.0001 6.35974 10.0092 6.75274 10.4135L8.82952 12.5496L13.3258 5.47348C13.6281 4.99763 14.259 4.85699 14.7349 5.15935Z", fill: "white" })))),
            React__default.createElement("div", null,
                React__default.createElement("div", { className: "dm-map-mobile-legend-item-name" }, card.name),
                card.hidden && (React__default.createElement("div", { className: "dm-map-mobile-legend-item-visual-list" }, map(visualList, (item, index) => {
                    return (React__default.createElement(VisualDescription, { key: index },
                        "\u6309\"",
                        getCol({ fieldId: item.fieldId }),
                        "\"",
                        get(visualTypeMap, item.id)));
                }))),
                !card.hidden && (currentVisual === null || currentVisual === void 0 ? void 0 : currentVisual.id) === 'numberVisual' && (React__default.createElement("div", null,
                    React__default.createElement(NumberColorSegmentation, { icons: isPoint || isPointToPoint ? currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.icons : [], breaks: currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.breaks, colors: currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.colors, ignore: currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.ignore, iconInfo: iconInfo }))),
                !card.hidden && (currentVisual === null || currentVisual === void 0 ? void 0 : currentVisual.id) === 'typeVisual' && (React__default.createElement("div", null,
                    React__default.createElement(TextColorSegmentation, { icons: isPoint || isPointToPoint
                            ? currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.icons
                            : [getIcon(geometryType, defaultStyle)], breaks: _getCurrentBreaks(), colors: currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.colors }))))),
        state.openModal && (React__default.createElement("div", null,
            React__default.createElement("div", { className: "dm-map-mobile-legend-item-mask", onClick: () => {
                    setState({
                        openModal: false,
                    });
                } }),
            React__default.createElement("div", { className: "dm-map-mobile-legend-item-modal" },
                React__default.createElement("div", { className: "dm-map-mobile-legend-item-modal-content" }, map(visualList, (item, index) => {
                    return (React__default.createElement("div", { key: index, className: "dm-map-mobile-legend-item-modal-content-item", onClick: () => {
                            card.changeCurrentVisual({
                                id: item.id,
                                fieldId: item.fieldId,
                            });
                            setState({
                                openModal: false,
                            });
                        } },
                        "\u6309\"",
                        getCol({ fieldId: item.fieldId }),
                        "\"",
                        get(visualTypeMap, item.id)));
                })),
                React__default.createElement("div", { className: "dm-map-mobile-legend-item-modal-hidden", onClick: () => {
                        card.changeCardHidden(true);
                        setState({
                            openModal: false,
                        });
                    } }, "\u9690\u85CF\u56FE\u5C42"))))));
});

const LegendAll = observer(() => {
    const Context = appContext.getContext();
    const value = React__default.useContext(Context);
    const { routeStore, prefixCls } = value;
    const { CardsStore: { cards }, MobileUIStore: { setLegend }, } = routeStore;
    return (React__default.createElement(BottomWrapper, { title: "\u56FE\u4F8B", iconClick: () => {
            setLegend(false);
        } },
        React__default.createElement("div", { className: "dm-map-mobile-legend-all" }, map(cards, (card) => {
            return React__default.createElement(LegendItem, { key: card.uuid, show: !card.hidden, card: card });
        }))));
});

export { LegendAll as default };
