import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React, { useEffect } from 'react';
import { Input as BaseInput, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, } from '@chakra-ui/react';
import { createComponent } from '@meta-ui/core';
import { Type } from '@sinclair/typebox';
const AppendElementPropertySchema = Type.Union([
    Type.Object({
        type: Type.KeyOf(Type.Object({ addon: Type.String() })),
        children: Type.Optional(Type.String()),
    }),
    Type.Object({
        type: Type.KeyOf(Type.Object({ element: Type.String() })),
        children: Type.Optional(Type.String()),
        fontSize: Type.Optional(Type.String()),
        color: Type.Optional(Type.String()),
    }),
]);
const Input = ({ variant, placeholder, size, focusBorderColor, isDisabled, isRequired, left, right, mergeState, subscribeMethods, defaultValue, }) => {
    const [value, setValue] = React.useState(defaultValue || '');
    const onChange = (event) => setValue(event.target.value);
    useEffect(() => {
        mergeState({ value });
    }, [value]);
    useEffect(() => {
        setValue(defaultValue || '');
    }, [defaultValue]);
    useEffect(() => {
        subscribeMethods({
            setInputValue({ value }) {
                setValue(value);
            },
            resetInputValue() {
                setValue(defaultValue || '');
            },
        });
    }, []);
    return (_jsxs(InputGroup, Object.assign({ size: size, background: "white" }, { children: [left ? (left.type === 'addon' ? (_jsx(InputLeftAddon, { children: left.children }, void 0)) : (_jsx(InputLeftElement, Object.assign({ fontSize: left.fontSize, color: left.color }, { children: left.children }), void 0))) : (_jsx(_Fragment, {}, void 0)), _jsx(BaseInput, { value: value, variant: variant, placeholder: placeholder, focusBorderColor: focusBorderColor, isDisabled: isDisabled, isRequired: isRequired, onChange: onChange }, void 0), right ? (right.type === 'addon' ? (_jsx(InputRightAddon, { children: right.children }, void 0)) : (_jsx(InputRightElement, Object.assign({ fontSize: right.fontSize, color: right.color }, { children: right.children }), void 0))) : (_jsx(_Fragment, {}, void 0))] }), void 0));
};
const StateSchema = Type.Object({
    value: Type.String(),
});
const PropsSchema = Type.Object({
    variant: Type.KeyOf(Type.Object({
        outline: Type.String(),
        unstyled: Type.String(),
        filled: Type.String(),
        flushed: Type.String(),
    })),
    placeholder: Type.Optional(Type.String()),
    size: Type.KeyOf(Type.Object({
        sm: Type.String(),
        md: Type.String(),
        lg: Type.String(),
        xs: Type.String(),
    })),
    focusBorderColor: Type.Optional(Type.String()),
    isDisabled: Type.Optional(Type.Boolean()),
    isRequired: Type.Optional(Type.Boolean()),
    left: AppendElementPropertySchema,
    right: AppendElementPropertySchema,
    defaultValue: Type.Optional(Type.String()),
});
export default Object.assign(Object.assign({}, createComponent({
    version: 'chakra_ui/v1',
    metadata: {
        name: 'input',
        displayName: 'Input',
        description: 'chakra_ui input',
        isDraggable: true,
        isResizable: true,
        exampleProperties: {
            variant: 'outline',
            placeholder: 'Please input value',
            size: 'md',
            isDisabled: false,
            isRequired: false,
            defaultValue: '',
        },
        exampleSize: [4, 1],
    },
    spec: {
        properties: PropsSchema,
        state: StateSchema,
        methods: [
            {
                name: 'setInputValue',
                parameters: Type.Object({
                    value: Type.String(),
                }),
            },
            {
                name: 'resetInputValue',
            },
        ],
        slots: [],
        styleSlots: [],
        events: [],
    },
})), { impl: Input });
//# sourceMappingURL=Input.js.map