import { jsx } from "react/jsx-runtime";
import "react";
import { Button, Tooltip } from "antd";
import { useHotkeys } from "react-hotkeys-hook";
import { useTranslation } from "react-i18next";
import { useDesignable } from "../index.mjs";
import { Icon } from "../../icon/index.mjs";
import { useToken } from "../../style/index.mjs";
const DesignableSwitch = ()=>{
    const { designable, setDesignable } = useDesignable();
    const { t } = useTranslation();
    const { token } = useToken();
    const style = {};
    if (designable) style['backgroundColor'] = 'var(--colorSettings)';
    useHotkeys('Ctrl+Shift+U', ()=>setDesignable(!designable), [
        designable
    ]);
    return /*#__PURE__*/ jsx(Tooltip, {
        title: t('UI Editor'),
        children: /*#__PURE__*/ jsx(Button, {
            "data-testid": 'ui-editor-button',
            icon: /*#__PURE__*/ jsx(Icon, {
                type: "Design",
                style: {
                    color: token.colorTextHeaderMenu,
                    fill: token.colorTextHeaderMenu
                }
            }),
            title: t('UI Editor'),
            style: style,
            onClick: ()=>{
                setDesignable(!designable);
            }
        })
    });
};
export { DesignableSwitch };
