import * as React from 'react';
import { useEffect, useCallback } from 'react';
import { am as LazyLoad, v as i18n, w as appContext, n as iconsUtil, i as __read, b as __awaiter, c as __generator, aM as Authorized, aN as Previleges, y as IconButton, a0 as Dropmenu, a6 as Input, aC as Select, s as __assign, bz as CreateFilter, aU as IconsUtil, bo as Tooltip, cK as getCustomIconList } from './MapEditView-24782753.js';
import classNames from 'classnames';
import { useMount } from 'ahooks';
import { observer } from 'mobx-react';

var ColorPanelWrapper$1 = LazyLoad(function () {
    return import('./index-7c04fb6e.js').then(function (res) { return res.ColorPanelWrapper; });
});
var useState$1 = React.useState, useRef = React.useRef;
var prefixCls$1 = 'dm-map-icon-setting';
var childrens = [
    {
        label: 'x0.2',
        value: 'x0.2',
        key: 0.2,
    },
    {
        label: 'x0.5',
        value: 'x0.5',
        key: 0.5,
    },
    {
        label: 'x0.8',
        value: 'x0.8',
        key: 0.8,
    },
    {
        label: 'x1',
        value: 'x1',
        key: 1,
    },
    {
        label: 'x2',
        value: 'x2',
        key: 2,
    },
    {
        label: 'x3',
        value: 'x3',
        key: 3,
    },
    {
        label: 'x4',
        value: 'x4',
        key: 4,
    },
];
var formatIconName = IconsUtil.formatIconName;
var customIconSortMenus = [
    { title: i18n.mapEdit.orderByName, key: 'byName' },
    { title: i18n.mapEdit.orderByLastUpdateTime, key: 'byUpdateTime' },
    { title: i18n.mapEdit.orderByUser, key: 'byUser' },
];
var MapPointSettingOverLay = observer(function (props) {
    var _a;
    var mapInstanceCanvas = React.useContext(appContext.getContext()).routeStore.mapInstanceCanvas;
    var toggleShowCustomIconSetting = iconsUtil.toggleShowCustomIconSetting, getIconColorPref = iconsUtil.getIconColorPref, getIconUrl = iconsUtil.getIconUrl, getIconLabel = iconsUtil.getIconLabel, iconCache = iconsUtil.iconCache;
    console.log(iconsUtil, 'iconsUtil');
    var _b = __read(useState$1(iconCache.customIconList), 2), customIcons = _b[0], setCustomIcons = _b[1];
    var defaultIcons = iconCache.defaultIconList;
    var _onChangeSearchText = props._onChangeSearchText, searchText = props.searchText, 
    // iconsType,
    _selectIcon = props._selectIcon, _style = props._style, _changeTimes = props._changeTimes, _onChange = props._onChange, onlyIcon = props.onlyIcon, onCancel = props.onCancel, iconType = props.iconType, handleCanvasColorPickerVisibleChange = props.handleCanvasColorPickerVisibleChange;
    var refPopup = useRef(null);
    var iconListRef = useRef(null);
    var i18n$1 = i18n.mapEdit.settingsPanel;
    var _c = __read(useState$1('byUser'), 2), currentOrder = _c[0], setCurrentOrder = _c[1];
    useMount(function () {
        setTimeout(function () {
            var _a;
            var id = (_a = _style === null || _style === void 0 ? void 0 : _style.icon) === null || _a === void 0 ? void 0 : _a.content;
            var _id = formatIconName({ name: id });
            jumpTo(iconType === 'custom' ? "custom".concat(_id) : _id);
        });
    });
    useEffect(function () {
        setCustomIcons(iconCache.customIconList);
    }, [iconCache.customIconList]);
    var jumpTo = function (id) {
        var SettingsRightDom = iconListRef.current;
        var idDom = (SettingsRightDom === null || SettingsRightDom === void 0 ? void 0 : SettingsRightDom.querySelector('#' + id)) ||
            (SettingsRightDom === null || SettingsRightDom === void 0 ? void 0 : SettingsRightDom.querySelector('.' + id));
        var pos = idDom ? idDom.offsetTop : 0;
        if (SettingsRightDom) {
            SettingsRightDom.scrollTo({
                top: pos,
                // behavior: 'smooth',
            });
        }
    };
    var _selectTimes = function (value) {
        var times = (value + '').replace(/x/g, ''); //option[0].key;
        _changeTimes(Number(times));
    };
    var renderIconList = function (list, iconType) { return (React.createElement(React.Fragment, null, (searchText ? list.filter(function (i) { return i.includes(searchText); }) : list).map(function (i) {
        var _a;
        var _b;
        return (React.createElement(Tooltip, { title: i, key: i, mouseEnterDelay: 0, mouseLeaveDelay: 0, getPopupContainer: function () { return refPopup.current || document.body; } },
            React.createElement("div", { id: iconType === 'custom'
                    ? "custom".concat(formatIconName({ name: i }))
                    : formatIconName({ name: i }), className: classNames("".concat(prefixCls$1, "-list-icon"), (_a = {},
                    _a["".concat(prefixCls$1, "-list-icon-selected")] = ((_b = _style === null || _style === void 0 ? void 0 : _style.icon) === null || _b === void 0 ? void 0 : _b.content) === i,
                    _a)), onClick: function () { return _selectIcon(i, iconType); } },
                getIconColorPref(i) ? (React.createElement("img", { src: getIconUrl(i), alt: "", className: "icon" })) : (React.createElement("div", { style: {
                        width: 24,
                        height: 24,
                        backgroundColor: (_style === null || _style === void 0 ? void 0 : _style.color) || '#4EFF4E',
                        WebkitMask: "url(".concat(getIconUrl(i), ") no-repeat center"),
                        mask: "url(".concat(getIconUrl(i), ") no-repeat center"),
                    } })),
                React.createElement("div", { className: "".concat(prefixCls$1, "-marker-name") }, getIconLabel(i)))));
    }))); };
    var queryOrder = useCallback(function (type) { return __awaiter(void 0, void 0, void 0, function () {
        var res, _a, app;
        var _b;
        return __generator(this, function (_c) {
            switch (_c.label) {
                case 0:
                    if (!(type === 'byUser')) return [3 /*break*/, 1];
                    return [2 /*return*/, iconCache.customIconList];
                case 1: return [4 /*yield*/, getCustomIconList(type)];
                case 2:
                    res = _c.sent();
                    _a = (((_b = res.data) === null || _b === void 0 ? void 0 : _b.result) || {}).app, app = _a === void 0 ? [] : _a;
                    return [2 /*return*/, app.map(function (name) { return ".".concat(name); })];
            }
        });
    }); }, [iconCache.customIconList]);
    useEffect(function () {
        var customIconList = iconCache.customIconList;
        queryOrder(currentOrder).then(function (iconListOrder) {
            if (iconListOrder.length === customIconList.length &&
                customIconList.every(function (i) { return iconListOrder.includes(i); })) {
                var sortedIconList = iconListOrder.reduce(function (acc, name) {
                    var res = customIconList.find(function (i) { return i === name; });
                    if (res) {
                        acc.push(res);
                    }
                    return acc;
                }, []);
                setCustomIcons(sortedIconList);
            }
        });
    }, [currentOrder, iconCache, queryOrder]);
    console.log(customIcons, 'customIcons');
    console.log(defaultIcons, 'defaultIcons');
    return (React.createElement("div", { className: prefixCls$1, ref: refPopup },
        React.createElement("div", { className: "".concat(prefixCls$1, "-drag-wrap") },
            React.createElement("div", { className: "".concat(prefixCls$1, "-content") },
                React.createElement("div", { className: "".concat(prefixCls$1, "-left") },
                    React.createElement("div", { className: "".concat(prefixCls$1, "-mb10 dis_flex_ai_center") },
                        React.createElement("div", { className: "".concat(prefixCls$1, "-title") },
                            i18n$1.markerStyle,
                            React.createElement("div", { className: "".concat(prefixCls$1, "-title-button") },
                                React.createElement(Authorized, { authority: Previleges.updateAppPreference },
                                    React.createElement(IconButton, { icon: "add", type: "only-icon", onClick: function () {
                                            toggleShowCustomIconSetting();
                                            onCancel && onCancel();
                                        } })),
                                React.createElement(Dropmenu, { menus: customIconSortMenus, values: [currentOrder], icon: 'sort', onClickMenuItem: function (_a) {
                                        var key = _a.key;
                                        return setCurrentOrder(key);
                                    }, className: "icon-type-select", getPopupContainer: function () { return refPopup.current || document.body; } })))),
                    React.createElement(Input, { value: searchText, className: "".concat(prefixCls$1, "-search-input"), type: "menu-bg", size: "compact", placeholder: i18n.mapEdit.search.placeholder, prefixIcon: "search", onChange: _onChangeSearchText }),
                    React.createElement("div", { className: "".concat(prefixCls$1, "-list-wrapper"), ref: iconListRef },
                        React.createElement("div", { className: "".concat(prefixCls$1, "-list") },
                            renderIconList(customIcons, 'custom'),
                            customIcons.length > 0 && React.createElement("div", { className: "icon-divider" }),
                            renderIconList(defaultIcons, 'default'))),
                    !onlyIcon && (React.createElement(React.Fragment, null,
                        React.createElement("div", { className: "dis_flex_ai_center", style: { marginBottom: 24, marginTop: 10 } },
                            React.createElement("div", { className: "fs13", style: { marginRight: 12 } }, i18n$1.markerSize),
                            React.createElement(Select, { className: "".concat(prefixCls$1, "-select"), getPopupContainer: function () { return refPopup.current; }, size: "compact", showSearch: true, options: childrens, createAble: true, type: "menu-bg", value: (_style === null || _style === void 0 ? void 0 : _style.iconTimes) || 1, onChange: _selectTimes }))))),
                React.createElement("div", { className: "".concat(prefixCls$1, "-right") },
                    React.createElement(ColorPanelWrapper$1, __assign({}, props, { color: (_style === null || _style === void 0 ? void 0 : _style.color) || '', onChange: _onChange, disabled: getIconColorPref((_a = _style === null || _style === void 0 ? void 0 : _style.icon) === null || _a === void 0 ? void 0 : _a.content), pickColorFromMap: true, toMeasureCanvas: mapInstanceCanvas, handleCanvasColorPickerVisibleChange: handleCanvasColorPickerVisibleChange })))))));
});
var MapPointSetting$1 = observer(function (props) {
    var getPopupContainer = React.useContext(appContext.getContext()).routeStore.getPopupContainer;
    var onCancel = props.onCancel, onOk = props.onOk, style = props.style, children = props.children, className = props.className, loading = props.loading, onlyIcon = props.onlyIcon, height = props.height, width = props.width, otherContainerStyle = props.otherContainerStyle;
    // const [iconsType] = useState('all');
    var _a = __read(useState$1(style), 2), _style = _a[0], setStyle = _a[1];
    var _b = __read(useState$1(''), 2), searchText = _b[0], setSearchText = _b[1];
    var _c = __read(useState$1(), 2), iconType = _c[0], setIconType = _c[1];
    var _d = __read(useState$1(false), 2), clickAwayToClose = _d[0], setClickAwayToClose = _d[1];
    React.useEffect(function () {
        var _a, _b;
        setStyle(style);
        setIconType(((_b = (_a = style === null || style === void 0 ? void 0 : style.icon) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.startsWith('.')) ? 'custom' : 'default');
    }, [style]);
    var _onChange = function (color) {
        var data = __assign(__assign({}, _style), { color: color });
        setStyle(data);
    };
    var _onOk = function () {
        onOk && onOk(_style);
        onCancel && onCancel();
    };
    var _onCancel = function () {
        onCancel && onCancel();
    };
    var _selectIcon = function (icon, iconType) {
        var newIcon = {
            content: icon,
            icon: icon,
        };
        var data = __assign(__assign({}, _style), { icon: newIcon });
        setStyle(data);
        setIconType(iconType);
    };
    var _changeTimes = function (value) {
        // const { target } = e;
        // const value = target.value;
        var data = __assign(__assign({}, _style), { iconTimes: value });
        setStyle(data);
    };
    var _onChangeSearchText = function (e) {
        var value = e.target.value;
        setSearchText(value);
    };
    var handleCanvasColorPickerVisibleChange = useCallback(function (v) {
        setClickAwayToClose(!v);
    }, []);
    return (React.createElement(CreateFilter, { okButtonProps: { style: { marginRight: 12 } }, onClose: _onCancel, onOk: _onOk, loading: loading, otherContainerStyle: otherContainerStyle, getPopupContainer: getPopupContainer, overlay: React.createElement(MapPointSettingOverLay, { _onChangeSearchText: _onChangeSearchText, searchText: searchText, 
            // iconsType={iconsType}
            _selectIcon: _selectIcon, _style: _style, _changeTimes: _changeTimes, _onChange: _onChange, onlyIcon: onlyIcon, onCancel: onCancel, iconType: iconType, handleCanvasColorPickerVisibleChange: handleCanvasColorPickerVisibleChange }), footerClassName: "".concat(prefixCls$1, "-footer"), className: classNames("".concat(prefixCls$1, "-padding"), className), width: width, height: height, clickAway: clickAwayToClose }, children));
});

var MapPointSetting = React.memo(MapPointSetting$1);

var ColorPanelWrapper = LazyLoad(function () {
    return import('./index-7c04fb6e.js').then(function (res) { return res.ColorPanelWrapper; });
});
var useState = React.useState;
var prefixCls = 'dm-map-color-picker';
var otherContainerStyle = { lineHeight: 0 };
var MapColorPicker = observer(function _MapColorPicker(props) {
    var _a = React.useContext(appContext.getContext()).routeStore, mapInstanceCanvas = _a.mapInstanceCanvas, getPopupContainer = _a.getPopupContainer;
    var _b = __read(useState(false), 2), clickAwayToClose = _b[0], setClickAwayToClose = _b[1];
    var children = props.children, className = props.className, onCancel = props.onCancel, onOk = props.onOk, width = props.width, height = props.height;
    var _c = __read(useState((props === null || props === void 0 ? void 0 : props.color) || ''), 2), color = _c[0], setColor = _c[1];
    var _onCancel = function () {
        onCancel && onCancel();
    };
    var _onOk = function () {
        onOk && onOk(color);
    };
    var _onChange = function (color) {
        setColor(color);
    };
    var handleCanvasColorPickerVisibleChange = useCallback(function (v) {
        setClickAwayToClose(!v);
    }, []);
    var overlay = (React.createElement("div", { className: "".concat(prefixCls, "-panel") },
        React.createElement(ColorPanelWrapper, __assign({}, props, { color: color || '', onChange: _onChange, pickColorFromMap: true, toMeasureCanvas: mapInstanceCanvas, handleCanvasColorPickerVisibleChange: handleCanvasColorPickerVisibleChange }))));
    useEffect(function () {
        if (props.color) {
            setColor(props.color);
        }
    }, [props.color]);
    return (React.createElement(CreateFilter, { onClose: _onCancel, onOk: _onOk, loading: false, overlay: overlay, footerClassName: "".concat(prefixCls, "-footer"), className: classNames(prefixCls, className), width: width, height: height, clickAway: clickAwayToClose, otherContainerStyle: otherContainerStyle, getPopupContainer: getPopupContainer }, children));
});

export { MapColorPicker as M, MapPointSetting as a };
