import { DeleteOutlined } from "@ant-design/icons";
import { ConfigProvider, Tooltip } from "antd";
import clsx from "clsx";
import React, { useContext, useRef } from "react";
import { Transforms } from "slate";
import { ReactEditor } from "slate-react";
import { useRefFunction } from "../../../Hooks/useRefFunction";
import { I18nContext } from "../../../I18n";
import { EditorUtils } from "../../../MarkdownEditor";
import { useEditorStore } from "../../../MarkdownEditor/editor/store";
import { useStyle } from "./ChartAttrToolBarStyle";
/**
 * ChartAttrToolBar 组件 - 图表属性工具栏组件
 *
 * 该组件提供图表编辑时的属性工具栏，支持图表配置、删除等操作。
 * 集成到 Markdown 编辑器中，提供图表节点的交互功能。
 *
 * @component
 * @description 图表属性工具栏组件，提供图表编辑功能
 * @param {Object} props - 组件属性
 * @param {Array} [props.options] - 工具栏选项配置
 * @param {React.ReactNode} props.options.icon - 选项图标
 * @param {string} [props.options.title] - 选项标题
 * @param {React.CSSProperties} [props.options.style] - 选项样式
 * @param {() => void} [props.options.onClick] - 选项点击回调
 * @param {NodeEntry<ChartNode>} props.node - 图表节点
 * @param {React.ReactNode} [props.title] - 工具栏标题
 *
 * @example
 * ```tsx
 * <ChartAttrToolBar
 *   node={chartNode}
 *   title="图表设置"
 *   options={[
 *     {
 *       icon: <SettingIcon />,
 *       title: "设置",
 *       onClick: () => console.log('设置图表')
 *     }
 *   ]}
 * />
 * ```
 *
 * @returns {React.ReactElement} 渲染的图表属性工具栏组件
 *
 * @remarks
 * - 集成到 Markdown 编辑器
 * - 支持图表节点删除
 * - 提供自定义工具栏选项
 * - 支持只读模式
 * - 阻止事件冒泡
 * - 使用 Tooltip 提供提示
 * - 响应式布局设计
 */ export var ChartAttrToolBar = function ChartAttrToolBar(props) {
    var _props_options, _i18n_locale;
    var _useEditorStore = useEditorStore(), markdownEditorRef = _useEditorStore.markdownEditorRef, readonly = _useEditorStore.readonly;
    var i18n = useContext(I18nContext);
    var chartNodeRef = useRef();
    var remove = useRefFunction(function() {
        var chart = props.node;
        if (!chart) return;
        Transforms.delete(markdownEditorRef.current, {
            at: EditorUtils.findPath(markdownEditorRef.current, chart)
        });
        chartNodeRef.current = undefined;
        ReactEditor.focus(markdownEditorRef.current);
    });
    var context = useContext(ConfigProvider.ConfigContext);
    var baseClassName = context === null || context === void 0 ? void 0 : context.getPrefixCls("chart-attr-toolbar");
    var _useStyle = useStyle(baseClassName), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
    return wrapSSR(/*#__PURE__*/ React.createElement("div", {
        className: clsx(baseClassName, hashId),
        style: {
            width: 'auto'
        },
        contentEditable: false,
        "data-testid": "chart-attr-toolbar",
        onClick: function onClick(e) {
            e.stopPropagation();
        }
    }, /*#__PURE__*/ React.createElement("div", {
        style: {
            flex: 1,
            fontWeight: 'bold'
        },
        onClick: function onClick(e) {
            e.stopPropagation();
        }
    }, props.title), props === null || props === void 0 ? void 0 : (_props_options = props.options) === null || _props_options === void 0 ? void 0 : _props_options.map(function(item, index) {
        if (!item.icon) return null;
        if (!item.title) {
            return /*#__PURE__*/ React.createElement("div", {
                key: index,
                className: clsx("".concat(baseClassName, "-item"), hashId),
                onClick: item.onClick,
                style: item.style
            }, item.icon);
        }
        return /*#__PURE__*/ React.createElement(Tooltip, {
            mouseEnterDelay: 0.3,
            key: index,
            title: item.title
        }, /*#__PURE__*/ React.createElement("div", {
            className: clsx("".concat(baseClassName, "-item"), hashId),
            onClick: item.onClick
        }, item.icon));
    }), readonly ? null : /*#__PURE__*/ React.createElement(Tooltip, {
        mouseEnterDelay: 0.3,
        title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale = i18n.locale) === null || _i18n_locale === void 0 ? void 0 : _i18n_locale.delete) || '删除'
    }, /*#__PURE__*/ React.createElement("div", {
        className: clsx("".concat(baseClassName, "-item"), hashId)
    }, /*#__PURE__*/ React.createElement(DeleteOutlined, {
        onClick: remove
    })))));
};
