import { jsx, jsxs } from "react/jsx-runtime";
import { useContext } from "react";
import { useFieldSchema } from "@tachybase/schema";
import { Avatar } from "antd";
import { createStyles } from "antd-style";
import { withDynamicSchemaProps } from "../../application/index.mjs";
import { Icon } from "../../icon/index.mjs";
import { Action, useComponent } from "../../schema-component/index.mjs";
import { QuickAccessBlockContext } from "./Block.mjs";
import { QuickAccessLayout } from "./blockSettings.mjs";
function _tagged_template_literal(strings, raw) {
    if (!raw) raw = strings.slice(0);
    return Object.freeze(Object.defineProperties(strings, {
        raw: {
            value: Object.freeze(raw)
        }
    }));
}
function _templateObject() {
    const data = _tagged_template_literal([
        "\n    background-color: transparent;\n    border: 0;\n    height: auto;\n    box-shadow: none;\n  "
    ]);
    _templateObject = function() {
        return data;
    };
    return data;
}
function _templateObject1() {
    const data = _tagged_template_literal([
        "\n    margin-top: ",
        "px;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  "
    ]);
    _templateObject1 = function() {
        return data;
    };
    return data;
}
const useStyles = createStyles((param)=>{
    let { token, css } = param;
    return {
        action: css(_templateObject()),
        title: css(_templateObject1(), token.marginSM)
    };
});
function Button() {
    var _fieldSchema_xcomponentprops, _fieldSchema_xcomponentprops1;
    const fieldSchema = useFieldSchema();
    const icon = null == (_fieldSchema_xcomponentprops = fieldSchema['x-component-props']) ? void 0 : _fieldSchema_xcomponentprops['icon'];
    const backgroundColor = null == (_fieldSchema_xcomponentprops1 = fieldSchema['x-component-props']) ? void 0 : _fieldSchema_xcomponentprops1['iconColor'];
    const { layout } = useContext(QuickAccessBlockContext);
    const { styles, cx } = useStyles();
    return layout === QuickAccessLayout.Grid ? /*#__PURE__*/ jsxs("div", {
        title: fieldSchema.title,
        style: {
            width: '70px',
            overflow: 'hidden'
        },
        children: [
            /*#__PURE__*/ jsx(Avatar, {
                style: {
                    backgroundColor
                },
                size: 54,
                icon: /*#__PURE__*/ jsx(Icon, {
                    type: icon
                })
            }),
            /*#__PURE__*/ jsx("div", {
                className: cx(styles.title),
                children: fieldSchema.title
            })
        ]
    }) : /*#__PURE__*/ jsx("a", {
        children: fieldSchema.title
    });
}
const QuickAccessAction = withDynamicSchemaProps((props)=>{
    const { className, ...others } = props;
    const { styles, cx } = useStyles();
    const fieldSchema = useFieldSchema();
    const Component = useComponent(null == props ? void 0 : props.targetComponent) || Action;
    return /*#__PURE__*/ jsx(Component, {
        className: cx(className, styles.action),
        ...others,
        icon: null,
        title: /*#__PURE__*/ jsx(Button, {}),
        confirmTitle: fieldSchema.title
    });
});
export { QuickAccessAction };
