import { p as i18n$1, lg as LAYERS, q as appContext, M as MapTypeSet, lh as splitFilterBy, bu as MapUIStyleTypeSet, li as hasPermission, aI as Previleges, ai as DraggableWrap, s as IconButton, am as Tooltip, b4 as RadioGroup, a1 as Input, y as Scrollbar, I as Icon, W as Dropmenu, aH as Authorized, al as Button, a as __awaiter, t as toastApi } from './MapEditView-f6381866.js';
import * as React from 'react';
import { observer } from 'mobx-react';
import { size, map } from 'lodash';
import { v4 } from 'uuid';
import { P as PromptPlaceholder } from './index-e5d60647.js';
import classNames from 'classnames';
import 'perfect-scrollbar';
import 'maptalks';
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 '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-use';
import 'react-rnd';
import 'react-beautiful-dnd';

const { useEffect, useState } = React;
const i18n = i18n$1.mapEdit.viewCollection;
const prefixCls = 'dm-map-view-collection';
const SHARE_TO_APP = 'SHARE_TO_APP';
const SHARE_TO_USER = 'SHARE_TO_USER';
const menusUser = [{ title: i18n.shareToApp, key: SHARE_TO_APP }];
const menusApp = [{ title: i18n.shareToUser, key: SHARE_TO_USER }];
const opt4 = [
    { label: i18n.app, value: LAYERS.app },
    { label: i18n.user, value: LAYERS.user },
];
const MapViewCollection = observer((props) => {
    const { onClose } = props;
    const { routeStore } = React.useContext(appContext.getContext());
    const { MapViewCollectionStore, EmitStore, MapInfoStore, MapSettingStore, type } = routeStore;
    const { setMapPosition } = EmitStore;
    const { getMapInfo } = MapInfoStore;
    const { interfaceStyle } = MapSettingStore;
    const { viewCollection, layers, setLayers, viewCollectionApp, viewCollectionUser, setViewCollectionUser, setViewCollectionApp, defaultView, saveViewCollectionPreference, deleteView, setView, currentView, } = MapViewCollectionStore;
    const [search, setSearch] = useState('');
    const [add, setAdd] = useState(false);
    const [editId, setEditId] = useState('');
    const [newName, setNewName] = useState('');
    const [_viewCollection, setVC] = useState(viewCollection);
    const ref = React.useRef(null);
    const isAddPage = type === MapTypeSet.add;
    useEffect(() => {
        setVC(viewCollection);
    }, [viewCollection]);
    const _setView = (options) => {
        setMapPosition(options);
        setView(options);
    };
    const _deleteView = (options) => {
        deleteView(options.id);
    };
    const _collectView = () => {
        setAdd(true);
    };
    const _searchChange = (e) => {
        const value = e.target.value;
        setSearch(value);
    };
    const _addNameChange = (e) => {
        const value = e.target.value;
        setNewName(value);
    };
    const _changeViewName = (e, id) => {
        const value = e.target.value;
        const view = map(_viewCollection, (v) => {
            if (v.id === id) {
                v.name = value;
            }
            return v;
        });
        setVC(view);
    };
    const _addNameBlur = (options) => __awaiter(void 0, void 0, void 0, function* () {
        const { name = newName, _layers = layers } = options || {};
        if (!name) {
            setAdd(false);
            return;
        }
        const mapInfo = getMapInfo();
        const view = Object.assign({ name: name, id: v4() }, mapInfo);
        let viewCollection;
        if (_layers === 'user') {
            viewCollection = [...viewCollectionUser, view];
            setViewCollectionUser(viewCollection);
        }
        else if (_layers === 'app') {
            viewCollection = [...viewCollectionApp, view];
            setViewCollectionApp(viewCollection);
        }
        setAdd(false);
        yield saveViewCollectionPreference(_layers, viewCollection);
        if (!options) {
            toastApi.success(i18n.help3({ text: _layers }));
        }
        else {
            toastApi.success(i18n.shareSuccess);
        }
        setNewName('');
    });
    const _editNameBlur = (e) => {
        const name = e.target.value;
        let lock = false;
        const viewApp = map(viewCollectionApp.slice(), (v) => {
            if (v.id === editId) {
                v.name = name;
                lock = true;
            }
            return v;
        });
        setViewCollectionApp(viewApp);
        if (!lock) {
            const viewUser = map(viewCollectionUser.slice(), (v) => {
                if (v.id === editId) {
                    v.name = name;
                    lock = true;
                }
                return v;
            });
            setViewCollectionUser(viewUser);
        }
        setEditId('');
        saveViewCollectionPreference();
    };
    const _resetView = () => {
        _setView(defaultView);
    };
    const viewList = splitFilterBy(_viewCollection, search, 'name');
    const theme = React.useMemo(() => {
        return interfaceStyle === MapUIStyleTypeSet.light ? 'light' : 'dark';
    }, [interfaceStyle]);
    const containerRef = React.useRef(null);
    const [height, setHeight] = useState(0);
    useEffect(() => {
        var _a;
        if (containerRef.current) {
            setHeight(((_a = containerRef.current.closest('.dm-map-panel')) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0);
        }
    }, []);
    const optMenus = layers === LAYERS.app
        ? menusApp
        : hasPermission(Previleges.updateAppPreference)
            ? menusUser
            : [];
    return (React.createElement("div", { "data-theme": theme, "data-test": "dm-map-view-collection", ref: containerRef }, !!height && (React.createElement(DraggableWrap, { bounds: false, defaultPosition: {
            x: 5,
            y: height > 300 ? -100 : 0,
        } },
        React.createElement("div", { className: prefixCls, ref: ref, style: {
                height: height - 240,
            } },
            React.createElement(IconButton, { className: `${prefixCls}-close`, icon: "close", type: "only-icon", onClick: onClose }),
            React.createElement("div", { className: `${prefixCls}-name` },
                i18n.viewCollection,
                React.createElement(Tooltip, { title: React.createElement("div", null,
                        i18n.help1,
                        React.createElement("br", null),
                        i18n.help2) },
                    React.createElement(IconButton, { className: `${prefixCls}-help`, icon: "help", type: "only-icon" }))),
            React.createElement(RadioGroup, { className: `${prefixCls}-radio-group`, radioType: 'nav', defaultValue: layers, options: opt4, onChange: (value) => {
                    setLayers(value);
                } }),
            React.createElement("div", { className: `${prefixCls}-filter` },
                React.createElement(Input, { className: `${prefixCls}-filter-input mr4`, placeholder: i18n.placeholder, size: "compact", block: true, defaultValue: search, onChange: _searchChange, prefixIcon: "search" })),
            !isAddPage && (React.createElement(React.Fragment, null,
                React.createElement("div", { className: `${prefixCls}-list-item mt4`, onClick: _resetView }, i18n.resetDefaultView),
                React.createElement("div", { className: `${prefixCls}-gap` }))),
            React.createElement(Scrollbar, { className: `${prefixCls}-list-scroll`, type: "menu-bg" },
                size(viewList) === 0 && !add && (React.createElement(PromptPlaceholder, { description: i18n.noCollection })),
                React.createElement("div", null,
                    map(viewList, (v) => {
                        if (v.id === editId) {
                            return (React.createElement(Input, { type: "menu-bg", value: v.name, onChange: (e) => _changeViewName(e, v.id), block: true, autoFocus: true, onBlur: _editNameBlur, onPressEnter: _editNameBlur }));
                        }
                        return (React.createElement("div", { key: v.id, className: classNames(`${prefixCls}-list-item mb4`, {
                                [`${prefixCls}-list-item-active`]: (currentView === null || currentView === void 0 ? void 0 : currentView.id) === v.id,
                            }) },
                            React.createElement(Icon, { className: `${prefixCls}-list-item-icon ${prefixCls}-exit-icon`, icon: "exit", onClick: () => _setView(v), size: 14 }),
                            React.createElement(Tooltip, { title: v.name, placement: "top", overlayStyle: {
                                    pointerEvents: 'none',
                                } },
                                React.createElement("div", { className: `${prefixCls}-list-item-name`, onClick: () => _setView(v) },
                                    React.createElement("div", { className: `${prefixCls}-list-item-name-text` }, v.name))),
                            React.createElement(IconButton, { icon: "edit", type: "only-icon", className: `${prefixCls}-list-item-icon`, onClick: () => setEditId(v.id) }),
                            !!size(optMenus) && (React.createElement(Dropmenu, { className: `${prefixCls}-list-item-icon`, menus: optMenus, icon: 'more', onClickMenuItem: ({ key }) => {
                                    if (key === SHARE_TO_APP) {
                                        _addNameBlur({ name: v.name, _layers: LAYERS.app });
                                    }
                                    else if (key === SHARE_TO_USER) {
                                        _addNameBlur({ name: v.name, _layers: LAYERS.user });
                                    }
                                }, getPopupContainer: () => ref.current })),
                            React.createElement(IconButton, { icon: "close", type: "only-icon", className: `${prefixCls}-list-item-icon`, onClick: () => _deleteView(v) })));
                    }),
                    add && (React.createElement(Input, { type: "menu-bg", value: newName, onChange: _addNameChange, block: true, autoFocus: true, onBlur: () => _addNameBlur(), onPressEnter: () => _addNameBlur() })))),
            layers === LAYERS.app && (React.createElement(Authorized, { authority: Previleges.updateAppPreference },
                React.createElement(Button, { size: "compact", onClick: _collectView }, i18n.collectCurrentView))),
            layers === LAYERS.user && (React.createElement(Button, { size: "compact", onClick: _collectView }, i18n.collectCurrentView)))))));
});
var MapViewCollection$1 = MapViewCollection;

export { MapViewCollection$1 as default };
