import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React, { useEffect, useState, useRef } from 'react';
import { createComponent } from '@meta-ui/core';
import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, } from '@chakra-ui/react';
import { Type } from '@sinclair/typebox';
import Slot from '../_internal/Slot';
import { ColorSchemePropertySchema } from './Types/ColorScheme';
import { DIALOG_CONTAINER_ID } from '../../constants';
const HandleButtonPropertySchema = Type.Object({
    text: Type.Optional(Type.String()),
    colorScheme: ColorSchemePropertySchema,
});
const Dialog = ({ slotsMap, subscribeMethods, callbackMap: callbacks, title: customerTitle, disableConfirm, confirmButton = {
    text: 'confirm',
    colorScheme: 'red',
}, cancelButton = {
    text: 'cancel',
    colorScheme: 'blue',
}, }) => {
    const [isOpen, setIsOpen] = useState(false);
    const [title, setTitle] = useState(customerTitle || '');
    const cancelRef = useRef(null);
    const containerRef = useRef(null);
    useEffect(() => {
        containerRef.current = document.getElementById(DIALOG_CONTAINER_ID);
    }, [containerRef]);
    useEffect(() => {
        subscribeMethods({
            openDialog({ title }) {
                setIsOpen(true);
                setTitle(title);
            },
            confirmDialog() {
                setIsOpen(false);
            },
            cancelDialog() {
                setIsOpen(false);
            },
        });
    }, []);
    const dialogContentProps = {
        position: 'absolute',
        width: 'full',
        containerProps: { position: 'absolute', width: 'full', height: 'full' },
    };
    const dialogOverlayProps = {
        position: 'absolute',
        width: 'full',
        height: 'full',
    };
    const portalProps = {
        appendToParentPortal: true,
        containerRef,
    };
    return (_jsx(React.Fragment, { children: _jsx(AlertDialog, Object.assign({ isOpen: isOpen, leastDestructiveRef: cancelRef, onClose: () => setIsOpen(false), trapFocus: false, portalProps: containerRef.current ? portalProps : undefined }, { children: _jsx(AlertDialogOverlay, Object.assign({}, (containerRef.current ? dialogOverlayProps : {}), { children: _jsxs(AlertDialogContent, Object.assign({}, (containerRef.current ? dialogContentProps : {}), { children: [_jsx(AlertDialogHeader, { children: title }, void 0), _jsx(AlertDialogBody, { children: _jsx(Slot, { slotsMap: slotsMap, slot: "content" }, void 0) }, void 0), _jsxs(AlertDialogFooter, { children: [_jsx(Button, Object.assign({ ref: cancelRef, colorScheme: cancelButton.colorScheme, onClick: callbacks === null || callbacks === void 0 ? void 0 : callbacks.cancelDialog }, { children: cancelButton.text }), void 0), _jsx(Button, Object.assign({ disabled: disableConfirm, colorScheme: confirmButton.colorScheme, onClick: callbacks === null || callbacks === void 0 ? void 0 : callbacks.confirmDialog, ml: 3 }, { children: confirmButton.text }), void 0)] }, void 0)] }), void 0) }), void 0) }), void 0) }, void 0));
};
const PropsSchema = Type.Object({
    title: Type.Optional(Type.String()),
    confirmButton: HandleButtonPropertySchema,
    cancelButton: HandleButtonPropertySchema,
    disableConfirm: Type.Optional(Type.Boolean()),
});
export default Object.assign(Object.assign({}, createComponent({
    version: 'chakra_ui/v1',
    metadata: {
        name: 'dialog',
        displayName: 'Dialog',
        description: 'chakra_ui dialog',
        isDraggable: false,
        isResizable: false,
        exampleProperties: {
            title: 'Dialog',
            confirmButton: 'Confirm',
            cancelButton: 'Cancel',
            disableConfirm: false,
        },
        exampleSize: [6, 6],
    },
    spec: {
        properties: PropsSchema,
        state: {},
        methods: [
            {
                name: 'openDialog',
                parameters: Type.Object({
                    title: Type.String(),
                }),
            },
            {
                name: 'confirmDialog',
            },
            {
                name: 'cancelDialog',
            },
        ],
        slots: ['content'],
        styleSlots: [],
        events: ['cancelDialog', 'confirmDialog'],
    },
})), { impl: Dialog });
//# sourceMappingURL=Dialog.js.map