import { jsx } from "react/jsx-runtime";
import { useCallback, useContext } from "react";
import { FormLayout } from "@tachybase/components";
import { SchemaOptionsContext, uid } from "@tachybase/schema";
import { useTranslation } from "react-i18next";
import { SchemaInitializerItem, useSchemaInitializer } from "../../application/index.mjs";
import { Icon } from "../../icon/index.mjs";
import { FormDialog, SchemaComponent, SchemaComponentOptions } from "../../schema-component/index.mjs";
import { useStyles } from "../../schema-component/antd/menu/MenuItemInitializers/index.mjs";
import { useGlobalTheme } from "../../style/theme/index.mjs";
const PageMenuItem = ()=>{
    const { insert } = useSchemaInitializer();
    const { t } = useTranslation();
    const options = useContext(SchemaOptionsContext);
    const { theme } = useGlobalTheme();
    const { styles } = useStyles();
    const handleClick = useCallback(async ()=>{
        const values = await FormDialog(t('Add page'), ()=>/*#__PURE__*/ jsx(SchemaComponentOptions, {
                scope: options.scope,
                components: {
                    ...options.components
                },
                children: /*#__PURE__*/ jsx(FormLayout, {
                    layout: 'vertical',
                    children: /*#__PURE__*/ jsx(SchemaComponent, {
                        schema: {
                            properties: {
                                title: {
                                    title: t('Menu item title'),
                                    required: true,
                                    'x-component': 'Input',
                                    'x-decorator': 'FormItem'
                                },
                                icon: {
                                    title: t('Icon'),
                                    'x-component': 'IconPicker',
                                    'x-decorator': 'FormItem'
                                }
                            }
                        }
                    })
                })
            }), theme).open({
            initialValues: {}
        });
        const { title, icon } = values;
        insert({
            type: 'void',
            title,
            'x-component': 'Menu.Item',
            'x-decorator': 'ACLMenuItemProvider',
            'x-component-props': {
                icon
            },
            'x-server-hooks': [
                {
                    type: 'onSelfCreate',
                    method: 'bindMenuToRole'
                },
                {
                    type: 'onSelfSave',
                    method: 'extractTextToLocale'
                }
            ],
            properties: {
                page: {
                    type: 'void',
                    'x-component': 'Page',
                    'x-async': true,
                    properties: {
                        [uid()]: {
                            type: 'void',
                            'x-component': 'Grid',
                            'x-initializer': 'page:addBlock',
                            properties: {}
                        }
                    }
                }
            }
        });
    }, [
        insert,
        options.components,
        options.scope,
        t,
        theme
    ]);
    return /*#__PURE__*/ jsx(SchemaInitializerItem, {
        icon: /*#__PURE__*/ jsx(Icon, {
            type: 'FileOutlined'
        }),
        title: t('Create page'),
        onClick: handleClick,
        className: styles.menuItem
    });
};
export { PageMenuItem };
