import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { createComponent } from '@meta-ui/core';
import { Type } from '@sinclair/typebox';
import Text, { TextPropertySchema } from '../_internal/Text';
const Button = ({ text, mergeState, subscribeMethods, callbackMap, }) => {
    useEffect(() => {
        mergeState({ value: text.raw });
    }, [text.raw]);
    const ref = useRef(null);
    useEffect(() => {
        subscribeMethods({
            click() {
                var _a;
                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.click();
            },
        });
    }, []);
    return (_jsx("button", Object.assign({ ref: ref, onClick: callbackMap === null || callbackMap === void 0 ? void 0 : callbackMap.onClick }, { children: _jsx(Text, { value: text }, void 0) }), void 0));
};
const StateSchema = Type.Object({
    value: Type.String(),
});
const PropsSchema = Type.Object({
    text: TextPropertySchema,
});
export default Object.assign(Object.assign({}, createComponent({
    version: 'plain/v1',
    metadata: {
        name: 'button',
        displayName: 'Button',
        description: 'plain button',
        isDraggable: true,
        isResizable: true,
        exampleProperties: {
            text: {
                raw: 'text',
                format: 'plain',
            },
        },
        exampleSize: [2, 1],
    },
    spec: {
        properties: PropsSchema,
        state: StateSchema,
        methods: [
            {
                name: 'click',
            },
        ],
        slots: [],
        styleSlots: [],
        events: ['onClick'],
    },
})), { impl: Button });
//# sourceMappingURL=Button.js.map