import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import react, { useCallback, useMemo, useState } from "react";
import { Select, Space } from "antd";
import { useTranslation } from "react-i18next";
import { useFormBlockContext } from "../../block-provider/index.mjs";
import { useRecord } from "../../record-provider/index.mjs";
import { Variable } from "../../schema-component/index.mjs";
import { useVariableOptions } from "../VariableInput/hooks/useVariableOptions.mjs";
import { useCompatOldVariables } from "../VariableInput/VariableInput.mjs";
import { DynamicComponent } from "./DynamicComponent.mjs";
const { Option } = Select;
const ValueDynamicComponent = (props)=>{
    const { fieldValue, schema, setValue, collectionName } = props;
    const [mode, setMode] = useState((null == fieldValue ? void 0 : fieldValue.mode) || 'constant');
    const { t } = useTranslation();
    const { form } = useFormBlockContext();
    const record = useRecord();
    const scope = useVariableOptions({
        collectionField: {
            uiSchema: schema
        },
        form,
        record,
        uiSchema: schema,
        noDisabled: true
    });
    const { compatOldVariables } = useCompatOldVariables({
        collectionField: {
            uiSchema: schema,
            collectionName
        },
        uiSchema: schema,
        blockCollectionName: collectionName
    });
    const constantStyle = useMemo(()=>({
            minWidth: 150,
            maxWidth: 430,
            marginLeft: 5
        }), []);
    const handleChangeOfConstant = useCallback((value)=>{
        setValue({
            mode,
            value
        });
    }, [
        mode,
        setValue
    ]);
    const expressStyle = useMemo(()=>({
            minWidth: 150,
            maxWidth: 430,
            fontSize: 13
        }), []);
    const handleChangeOfExpress = useCallback((value)=>{
        const result = value.replaceAll("".concat(collectionName, "."), '').replaceAll('$system.', '').trim();
        setValue({
            mode,
            value,
            result
        });
    }, [
        collectionName,
        mode,
        setValue
    ]);
    const textAreaStyle = useMemo(()=>({
            minWidth: 460,
            marginRight: 15
        }), []);
    const compatScope = useMemo(()=>compatOldVariables(scope, {
            value: null == fieldValue ? void 0 : fieldValue.value
        }), [
        compatOldVariables,
        null == fieldValue ? void 0 : fieldValue.value,
        scope
    ]);
    const modeMap = {
        constant: /*#__PURE__*/ jsx("div", {
            role: "button",
            "aria-label": "dynamic-component-linkage-rules",
            style: constantStyle,
            children: /*#__PURE__*/ react.createElement(DynamicComponent, {
                value: (null == fieldValue ? void 0 : fieldValue.value) || fieldValue,
                schema,
                onChange: handleChangeOfConstant
            })
        }),
        express: /*#__PURE__*/ jsxs("div", {
            role: "button",
            "aria-label": "dynamic-component-linkage-rules",
            style: expressStyle,
            children: [
                /*#__PURE__*/ jsx(Variable.TextArea, {
                    value: null == fieldValue ? void 0 : fieldValue.value,
                    onChange: handleChangeOfExpress,
                    scope: compatScope,
                    style: textAreaStyle
                }),
                /*#__PURE__*/ jsxs(Fragment, {
                    children: [
                        /*#__PURE__*/ jsxs("span", {
                            style: {
                                marginLeft: '.25em'
                            },
                            className: 'ant-formily-item-extra',
                            children: [
                                t('Syntax references'),
                                ":"
                            ]
                        }),
                        /*#__PURE__*/ jsx("a", {
                            href: "https://formulajs.info/functions/",
                            target: "_blank",
                            rel: "noreferrer",
                            children: "Formula.js"
                        })
                    ]
                })
            ]
        })
    };
    return /*#__PURE__*/ jsxs(Space.Compact, {
        children: [
            /*#__PURE__*/ jsxs(Select, {
                role: "button",
                "data-testid": "select-linkage-value-type",
                value: mode,
                style: {
                    width: 150
                },
                onChange: (value)=>{
                    setMode(value);
                    setValue({
                        mode: value
                    });
                },
                children: [
                    /*#__PURE__*/ jsx(Option, {
                        value: "constant",
                        children: t('Constant value')
                    }),
                    /*#__PURE__*/ jsx(Option, {
                        value: "express",
                        children: t('Expression')
                    }),
                    /*#__PURE__*/ jsx(Option, {
                        value: "empty",
                        children: t('Empty')
                    })
                ]
            }),
            modeMap[mode]
        ]
    });
};
export { ValueDynamicComponent };
