import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, FormControl, Select, Switch, VStack, Input, } from "@chakra-ui/react";
import { ComponentPropertyEditorContainer } from "@qorebase/app-runtime/src/components/ComponentPropertyEditorContainer";
import { useViewFieldsVariables } from "../../hooks/useViewFieldsVariables";
import produce from "immer";
import React from "react";
import { debounce } from "ts-debounce";
import { useHumanize } from "@qorebase/app-runtime/src/utils/humanizeString";
export const fieldMatches = {
    action: null,
    boolean: "boolean",
    text: "string",
    integer: "number",
    float: "number",
    date: "date",
    datetime: "date",
    file: "string",
    multiple_files: "string",
    formula: null,
    json: null,
    lookup: null,
    password: "string",
    role: null,
    rollup: null,
    select: "string",
    richtext: "richtext",
    point: "point",
};
const StatePropertyEditor = (props) => {
    var _a;
    const variables = props.view && "schemaUrl" in props.view
        ? props.view.params
            .filter((field) => field.type === props.propDef.options.field.type)
            .map((param) => ({ id: param.slug, display: param.slug }))
        : useViewFieldsVariables(props.view, (field) => {
            const fieldType = fieldMatches[field.type];
            return props.propDef.options.field.type === "string" &&
                props.propDef.options.field.options.format === "qore_select"
                ? field.type === "select"
                : props.propDef.options.field.type === "relation"
                    ? !!field.references
                    : props.propDef.options.field.type === "number"
                        ? fieldType === "number" && !field.references
                        : props.propDef.options.field.type === "multiple-field"
                            ? props.propDef.options.field.options.fields.includes(fieldType)
                            : fieldType === props.propDef.options.field.type;
        });
    const variablesSet = React.useMemo(() => new Set(variables.map((s) => s.id)), [variables]);
    const handleChangeInputID = React.useCallback(debounce((inputID) => {
        props.onChange(produce(props.value, (draft) => {
            if (variablesSet.has(inputID)) {
                draft.type = "field";
            }
            else {
                draft.type = "custom";
            }
            draft.inputID = inputID;
        }));
    }, 300), [props.onChange, props.value, variablesSet]);
    const handleChangeRequiredField = React.useCallback(debounce((value) => {
        props.onChange(produce(props.value, (draft) => {
            if (draft.validation) {
                draft.validation.required = value;
            }
            else {
                draft.validation = {
                    required: value,
                };
            }
        }));
    }, 300), [props.onChange, props.value]);
    const humanizedPropName = useHumanize(props.propName);
    return (_jsxs(Box, { children: [props.propDef.options.inputID !== "toggle" &&
                props.propDef.options.inputID !== "__FileGalleryInput__" &&
                props.propDef.options.field.type !== "multiple-field" && (_jsx(ComponentPropertyEditorContainer, Object.assign({ title: "Required" }, { children: _jsx(Box, { children: _jsx(Switch, { defaultChecked: (_a = props.value.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (e) => handleChangeRequiredField(e.currentTarget.checked) }) }) }))), _jsx(ComponentPropertyEditorContainer, Object.assign({ title: humanizedPropName }, { children: _jsx(Box, Object.assign({ w: "100%" }, { children: _jsxs(VStack, { children: [_jsx(FormControl, { children: _jsx(Select, Object.assign({ size: "sm", value: props.value.type === "custom"
                                        ? props.value.type
                                        : props.value.inputID, placeholder: "Field in this context", onChange: (e) => {
                                        handleChangeInputID(e.currentTarget.value);
                                    } }, { children: [...variables, { id: "custom", display: "Custom" }].map((s) => (_jsx("option", Object.assign({ value: s.id }, { children: s.display }), s.id))) })) }), props.value.type === "custom" && (_jsx(FormControl, { children: _jsx(Input, { placeholder: "My custom input", size: "sm", defaultValue: props.value.inputID, onChange: (e) => {
                                        handleChangeInputID(e.currentTarget.value);
                                    } }) }))] }) })) }))] }));
};
export default StatePropertyEditor;
//# sourceMappingURL=state.js.map