import * as React from 'react';
import { useEffect, useCallback } from 'react';
import { ah as LazyLoad, p as i18n, l as iconsUtil, a as __awaiter, aH as Authorized, aI as Previleges, s as IconButton, W as Dropmenu, a1 as Input, aw as Select, bv as CreateFilter, aP as IconsUtil, bk as Tooltip, cE as getCustomIconList, q as appContext } from './MapEditView-f6381866.js';
import classNames from 'classnames';
import { useMount } from 'ahooks';
import { observer } from 'mobx-react';

const ColorPanelWrapper$1 = LazyLoad(() => import('./index-c49cc953.js').then((res) => res.ColorPanelWrapper));
const { useState: useState$1, useRef } = React;
const prefixCls$1 = 'dm-map-icon-setting';
const 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,
    },
];
const { formatIconName } = IconsUtil;
const customIconSortMenus = [
    { title: i18n.mapEdit.orderByName, key: 'byName' },
    { title: i18n.mapEdit.orderByLastUpdateTime, key: 'byUpdateTime' },
    { title: i18n.mapEdit.orderByUser, key: 'byUser' },
];
const MapPointSettingOverLay = observer((props) => {
    var _a, _b;
    const { toggleShowCustomIconSetting, getIconColorPref, getIconUrl, getIconLabel, iconCache } = iconsUtil;
    console.log(iconsUtil, 'iconsUtil');
    const [customIcons, setCustomIcons] = useState$1(iconCache.customIconList);
    const defaultIcons = iconCache.defaultIconList;
    const { _onChangeSearchText, searchText, 
    // iconsType,
    _selectIcon, _style, _changeTimes, _onChange, onlyIcon, onCancel, iconType, handleCanvasColorPickerVisibleChange, } = props;
    const refPopup = useRef(null);
    const iconListRef = useRef(null);
    const i18n$1 = i18n.mapEdit.settingsPanel;
    const [currentOrder, setCurrentOrder] = useState$1('byUser');
    useMount(() => {
        setTimeout(() => {
            var _a;
            const id = (_a = _style === null || _style === void 0 ? void 0 : _style.icon) === null || _a === void 0 ? void 0 : _a.content;
            const _id = formatIconName({ name: id });
            _id && jumpTo(iconType === 'custom' ? `custom${_id}` : _id);
        });
    });
    useEffect(() => {
        setCustomIcons(iconCache.customIconList);
    }, [iconCache.customIconList]);
    const jumpTo = (id) => {
        const SettingsRightDom = iconListRef.current;
        const idDom = (SettingsRightDom === null || SettingsRightDom === void 0 ? void 0 : SettingsRightDom.querySelector('#' + id)) ||
            (SettingsRightDom === null || SettingsRightDom === void 0 ? void 0 : SettingsRightDom.querySelector('.' + id));
        const pos = idDom ? idDom.offsetTop : 0;
        if (SettingsRightDom) {
            SettingsRightDom.scrollTo({
                top: pos,
                // behavior: 'smooth',
            });
        }
    };
    const _selectTimes = (value) => {
        const times = (value + '').replace(/x/g, ''); //option[0].key;
        _changeTimes(Number(times));
    };
    const renderIconList = (list, iconType) => (React.createElement(React.Fragment, null, (searchText ? list.filter((i) => i.includes(searchText)) : list).map((i) => {
        var _a;
        return (React.createElement(Tooltip, { title: i, key: i, mouseEnterDelay: 0, mouseLeaveDelay: 0, getPopupContainer: () => refPopup.current || document.body },
            React.createElement("div", { id: iconType === 'custom'
                    ? `custom${formatIconName({ name: i })}`
                    : formatIconName({ name: i }), className: classNames(`${prefixCls$1}-list-icon`, {
                    [`${prefixCls$1}-list-icon-selected`]: ((_a = _style === null || _style === void 0 ? void 0 : _style.icon) === null || _a === void 0 ? void 0 : _a.content) === i,
                }), onClick: () => _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(${getIconUrl(i)}) no-repeat center`,
                        mask: `url(${getIconUrl(i)}) no-repeat center`,
                    } })),
                React.createElement("div", { className: `${prefixCls$1}-marker-name` }, getIconLabel(i)))));
    })));
    const queryOrder = useCallback((type) => __awaiter(void 0, void 0, void 0, function* () {
        var _c;
        if (type === 'byUser') {
            return iconCache.customIconList;
        }
        else {
            const res = yield getCustomIconList(type);
            const { app = [] } = ((_c = res.data) === null || _c === void 0 ? void 0 : _c.result) || {};
            return app.map((name) => `.${name}`);
        }
    }), [iconCache.customIconList]);
    useEffect(() => {
        const { customIconList } = iconCache;
        queryOrder(currentOrder).then((iconListOrder) => {
            if (iconListOrder.length === customIconList.length &&
                customIconList.every((i) => iconListOrder.includes(i))) {
                const sortedIconList = iconListOrder.reduce((acc, name) => {
                    const res = customIconList.find((i) => 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: `${prefixCls$1}-drag-wrap` },
            React.createElement("div", { className: `${prefixCls$1}-content` },
                React.createElement("div", { className: `${prefixCls$1}-left` },
                    React.createElement("div", { className: `${prefixCls$1}-mb10 dis_flex_ai_center` },
                        React.createElement("div", { className: `${prefixCls$1}-title` },
                            i18n$1.markerStyle,
                            React.createElement("div", { className: `${prefixCls$1}-title-button` },
                                React.createElement(Authorized, { authority: Previleges.updateAppPreference },
                                    React.createElement(IconButton, { icon: "add", type: "only-icon", onClick: () => {
                                            toggleShowCustomIconSetting();
                                            onCancel && onCancel();
                                        } })),
                                React.createElement(Dropmenu, { menus: customIconSortMenus, values: [currentOrder], icon: 'sort', onClickMenuItem: ({ key }) => setCurrentOrder(key), className: "icon-type-select", getPopupContainer: () => refPopup.current || document.body })))),
                    React.createElement(Input, { value: searchText, className: `${prefixCls$1}-search-input`, type: "menu-bg", size: "compact", placeholder: i18n.mapEdit.search.placeholder, prefixIcon: "search", onChange: _onChangeSearchText }),
                    React.createElement("div", { className: `${prefixCls$1}-list-wrapper`, ref: iconListRef },
                        React.createElement("div", { className: `${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: `${prefixCls$1}-select`, getPopupContainer: () => 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: `${prefixCls$1}-right` },
                    React.createElement(ColorPanelWrapper$1, Object.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: (_b = props.mapInstanceCanvas) !== null && _b !== void 0 ? _b : null, handleCanvasColorPickerVisibleChange: handleCanvasColorPickerVisibleChange })))))));
});
const MapPointSetting$1 = observer((props) => {
    const { onCancel, onOk, style, children, className, loading, onlyIcon, height, width, otherContainerStyle, getPopupContainer, mapInstanceCanvas, } = props;
    // const [iconsType] = useState('all');
    const [_style, setStyle] = useState$1(style);
    const [searchText, setSearchText] = useState$1('');
    const [iconType, setIconType] = useState$1();
    const [clickAwayToClose, setClickAwayToClose] = useState$1(false);
    React.useEffect(() => {
        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]);
    const _onChange = (color) => {
        const data = Object.assign(Object.assign({}, _style), { color });
        setStyle(data);
    };
    const _onOk = () => {
        onOk && onOk(_style);
        onCancel && onCancel();
    };
    const _onCancel = () => {
        onCancel && onCancel();
    };
    const _selectIcon = (icon, iconType) => {
        const newIcon = {
            content: icon,
            icon,
        };
        const data = Object.assign(Object.assign({}, _style), { icon: newIcon });
        setStyle(data);
        setIconType(iconType);
    };
    const _changeTimes = (value) => {
        // const { target } = e;
        // const value = target.value;
        const data = Object.assign(Object.assign({}, _style), { iconTimes: value });
        setStyle(data);
    };
    const _onChangeSearchText = (e) => {
        const value = e.target.value;
        setSearchText(value);
    };
    const handleCanvasColorPickerVisibleChange = useCallback((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, { mapInstanceCanvas: mapInstanceCanvas, _onChangeSearchText: _onChangeSearchText, searchText: searchText, 
            // iconsType={iconsType}
            _selectIcon: _selectIcon, _style: _style, _changeTimes: _changeTimes, _onChange: _onChange, onlyIcon: onlyIcon, onCancel: onCancel, iconType: iconType, handleCanvasColorPickerVisibleChange: handleCanvasColorPickerVisibleChange }), footerClassName: `${prefixCls$1}-footer`, className: classNames(`${prefixCls$1}-padding`, className), width: width, height: height, clickAway: clickAwayToClose }, children));
});

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

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

export { MapColorPicker as M, MapPointSetting as a };
