import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { createComponent } from '@meta-ui/core';
import { css } from '@emotion/react';
import { Type } from '@sinclair/typebox';
import { Button as BaseButton } from '@chakra-ui/react';
import Text, { TextPropertySchema } from '../_internal/Text';
import { ColorSchemePropertySchema } from './Types/ColorScheme';
const style = css `
  width: 100%;
  height: 100%;
`;
const Button = ({ text, mergeState, subscribeMethods, callbackMap: callbacks, colorScheme, isLoading, }) => {
    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(BaseButton, Object.assign({ css: style }, { colorScheme, isLoading }, { ref: ref, onClick: callbacks === null || callbacks === void 0 ? void 0 : callbacks.onClick }, { children: _jsx(Text, { value: text }, void 0) }), void 0));
};
const StateSchema = Type.Object({
    value: Type.String(),
});
const PropsSchema = Type.Object({
    text: TextPropertySchema,
    colorScheme: ColorSchemePropertySchema,
    isLoading: Type.Optional(Type.Boolean()),
});
export default Object.assign(Object.assign({}, createComponent({
    version: 'chakra_ui/v1',
    metadata: {
        name: 'button',
        displayName: 'Button',
        description: 'chakra-ui button',
        isDraggable: true,
        isResizable: true,
        exampleProperties: {
            text: {
                raw: 'text',
                format: 'plain',
            },
            colorScheme: 'blue',
            isLoading: false,
        },
        exampleSize: [2, 1],
    },
    spec: {
        properties: PropsSchema,
        state: StateSchema,
        methods: [
            {
                name: 'click',
            },
        ],
        slots: [],
        styleSlots: [],
        events: ['onClick'],
    },
})), { impl: Button });
//# sourceMappingURL=Button.js.map