import { v as i18n$1, lg as LAYERS, w as appContext, i as __read, M as MapTypeSet, lh as splitFilterBy, by as MapUIStyleTypeSet, an as DraggableWrap, y as IconButton, ar as Tooltip, bA as RadioGroup, a6 as Input, I as Icon, a0 as Dropmenu, li as hasPermission, aN as Previleges, aM as Authorized, aq as Button, b as __awaiter, c as __generator, t as toastApi, s as __assign, h as __spreadArray } from './MapEditView-24782753.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-53f7d8b4.js';
import 'maptalks';
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 'perf-request';
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-use';
import 'react-rnd';
import 'react-beautiful-dnd';

var useEffect = React.useEffect, useState = React.useState;
var i18n = i18n$1.mapEdit.viewCollection;
var prefixCls = 'dm-map-view-collection';
var SHARE_TO_APP = 'SHARE_TO_APP';
var SHARE_TO_USER = 'SHARE_TO_USER';
var menusUser = [{ title: i18n.shareToApp, key: SHARE_TO_APP }];
var menusApp = [{ title: i18n.shareToUser, key: SHARE_TO_USER }];
var opt4 = [
    { label: i18n.app, value: LAYERS.app },
    { label: i18n.user, value: LAYERS.user },
];
var MapViewCollection = observer(function (props) {
    var onClose = props.onClose;
    var routeStore = React.useContext(appContext.getContext()).routeStore;
    var MapViewCollectionStore = routeStore.MapViewCollectionStore, EmitStore = routeStore.EmitStore, MapInfoStore = routeStore.MapInfoStore, MapSettingStore = routeStore.MapSettingStore, type = routeStore.type;
    var setMapPosition = EmitStore.setMapPosition;
    var getMapInfo = MapInfoStore.getMapInfo;
    var interfaceStyle = MapSettingStore.interfaceStyle;
    var viewCollection = MapViewCollectionStore.viewCollection, layers = MapViewCollectionStore.layers, setLayers = MapViewCollectionStore.setLayers, viewCollectionApp = MapViewCollectionStore.viewCollectionApp, viewCollectionUser = MapViewCollectionStore.viewCollectionUser, setViewCollectionUser = MapViewCollectionStore.setViewCollectionUser, setViewCollectionApp = MapViewCollectionStore.setViewCollectionApp, defaultView = MapViewCollectionStore.defaultView, saveViewCollectionPreference = MapViewCollectionStore.saveViewCollectionPreference, deleteView = MapViewCollectionStore.deleteView;
    var _a = __read(useState(''), 2), search = _a[0], setSearch = _a[1];
    var _b = __read(useState(false), 2), add = _b[0], setAdd = _b[1];
    var _c = __read(useState(''), 2), editId = _c[0], setEditId = _c[1];
    var _d = __read(useState(''), 2), newName = _d[0], setNewName = _d[1];
    var _e = __read(useState(viewCollection), 2), _viewCollection = _e[0], setVC = _e[1];
    var ref = React.useRef(null);
    var isAddPage = type === MapTypeSet.add;
    useEffect(function () {
        setVC(viewCollection);
    }, [viewCollection]);
    var _setView = function (options) {
        setMapPosition(options);
    };
    var _deleteView = function (options) {
        deleteView(options.id);
    };
    var _collectView = function () {
        setAdd(true);
    };
    var _searchChange = function (e) {
        var value = e.target.value;
        setSearch(value);
    };
    var _addNameChange = function (e) {
        var value = e.target.value;
        setNewName(value);
    };
    var _changeViewName = function (e, id) {
        var value = e.target.value;
        var view = map(_viewCollection, function (v) {
            if (v.id === id) {
                v.name = value;
            }
            return v;
        });
        setVC(view);
    };
    var _addNameBlur = function (options) { return __awaiter(void 0, void 0, void 0, function () {
        var _a, _b, name, _c, _layers, mapInfo, view, viewCollection;
        return __generator(this, function (_d) {
            switch (_d.label) {
                case 0:
                    _a = options || {}, _b = _a.name, name = _b === void 0 ? newName : _b, _c = _a._layers, _layers = _c === void 0 ? layers : _c;
                    if (!name) {
                        setAdd(false);
                        return [2 /*return*/];
                    }
                    mapInfo = getMapInfo();
                    view = __assign({ name: name, id: v4() }, mapInfo);
                    if (_layers === 'user') {
                        viewCollection = __spreadArray(__spreadArray([], __read(viewCollectionUser), false), [view], false);
                        setViewCollectionUser(viewCollection);
                    }
                    else if (_layers === 'app') {
                        viewCollection = __spreadArray(__spreadArray([], __read(viewCollectionApp), false), [view], false);
                        setViewCollectionApp(viewCollection);
                    }
                    setAdd(false);
                    return [4 /*yield*/, saveViewCollectionPreference(_layers, viewCollection)];
                case 1:
                    _d.sent();
                    if (!options) {
                        toastApi.success(i18n.help3({ text: _layers }));
                    }
                    else {
                        toastApi.success(i18n.shareSuccess);
                    }
                    setNewName('');
                    return [2 /*return*/];
            }
        });
    }); };
    var _editNameBlur = function (e) {
        var name = e.target.value;
        var lock = false;
        var viewApp = map(viewCollectionApp.slice(), function (v) {
            if (v.id === editId) {
                v.name = name;
                lock = true;
            }
            return v;
        });
        setViewCollectionApp(viewApp);
        if (!lock) {
            var viewUser = map(viewCollectionUser.slice(), function (v) {
                if (v.id === editId) {
                    v.name = name;
                    lock = true;
                }
                return v;
            });
            setViewCollectionUser(viewUser);
        }
        setEditId('');
        saveViewCollectionPreference();
    };
    var _resetView = function () {
        _setView(defaultView);
    };
    var viewList = splitFilterBy(_viewCollection, search, 'name');
    var theme = React.useMemo(function () {
        return interfaceStyle === MapUIStyleTypeSet.light ? 'light' : 'dark';
    }, [interfaceStyle]);
    return (React.createElement("div", { "data-theme": theme, "data-test": "dm-map-view-collection" },
        React.createElement(DraggableWrap, { bounds: false },
            React.createElement("div", { className: prefixCls, ref: ref },
                React.createElement(IconButton, { className: "".concat(prefixCls, "-close"), icon: "close", type: "only-icon", onClick: onClose }),
                React.createElement("div", { className: "".concat(prefixCls, "-name") },
                    i18n.viewCollection,
                    React.createElement(Tooltip, { title: React.createElement("div", null,
                            i18n.help1,
                            React.createElement("br", null),
                            i18n.help2) },
                        React.createElement(IconButton, { className: "".concat(prefixCls, "-help"), icon: "help", type: "only-icon" }))),
                React.createElement(RadioGroup, { className: "".concat(prefixCls, "-radio-group"), radioType: 'nav', defaultValue: layers, options: opt4, onChange: function (value) {
                        setLayers(value);
                    } }),
                React.createElement("div", { className: "".concat(prefixCls, "-filter") },
                    React.createElement(Input, { className: "".concat(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: "".concat(prefixCls, "-list-item mt4"), onClick: _resetView }, i18n.resetDefaultView),
                    React.createElement("div", { className: "".concat(prefixCls, "-gap") }))),
                React.createElement("div", { className: "".concat(prefixCls, "-list-scroll") },
                    size(viewList) === 0 && !add && React.createElement(PromptPlaceholder, { description: i18n.noCollection }),
                    React.createElement("div", null,
                        map(viewList, function (v) {
                            if (v.id === editId) {
                                return (React.createElement(Input, { type: "menu-bg", value: v.name, onChange: function (e) { return _changeViewName(e, v.id); }, block: true, autoFocus: true, onBlur: _editNameBlur, onPressEnter: _editNameBlur }));
                            }
                            return (React.createElement("div", { key: v.id, className: "".concat(prefixCls, "-list-item mb4") },
                                React.createElement(Icon, { className: "".concat(prefixCls, "-list-item-icon ").concat(prefixCls, "-exit-icon"), icon: "exit", onClick: function () { return _setView(v); }, size: 14 }),
                                React.createElement("div", { style: { display: 'flex', alignItems: 'center', flex: 1 }, onClick: function () { return _setView(v); } }, v.name),
                                React.createElement(IconButton, { icon: "edit", type: "only-icon", className: "".concat(prefixCls, "-list-item-icon"), onClick: function () { return setEditId(v.id); } }),
                                React.createElement(Dropmenu, { className: "".concat(prefixCls, "-list-item-icon"), menus: layers === LAYERS.app
                                        ? menusApp
                                        : hasPermission(Previleges.updateAppPreference)
                                            ? menusUser
                                            : [], icon: 'more', onClickMenuItem: function (_a) {
                                        var key = _a.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: function () { return ref.current; } }),
                                React.createElement(IconButton, { icon: "close", type: "only-icon", className: "".concat(prefixCls, "-list-item-icon"), onClick: function () { return _deleteView(v); } })));
                        }),
                        add && (React.createElement(Input, { type: "menu-bg", value: newName, onChange: _addNameChange, block: true, autoFocus: true, onBlur: function () { return _addNameBlur(); }, onPressEnter: function () { return _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 };
