import * as React from 'react';
import classNames from 'classnames';
import { q as appContext, I as Icon, a1 as Input, s as IconButton } from './MapEditView-f6381866.js';
import { observer } from 'mobx-react';
import { useClickAway } from 'react-use';

const prefixCls$1 = 'dm-map-visual-card-simple-eye';
const SimpleEye = observer((props) => {
    const { className = '', onClick, visible } = props;
    const { routeStore } = React.useContext(appContext.getContext());
    const { customerIcons } = routeStore;
    const showIcon = (customerIcons === null || customerIcons === void 0 ? void 0 : customerIcons.showIcon) || 'visibility-on';
    const hideIcon = (customerIcons === null || customerIcons === void 0 ? void 0 : customerIcons.hideIcon) || 'visibility-off';
    return (React.createElement("div", { className: classNames(`${className} ${prefixCls$1}`, {
            [`${prefixCls$1}-disable`]: !visible,
        }), onClick: onClick }, visible ? React.createElement(Icon, { icon: showIcon, size: 16 }) : React.createElement(Icon, { icon: hideIcon, size: 16 })));
});
SimpleEye.whyDidYouRender = true;
SimpleEye.displayName = 'SimpleEye';

const prefixCls = 'dm-map-visual-list-item';
const { useRef, useState } = React;
const MapVisualListItem = React.memo((props) => {
    const { text, onSelect, onDelete, setName, isSimpleCardsMode } = props || {};
    const [edit, setEdit] = useState(false);
    const refTime = useRef();
    const refDiv = useRef(null);
    useClickAway(refDiv, () => {
        setEdit(false);
    });
    const _onSelect = () => {
        refTime.current && clearTimeout(refTime.current);
        refTime.current = window.setTimeout(() => {
            onSelect && onSelect();
        }, 300);
    };
    const _onDoubleClick = () => {
        refTime.current && clearTimeout(refTime.current);
        setEdit(true);
    };
    const _onPressEnter = (e) => {
        const target = e.target;
        const value = target.value;
        setEdit(false);
        setName && setName(value);
    };
    const _onBlur = (e) => {
        const target = e.target;
        const value = target.value;
        setEdit(false);
        setName && setName(value);
    };
    React.useEffect(() => {
        var _a, _b;
        if (edit) {
            (_b = (_a = refDiv.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.select();
        }
    }, [edit]);
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: classNames(`${prefixCls}-border`, {
                [`${prefixCls}-border-detail`]: !isSimpleCardsMode,
            }) }),
        React.createElement("div", { className: prefixCls, ref: refDiv },
            React.createElement("div", { className: classNames(`${prefixCls}-text`, {
                    [`${prefixCls}-text-detail`]: !isSimpleCardsMode,
                }) },
                edit ? (React.createElement(Input, { allowClear: false, className: `${prefixCls}-input`, type: "menu-bg", placeholder: text, autoFocus: true, defaultValue: text, onPressEnter: _onPressEnter, onBlur: _onBlur })) : (React.createElement("div", { className: `${prefixCls}-name`, onClick: _onSelect, onDoubleClick: _onDoubleClick }, text)),
                onDelete && (React.createElement(IconButton, { className: `${prefixCls}-delete-icon`, icon: "close", type: "only-icon", onClick: onDelete }))))));
});

export { MapVisualListItem as M, SimpleEye as S };
