import * as React from 'react';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import { p as i18n$1, q as appContext, u as useStaticCallback, bi as getDesText, I as Icon, bm as TextShave, b8 as getIcon, G as GEO_TYPES, w as GeometryType, bj as BY_COUNT, l as iconsUtil } from './MapEditView-f6381866.js';
import { find, some, size, map, forEach } from 'lodash';
import { M as MapVisualListItem, S as SimpleEye } from './MapVisualListItem-5b83fe23.js';
import { M as MapVisualGeoIcon } from './MapVisualGeoIcon-2a18409b.js';
import { N as NumberColorSegmentation, T as TextColorSegmentation } from './TextColorSegmentation-a1171529.js';
import { useMount, useCreation } from 'ahooks';
import { g as getCardIconInfo, a as getCurrentVisualConfig } 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 './index-2d7fc1f3.js';
import './MapColorPicker-dcab48f0.js';
import './index-23029f1e.js';
import './index-f7347652.js';
import './useDataValue-6bd3790f.js';

const i18n = i18n$1.mapEdit.cards;
const { useRef } = React;
const prefixCls = 'dm-map-visual-simple-card';
const MapVisualSimpleCard = observer((props) => {
    const ref = useRef(null);
    const { routeStore } = React.useContext(appContext.getContext());
    const { CardsStore, defaultIcon, customIconPrefInfo, getPopupContainer } = routeStore;
    const { getIconUrl, getIconColorPref, iconCache } = iconsUtil;
    const { get3DPolygonConfig, getCardsHeight } = CardsStore;
    // const [popupVisible, setPopupVisible] = useState(false);
    const { card, getSuppPackage, provided } = props;
    const { inRange, isStatic, hidden, 
    // isFence,
    uuid, 
    // cardId,
    visualList, 
    // count,
    defaultStyle, changeCurrentVisual, 
    // deleteVisual,
    // addNumberVisualList,
    // addTypeVisual,
    // addHeatVisual,
    // addGridHeatVisual,
    // updateTextVisual,
    // openTextVisualSetting,
    // updateDefaultStyle,
    changeVisualIgnore, sizeVisual, changeCardHidden,
    // _currentVisualConfig,
     } = card;
    useMount(() => getCardsHeight());
    const iconInfo = useCreation(() => {
        return getCardIconInfo({
            getIconColorPref,
            getIconUrl,
            iconCache,
            customIconPrefInfo,
            defaultIcon,
        });
    }, [
        getIconColorPref,
        getIconUrl,
        defaultIcon,
        customIconPrefInfo,
        iconCache.customIconList,
        iconCache.defaultIconList,
    ]);
    // 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,
    //   }),
    //   [
    //     customIconPrefInfo,
    //     defaultIcon,
    //     getIconColorPref,
    //     getIconUrl,
    //     iconCache.customIconList,
    //     iconCache.defaultIconList,
    //   ],
    // );
    // const { color, icon } = defaultStyle;
    const packageInfo = getSuppPackage(uuid);
    const { objectType, geometryType, source, packageUuid, getCol, 
    // getColUuid,
    getColumnValueById, } = packageInfo;
    // console.log(packageInfo, 'packageInfo');
    // const {} =
    const _currentVisual = find(visualList, { isCurrent: true });
    const _changeHidden = useStaticCallback(() => {
        changeCardHidden(!hidden);
    });
    // const _currentVisualConfig = () => {
    //   const { id, fieldId } = _currentVisual || {};
    //   let field = getCol({ uuid, fieldId });
    //   const visual = card[id as string];
    //   const current = find(visual, { fieldId });
    //   if (fieldId === BY_COUNT) {
    //     field = i18n.point;
    //   }
    //   const isHeat = id === HEAT_VISUAL || id === GRID_HEAT_VISUAL;
    //   const isCurrentHeatVisual = id === HEAT_VISUAL;
    //   const isCurrentGridHeatVisual = id === GRID_HEAT_VISUAL;
    //   const isCurrentTypeVisual = id === TYPE_VISUAL;
    //   const isCurrentNumberVisual = id === NUMBER_VISUAL;
    //   const isFlow = id === FLOW_VISUAL;
    //   const isPolygon3DVisual = id?.startsWith(PTD_VISUAL);
    //   const isPointToPoint = geometryType === GEO_TYPES[GeometryType.pointToPoint];
    //   const isPoint = geometryType === GEO_TYPES[GeometryType.point];
    //   const isPolygon = geometryType === GEO_TYPES[GeometryType.polygon];
    //   const isLine = geometryType === GEO_TYPES[GeometryType.line];
    //   const type = {
    //     isHeat,
    //     isCurrentHeatVisual,
    //     isCurrentGridHeatVisual,
    //     isCurrentTypeVisual,
    //     isCurrentNumberVisual,
    //     isFlow,
    //     isPolygon3DVisual,
    //     isPointToPoint,
    //     isPoint,
    //     isPolygon,
    //     isLine,
    //   };
    //   return [current, id, field, fieldId, type];
    // };
    const [currentVisualDetail, currentVisualType, currentVisualField, currentVisualFieldId, currentVisualOpinion,] = getCurrentVisualConfig({
        currentVisual: _currentVisual,
        card: card,
        packageInfo,
    });
    const { isHeat, 
    // isCurrentHeatVisual,
    // isCurrentGridHeatVisual,
    isCurrentTypeVisual, isCurrentNumberVisual, isFlow, isPolygon3DVisual, isPointToPoint, isPoint, isPolygon, isLine, } = currentVisualOpinion;
    console.log(currentVisualDetail, 'currentVisualDetail');
    // const isPointToPoint = geometryType === GEO_TYPES[GeometryType.pointToPoint];
    // const isMarket = source === 'market';
    // const isHeat = currentVisualType === 'heatVisual' || currentVisualType === 'gridHeatVisual';
    // const isFlow = currentVisualType === FLOW_VISUAL;
    const currentDesText = getDesText(currentVisualType);
    // const isCurrentTypeVisual = currentVisualType === 'typeVisual';
    // 获取三维面 config
    const polygon3DConfig = get3DPolygonConfig({
        card,
        visual: _currentVisual,
        objectType,
        source,
        getCol,
        packageUuid,
        getColumnValueById,
    });
    // const
    const _getCurrentBreaks = () => {
        const currentBreaks = [];
        if (isCurrentTypeVisual) {
            forEach(currentVisualDetail.breaks, (b) => {
                const data = getColumnValueById({ uuid, col: currentVisualField, id: b });
                currentBreaks.push(data === null || data === void 0 ? void 0 : data.value);
            });
        }
        if (isFlow) {
            const field = getCol({ uuid, fieldId: currentVisualDetail.colorFieldId });
            forEach(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 hasVisualList = some(visualList, { isCurrent: false });
    const _textClick = useStaticCallback((node) => {
        changeVisualIgnore({
            type: currentVisualType,
            fieldId: currentVisualFieldId,
            index: Number(node),
        });
    });
    // console.log(currentVisualField, 'currentVisualField');
    /**
     * 无可视化 使用objectType/card.name
     * 有可视化 使用可视化名称
     *
     **/
    const getShowTitle = () => {
        if (isPolygon3DVisual) {
            return (_currentVisual === null || _currentVisual === void 0 ? void 0 : _currentVisual.name) || card.name;
        }
        if (isPoint || isPolygon || isLine) {
            if (currentVisualField) {
                return (_currentVisual === null || _currentVisual === void 0 ? void 0 : _currentVisual.name) || card.name;
            }
            else {
                return card.name;
            }
        }
        if (isPointToPoint) {
            return (_currentVisual === null || _currentVisual === void 0 ? void 0 : _currentVisual.name) || card.name;
        }
    };
    // 三维面polygon3Dconfig来展示相关内容
    const polygon3DVisual = () => {
        if (polygon3DConfig && isPolygon3DVisual) {
            console.log(polygon3DConfig, 'polygon3DConfig');
            console.log(_currentVisual, '_currentVisual');
            console.log(isPolygon3DVisual, 'isPolygon3DVisual');
            const { colors, breaks, colorType } = polygon3DConfig;
            const _colors = colors;
            const isNumberColorType = colorType === 'numeric';
            const isTextColorType = colorType === 'text';
            if (isNumberColorType) {
                const dom = (React.createElement("div", { className: `${prefixCls}-content` },
                    React.createElement("div", { className: `${prefixCls}-content-title` },
                        React.createElement("div", { className: `${prefixCls}-text` },
                            React.createElement(TextShave, null, getShowTitle()))),
                    React.createElement("div", { style: { paddingLeft: 8 } },
                        React.createElement(NumberColorSegmentation, { direction: "column", breaks: breaks, icons: [getIcon(geometryType, defaultStyle)], colors: _colors, textClick: _textClick, ignore: polygon3DConfig.ignore, iconInfo: iconInfo, getPopupContainer: getPopupContainer }))));
                return dom;
            }
            if (isTextColorType) {
                const dom = (React.createElement("div", { className: `${prefixCls}-content` },
                    React.createElement("div", { className: `${prefixCls}-content-title` },
                        React.createElement("div", { className: `${prefixCls}-text` },
                            React.createElement(TextShave, null, getShowTitle()))),
                    React.createElement("div", { style: { paddingLeft: 8 } },
                        React.createElement(TextColorSegmentation, { column: 1, icons: [getIcon(geometryType, defaultStyle)], breaks: breaks, colors: _colors, textClick: _textClick, ignore: polygon3DConfig.ignore, iconInfo: iconInfo }))));
                return dom;
            }
        }
    };
    /**
     * todo 双地理 非流向图
     * 无可视化
     * 有可视化
     **/
    // const pointToPointVisual = () => {
    //   if (isPointToPoint && !isFlow) {
    //     console.log(currentVisualDetail, 'currentVisualDetail');
    //     console.log(isCurrentNumberVisual, 'isCurrentNumberVisual');
    //     const dom = (
    //       <div className={`${prefixCls}-content-normal`}>
    //         <MapVisualGeoIcon
    //           isFlow={isFlow}
    //           className={`${prefixCls}-icon`}
    //           type={geometryType}
    //           style={defaultStyle}
    //         />
    //         <div className={`${prefixCls}-title`}>
    //           <div className={`${prefixCls}-text`}>
    //             <TextShave>{getShowTitle()}</TextShave>
    //           </div>
    //         </div>
    //
    //         {isCurrentNumberVisual && (
    //           <div style={{ paddingLeft: 8 }}>
    //             <NumberColorSegmentation
    //               direction="column"
    //               icons={
    //                 geometryType === GEO_TYPES[GeometryType.point] ? currentVisualDetail.icons : []
    //               }
    //               breaks={currentVisualDetail.breaks}
    //               colors={currentVisualDetail.colors}
    //               textClick={_textClick}
    //               ignore={currentVisualDetail.ignore}
    //             />
    //           </div>
    //         )}
    //         {isCurrentTypeVisual && (
    //           <div style={{ paddingLeft: 8 }}>
    //             <TextColorSegmentation
    //               column={1}
    //               icons={
    //                 geometryType === GEO_TYPES[GeometryType.point]
    //                   ? currentVisualDetail.icons
    //                   : [getIcon(geometryType, defaultStyle)]
    //               }
    //               breaks={_getCurrentBreaks()}
    //               colors={currentVisualDetail.colors}
    //               textClick={_textClick}
    //               ignore={currentVisualDetail.ignore}
    //             />
    //           </div>
    //         )}
    //       </div>
    //     );
    //     return dom;
    //   }
    // };
    // 流向图部分
    const flowVisual = () => {
        if (isFlow) {
            if (currentVisualDetail.colorFieldId) {
                return (React.createElement("div", { className: `${prefixCls}-content` },
                    React.createElement("div", { className: `${prefixCls}-content-title` },
                        React.createElement("div", { className: `${prefixCls}-text` },
                            React.createElement(TextShave, null, getShowTitle()))),
                    currentVisualDetail.colorType === 'number' && (React.createElement("div", { style: { paddingLeft: 8 } },
                        React.createElement(NumberColorSegmentation, { direction: "column", icons: [getIcon('flow', defaultStyle)], breaks: currentVisualDetail.breaks, colors: currentVisualDetail.colors, textClick: _textClick, ignore: currentVisualDetail.ignore, iconInfo: iconInfo, getPopupContainer: getPopupContainer }))),
                    currentVisualDetail.colorType === 'type' && (React.createElement("div", { style: { paddingLeft: 8 } },
                        React.createElement(TextColorSegmentation, { column: 1, icons: [getIcon('flow', {})], breaks: _getCurrentBreaks(), colors: currentVisualDetail.colors, textClick: _textClick, ignore: currentVisualDetail.ignore, iconInfo: iconInfo })))));
            }
            if (!currentVisualDetail.colorFieldId) {
                return (React.createElement("div", { className: `${prefixCls}-content` },
                    React.createElement("div", { className: `${prefixCls}-content-title` },
                        React.createElement("div", { className: `${prefixCls}-text` },
                            React.createElement(TextShave, null, getShowTitle()))),
                    currentVisualDetail.colorType === 'number' && (React.createElement("div", { style: { paddingLeft: 8 } },
                        React.createElement(NumberColorSegmentation, { direction: "column", icons: [], breaks: currentVisualDetail.breaks, colors: currentVisualDetail.colors, textClick: _textClick, ignore: currentVisualDetail.ignore, iconInfo: iconInfo, getPopupContainer: getPopupContainer }))),
                    currentVisualDetail.colorType === 'type' && (React.createElement("div", { style: { paddingLeft: 8 } },
                        React.createElement(TextColorSegmentation, { column: 1, icons: [getIcon('flow', {})], breaks: _getCurrentBreaks(), colors: currentVisualDetail.colors, textClick: _textClick, ignore: currentVisualDetail.ignore, iconInfo: iconInfo })))));
            }
        }
    };
    return (React.createElement("div", { className: classNames(prefixCls, {
            [`${prefixCls}-hidden`]: hidden || !inRange,
        }), ref: ref },
        isStatic && (React.createElement("div", { className: `${prefixCls}-handle` },
            React.createElement("div", Object.assign({ className: `${prefixCls}-static` }, provided === null || provided === void 0 ? void 0 : provided.dragHandleProps),
                React.createElement(Icon, { icon: "drag-handle-cornor", size: 123 })))),
        !isStatic && (React.createElement("div", { className: `${prefixCls}-handle` },
            React.createElement("div", Object.assign({ className: `${prefixCls}-drag-handle` }, provided === null || provided === void 0 ? void 0 : provided.dragHandleProps),
                React.createElement(Icon, { icon: "drag-handle-cornor", size: 12 })))),
        currentVisualField && !hidden && (React.createElement("div", { className: classNames(`${prefixCls}-content`, {
                [`${prefixCls}-content-pb0`]: hasVisualList,
            }) },
            React.createElement("div", { className: `${prefixCls}-content-title` },
                React.createElement(TextShave, null, getShowTitle())),
            isCurrentNumberVisual && (React.createElement("div", { style: { paddingLeft: 8 } },
                React.createElement(NumberColorSegmentation, { direction: "column", icons: isPoint || isPointToPoint
                        ? currentVisualDetail.icons
                        : [getIcon(geometryType, defaultStyle)], breaks: currentVisualDetail.breaks, colors: currentVisualDetail.colors, textClick: _textClick, ignore: currentVisualDetail.ignore, iconInfo: iconInfo, getPopupContainer: getPopupContainer }))),
            isCurrentTypeVisual && (React.createElement("div", { style: { paddingLeft: 8 } },
                React.createElement(TextColorSegmentation, { column: 1, icons: isPoint || isPointToPoint
                        ? currentVisualDetail.icons
                        : [getIcon(geometryType, defaultStyle)], breaks: _getCurrentBreaks(), colors: currentVisualDetail.colors, textClick: _textClick, ignore: currentVisualDetail.ignore, iconInfo: iconInfo }))),
            isHeat && (React.createElement("div", { className: `${prefixCls}-heat` },
                React.createElement(MapVisualGeoIcon, { isHeat: true, className: `${prefixCls}-icon`, type: geometryType === GEO_TYPES[GeometryType.pointToPoint]
                        ? GEO_TYPES[GeometryType.point]
                        : geometryType, style: isFlow || isHeat ? currentVisualDetail : defaultStyle }),
                React.createElement("div", { className: `${prefixCls}-visual-name` }, (currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.name)
                    ? currentVisualDetail === null || currentVisualDetail === void 0 ? void 0 : currentVisualDetail.name
                    : `${i18n.by}“${currentVisualField}”${currentDesText}`))),
            size(sizeVisual) > 0 && (React.createElement("div", { className: `${prefixCls}-size-visual` },
                React.createElement("div", { className: `${prefixCls}-size-visual-icon` },
                    React.createElement(Icon, { icon: "location-size", size: 16 })),
                getCol({ uuid, fieldId: sizeVisual === null || sizeVisual === void 0 ? void 0 : sizeVisual.fieldId }))),
            hasVisualList && (React.createElement("div", { style: { padding: '0 2px', marginTop: 8 } }, map(visualList, (v) => {
                const { id, fieldId, isCurrent, name } = v || {};
                if (isCurrent)
                    return null;
                const visualText = getDesText(id);
                let field = getCol({ uuid, fieldId });
                if (fieldId === BY_COUNT) {
                    field = i18n.point;
                }
                const text = name ? name : `${i18n.by}“ ${field} ”${visualText}`;
                const _onSelect = () => {
                    changeCurrentVisual({ id, fieldId });
                };
                return (React.createElement(MapVisualListItem, { isSimpleCardsMode: true, key: id + fieldId, text: text, onSelect: _onSelect }));
            }))))),
        (!currentVisualField || hidden) && !isPolygon3DVisual && !isFlow && (React.createElement("div", { className: `${prefixCls}-content-normal` },
            React.createElement(MapVisualGeoIcon, { isHeat: isHeat, className: `${prefixCls}-icon`, type: geometryType, style: defaultStyle }),
            React.createElement("div", { className: `${prefixCls}-title` },
                React.createElement("div", { className: `${prefixCls}-text` },
                    React.createElement(TextShave, null, card.name))))),
        isPolygon3DVisual && polygon3DVisual(),
        isFlow && flowVisual(),
        React.createElement("div", { className: `${prefixCls}-action` },
            React.createElement(SimpleEye, { visible: !hidden, onClick: _changeHidden }))));
});
MapVisualSimpleCard.whyDidYouRender = true;
MapVisualSimpleCard.displayName = 'MapVisualSimpleCard';
var MapVisualSimpleCard$1 = MapVisualSimpleCard;

export { MapVisualSimpleCard$1 as default };
