import * as React from 'react';
import { observer } from 'mobx-react';
import { q as appContext, p as i18n, G as GEO_TYPES, w as GeometryType, bn as getCustomGeoMenuOpts, bi as getDesText, bm as TextShave, I as Icon, b8 as getIcon, bo as Dropdown, l as iconsUtil, bl as MapMenuCustom, bp as TYPE_VISUAL, bq as NUMBER_VISUAL } from './MapEditView-f6381866.js';
import { find, size, map, forEach } from 'lodash';
import { M as MapVisualGeoIcon } from './MapVisualGeoIcon-2a18409b.js';
import { useClickAway } from 'react-use';
import { T as TextColorSegmentation, N as NumberColorSegmentation } from './TextColorSegmentation-a1171529.js';
import { M as MapTypeSetting, D as DataGroupBy } from './DataGroupBy-5daca930.js';
import 'maptalks';
import 'uuid';
import 'mobx';
import 'lz-string';
import 'dayjs';
import 'react-dom';
import 'classnames';
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 'ahooks';
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-rnd';
import 'react-beautiful-dnd';
import './index-2d7fc1f3.js';
import './MapColorPicker-dcab48f0.js';
import './index-23029f1e.js';
import './index-f7347652.js';
import './useDataValue-6bd3790f.js';
import './Transfer-b219601e.js';
import 'simple-statistics';
import 'echarts';

const prefixCls = 'dm-map-visual-geo-card';
const { useState, useRef } = React;
const MapVisualGeoCard = observer(() => {
    const { iconCache, getIconUrl, getIconColorPref } = iconsUtil;
    const [popupVisible, setPopupVisible] = useState(false);
    const ref = useRef(null);
    const refWrap = useRef(null);
    const { routeStore } = React.useContext(appContext.getContext());
    const { GeoFiltersStore, defaultIcon, customIconPrefInfo, EmitStore, getPopupContainer } = routeStore;
    const { geoFilters, currentGeoFilter, geoDataCount, geoDataPointCount, updateRenderCurrentGeo } = GeoFiltersStore;
    const { zoomToCurrentGeo } = EmitStore;
    const geoPackage = find(geoFilters, { uuid: currentGeoFilter });
    const i18nMenu = i18n.mapEdit.menu;
    const i18nCards = i18n.mapEdit.cards;
    if (!geoPackage) {
        return null;
    }
    const { geometryType, objectType, alias, getColListByType, 
    // allColumns,
    updateHoverVisual, updateLabelVisual, getColUuid, 
    // setColSelectedList,
    addTypeVisual, typeVisual, numberVisual, addNumberVisual, getColumnValueById, getCol, changeVisualColor, 
    // getAllColValue,
    // getColumnValueNameList,
    setColumnValue, getColumnIdByValue, updateTypeVisual, updateNumberVisual, setNoVisual, defaultStyle, updateDefaultStyle, } = geoPackage;
    const iconInfo = React.useMemo(() => ({
        defaultIcon,
        iconList: [
            ...iconCache.customIconList.map((i) => ({
                // label: getIconLabel(i),
                name: i,
                url: getIconUrl(i),
                originalColor: getIconColorPref(i),
            })),
            ...iconCache.defaultIconList.map((i) => ({
                // label: getIconLabel(i),
                name: i,
                url: getIconUrl(i),
                originalColor: getIconColorPref(i),
            })),
        ],
        customIconPrefInfo,
    }), [
        defaultIcon,
        iconCache.customIconList,
        iconCache.defaultIconList,
        customIconPrefInfo,
        getIconUrl,
        getIconColorPref,
    ]);
    // const { fenceSetting } = FenceSettingStore;
    // const { defaultFence } = fenceSetting;
    let count = 0;
    if (geometryType === GEO_TYPES[GeometryType.polygon]) {
        count = geoDataCount;
    }
    else if (geometryType === GEO_TYPES[GeometryType.pointToPolygon]) {
        count = geoDataPointCount;
    }
    const isCurrentTypeVisual = size(typeVisual) > 0;
    const isCurrentNumberVisual = size(numberVisual) > 0;
    const _currentVisualConfig = () => {
        const currentVisualDetail = isCurrentTypeVisual ? typeVisual : numberVisual; //find(visual, { fieldId });
        const currentVisualField = getCol({ fieldId: currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.fieldId });
        const currentVisualType = isCurrentTypeVisual ? TYPE_VISUAL : NUMBER_VISUAL;
        return {
            currentVisualDetail: currentVisualDetail,
            currentVisualType,
            currentVisualField,
        };
    };
    const { currentVisualDetail, currentVisualType, currentVisualField } = _currentVisualConfig();
    const [_numberCols, _textCols] = getColListByType();
    const numberCols = map(_numberCols, (c) => {
        return {
            id: c,
            value: c,
        };
    });
    const textCols = map(_textCols, (c) => {
        return {
            id: c,
            value: c,
        };
    });
    const defaultOpts = getCustomGeoMenuOpts({ geometryType, numberCols, textCols });
    const _menuClick = (info) => {
        const { key, keyPath } = info;
        setPopupVisible(false);
        if (key === i18nMenu.removeVisualization) {
            setNoVisual();
            updateRenderCurrentGeo();
        }
        else if (key === i18nMenu.moveTo) {
            zoomToCurrentGeo();
        }
        if (keyPath.indexOf(i18nMenu.hoverInteraction) > -1) {
            const colId = getColUuid({ col: key });
            // setColSelectedList({ selected: [key] });
            const fields = colId ? [colId] : [];
            updateHoverVisual({ fields });
            updateRenderCurrentGeo();
        }
        else if (keyPath.indexOf(i18nMenu.displayField) > -1) {
            const colId = getColUuid({ col: key });
            // setColSelectedList({ selected: [key] });
            const fields = colId ? [colId] : [];
            updateLabelVisual({ fields });
            updateRenderCurrentGeo();
        }
        else if (keyPath.indexOf(i18nMenu.classificationVisualization) > -1) {
            addTypeVisual(key).then(() => {
                updateRenderCurrentGeo();
            });
        }
        else if (keyPath.indexOf(i18nMenu.numericalVisualization) > -1) {
            addNumberVisual(key).then(() => {
                updateRenderCurrentGeo();
            });
        }
    };
    const _setPopupVisible = () => {
        setPopupVisible(!popupVisible);
    };
    const getMenuTip = () => {
        return (React.createElement("div", { ref: refWrap },
            React.createElement(MapMenuCustom, { options: defaultOpts, onClick: _menuClick, getTooltipPopupContainer: getPopupContainer })));
    };
    useClickAway(ref, (e) => {
        const isWrap = !!(refWrap.current && refWrap.current.contains(e.target));
        if (!isWrap) {
            // todo 优化 报错
            setTimeout(() => {
                setPopupVisible && setPopupVisible(false);
            }, 200);
        }
    });
    const _getCurrentBreaks = () => {
        const currentBreaks = [];
        if (isCurrentTypeVisual) {
            // const col = getCol({ fieldId: typeVisual.fieldId });
            forEach(typeVisual === null || typeVisual === void 0 ? void 0 : typeVisual.breaks, (b) => {
                const data = getColumnValueById({ col: currentVisualField, id: b });
                currentBreaks.push(data === null || data === void 0 ? void 0 : data.value);
            });
        }
        return currentBreaks;
    };
    const _changeVisualColor = ({ color, index }) => {
        const type = isCurrentNumberVisual ? NUMBER_VISUAL : TYPE_VISUAL;
        changeVisualColor({
            color,
            index,
            type,
        });
        updateRenderCurrentGeo();
    };
    // const _getCurrentValueNameList = () => {
    //   // const col = getCol({ fieldId: typeVisual.fieldId });
    //   // const resp = getAllColValue({ col: currentVisualField });
    //   const data = getColumnValueNameList({ col: currentVisualField });
    //   return data;
    // };
    // todo _changeTypeVisual
    const _changeTypeVisual = (result) => {
        setColumnValue({ col: currentVisualField, values: result === null || result === void 0 ? void 0 : result.breaks });
        const breaks = map(result === null || result === void 0 ? void 0 : result.breaks, (b) => {
            const column = getColumnIdByValue({ col: currentVisualField, value: b });
            return column === null || column === void 0 ? void 0 : column.uuid;
        });
        const typeVisual = Object.assign(Object.assign(Object.assign({}, currentVisualDetail), result), { breaks });
        updateTypeVisual({ typeVisual });
        updateRenderCurrentGeo();
    };
    const _changeNumberVisual = (result) => {
        const { breaks } = result || {};
        const numberVisual = Object.assign(Object.assign({}, currentVisualDetail), { breaks });
        updateNumberVisual({ numberVisual });
        updateRenderCurrentGeo();
    };
    const currentDesText = getDesText(currentVisualType);
    const currentVisualDes = (field, text) => {
        return (React.createElement("div", { className: `${prefixCls}-visual-des` },
            "\u6309\u201C ",
            React.createElement("span", null, field || currentVisualField),
            " \u201D",
            text || currentDesText));
    };
    const _updateStyle = (style) => {
        updateDefaultStyle({ defaultStyle: style });
        updateRenderCurrentGeo();
    };
    return (React.createElement("div", { className: prefixCls, "data-test": "dm-map-visual-geo-card" },
        React.createElement("div", { className: `${prefixCls}-title` }, i18nMenu.visualizationBottomFence),
        React.createElement("div", { className: `${prefixCls}-content` },
            React.createElement(MapVisualGeoIcon, { className: `${prefixCls}-icon`, type: geometryType, 
                // isHeat={isHeat}
                style: defaultStyle, updateStyle: _updateStyle }),
            React.createElement("div", { style: { paddingTop: 8, paddingRight: 8, flex: 1 } },
                React.createElement("div", { className: `${prefixCls}-text` },
                    React.createElement(TextShave, null, alias ? alias : objectType)),
                React.createElement("div", { className: `${prefixCls}-count` },
                    count,
                    i18nCards.data),
                isCurrentNumberVisual ||
                    (isCurrentTypeVisual && (React.createElement("div", { className: `${prefixCls}-visual` },
                        React.createElement("div", { className: `${prefixCls}-visual-line` },
                            currentVisualDes(),
                            isCurrentTypeVisual && (React.createElement(MapTypeSetting, { breaks: _getCurrentBreaks(), visual: typeVisual, packageInfo: geoPackage, col: getCol({ fieldId: typeVisual === null || typeVisual === void 0 ? void 0 : typeVisual.fieldId }), 
                                // getValue={_getCurrentValueNameList}
                                changeTypeVisual: _changeTypeVisual },
                                React.createElement(Icon, { icon: "edit", className: `${prefixCls}-edit-icon` }))),
                            isCurrentNumberVisual && (React.createElement(DataGroupBy, { breaks: currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.breaks, data: currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.breaks, onOk: _changeNumberVisual },
                                React.createElement(Icon, { icon: "edit", className: `${prefixCls}-edit-icon` })))),
                        isCurrentTypeVisual && (React.createElement(TextColorSegmentation, { icons: [getIcon(geometryType)], breaks: _getCurrentBreaks(), colors: typeVisual === null || typeVisual === void 0 ? void 0 : typeVisual.colors, changeVisualColor: _changeVisualColor, iconInfo: iconInfo })),
                        isCurrentNumberVisual && (React.createElement(NumberColorSegmentation, { icons: [], breaks: numberVisual === null || numberVisual === void 0 ? void 0 : numberVisual.breaks, colors: numberVisual === null || numberVisual === void 0 ? void 0 : numberVisual.colors, changeVisualColor: _changeVisualColor, iconInfo: iconInfo, getPopupContainer: getPopupContainer }))))),
                React.createElement("div", { className: `${prefixCls}-action` },
                    React.createElement(Dropdown, { placement: "bottomRight", open: popupVisible, dropdownRender: getMenuTip, getPopupContainer: getPopupContainer },
                        React.createElement("div", { ref: ref, className: "default-menu", onClick: _setPopupVisible },
                            React.createElement(Icon, { icon: "more", size: 16 }))))))));
});
var MapVisualGeoCard$1 = MapVisualGeoCard;

export { MapVisualGeoCard$1 as default };
