import { jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { useFieldSchema } from "@tachybase/schema";
import { css } from "@emotion/css";
import { useTranslation } from "react-i18next";
import { useFormBlockContext } from "../../../block-provider/FormBlockProvider.mjs";
import { useRecord } from "../../../record-provider/index.mjs";
import { Variable } from "../../../schema-component/antd/variable/Variable.mjs";
import { useVariableOptions } from "../../../schema-settings/VariableInput/hooks/useVariableOptions.mjs";
function _tagged_template_literal(strings, raw) {
    if (!raw) raw = strings.slice(0);
    return Object.freeze(Object.defineProperties(strings, {
        raw: {
            value: Object.freeze(raw)
        }
    }));
}
function _templateObject() {
    const data = _tagged_template_literal([
        "\n                & > .ant-space-item:first-child,\n                & > .ant-space-item:last-child {\n                  flex-shrink: 0;\n                }\n              "
    ]);
    _templateObject = function() {
        return data;
    };
    return data;
}
const getVariableComponentWithScope = (Com)=>(props)=>{
        const fieldSchema = useFieldSchema();
        const { form } = useFormBlockContext();
        const record = useRecord();
        const scope = useVariableOptions({
            collectionField: {
                uiSchema: fieldSchema
            },
            form,
            record,
            uiSchema: fieldSchema,
            noDisabled: true
        });
        return /*#__PURE__*/ jsx(Com, {
            ...props,
            scope: scope
        });
    };
const useURLAndHTMLSchema = ()=>{
    const { t } = useTranslation();
    const Com = useMemo(()=>getVariableComponentWithScope(Variable.TextArea), []);
    const urlSchema = useMemo(()=>({
            title: t('URL'),
            type: 'string',
            'x-decorator': 'FormItem',
            'x-component': Com,
            description: t('Do not concatenate search params in the URL'),
            'x-reactions': {
                dependencies: [
                    'mode'
                ],
                fulfill: {
                    state: {
                        hidden: '{{$deps[0] === "html"}}'
                    }
                }
            }
        }), [
        t,
        Com
    ]);
    const modeSchema = useMemo(()=>({
            title: '{{t("Mode")}}',
            'x-component': 'Radio.Group',
            'x-decorator': 'FormItem',
            default: 'url',
            enum: [
                {
                    value: 'url',
                    label: t('URL')
                },
                {
                    value: 'html',
                    label: t('HTML')
                }
            ]
        }), [
        t
    ]);
    const htmlSchema = useMemo(()=>({
            title: t('html'),
            type: 'string',
            'x-decorator': 'FormItem',
            'x-component': getVariableComponentWithScope(Variable.RawTextArea),
            'x-component-props': {
                rows: 10
            },
            'x-reactions': {
                dependencies: [
                    'mode'
                ],
                fulfill: {
                    state: {
                        hidden: '{{$deps[0] === "url"}}'
                    }
                }
            }
        }), [
        t
    ]);
    const paramsSchema = useMemo(()=>({
            type: 'array',
            'x-component': 'ArrayItems',
            'x-decorator': 'FormItem',
            title: '{{t("Search parameters")}}',
            items: {
                type: 'object',
                properties: {
                    space: {
                        type: 'void',
                        'x-component': 'Space',
                        'x-component-props': {
                            style: {
                                flexWrap: 'nowrap',
                                maxWidth: '100%'
                            },
                            className: css(_templateObject())
                        },
                        properties: {
                            name: {
                                type: 'string',
                                'x-decorator': 'FormItem',
                                'x-component': 'Input',
                                'x-component-props': {
                                    placeholder: '{{t("Name")}}'
                                }
                            },
                            value: {
                                type: 'string',
                                'x-decorator': 'FormItem',
                                'x-component': Com,
                                'x-component-props': {
                                    placeholder: '{{t("Value")}}',
                                    useTypedConstant: true,
                                    changeOnSelect: true
                                }
                            },
                            remove: {
                                type: 'void',
                                'x-decorator': 'FormItem',
                                'x-component': 'ArrayItems.Remove'
                            }
                        }
                    }
                }
            },
            'x-reactions': {
                dependencies: [
                    'mode'
                ],
                fulfill: {
                    state: {
                        hidden: '{{$deps[0] === "html"}}'
                    }
                }
            },
            properties: {
                add: {
                    type: 'void',
                    title: '{{t("Add parameter")}}',
                    'x-component': 'ArrayItems.Addition'
                }
            }
        }), [
        Com
    ]);
    const openInNewWindowSchema = useMemo(()=>({
            type: 'boolean',
            'x-content': t('Open in new window'),
            'x-decorator': 'FormItem',
            'x-component': 'Checkbox',
            'x-reactions': {
                dependencies: [
                    'mode'
                ],
                fulfill: {
                    state: {
                        hidden: '{{$deps[0] === "html"}}'
                    }
                }
            }
        }), [
        t
    ]);
    return {
        urlSchema,
        paramsSchema,
        openInNewWindowSchema,
        modeSchema,
        htmlSchema
    };
};
export { useURLAndHTMLSchema };
