import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
import { Alert, AlertDescription, AlertIcon, Box, Button, ButtonGroup, CloseButton, Flex, Grid, GridItem, IconButton, Select, Spacer, Stack, Text, } from "@chakra-ui/react";
import { Delete } from "@feedloop/icon";
import { ComponentPropertyEditorContainer } from "@qorebase/app-runtime/src/components/ComponentPropertyEditorContainer";
import { useSourceHooks } from "@qorebase/app-runtime/src/hooks/sourceHooks/useSourceHooks";
import { useSchemaSource } from "@qorebase/app-runtime/src/hooks/useSchemaSource";
import { isComponent, } from "@qorebase/app-runtime/src/interfaces";
import { RuntimeContext } from "@qorebase/app-runtime/src/RuntimeContext";
import produce from "immer";
import React from "react";
import store from "store2";
import { useHidden } from "../hooks/useHidden";
import FormulaEditor from "./FormulaEditor";
import PropertyEditorByType from "./property";
import StringPropertyEditor from "./property/string";
import { humanize, useHumanize, } from "@qorebase/app-runtime/src/utils/humanizeString";
import SourceSelector from "./SourceSelector";
const LimitHint = (props) => {
    const [isVisible, setIsVisible] = React.useState(false);
    React.useEffect(() => {
        setIsVisible(!store.session.get(`${props.instance.id}-${props.instance.source.limitType}`));
    }, [props.instance.id, props.instance.source.limitType]);
    const handleClose = React.useCallback(() => {
        store.session(`${props.instance.id}-${props.instance.source.limitType}`, true);
        setIsVisible(false);
    }, [props.instance.id, props.instance.source.limitType]);
    const alertDesc = React.useMemo(() => {
        if (props.instance.source.limitType === "retrieve_all") {
            return "Retrieving all data will set Display options limited to Infinite Scroll or Pagination and potentially increase loading time.";
        }
        else if (props.instance.source.limitType === "custom") {
            return "Setting data limit to more than 100 will set Display options limited to Infinite Scroll or Pagination.";
        }
    }, [props.instance.source]);
    return isVisible &&
        props.instance.source.limitType !== "default" &&
        props.instance.source.limitType !== undefined ? (_jsxs(Alert, Object.assign({ status: "warning" }, { children: [_jsx(AlertIcon, {}), _jsx(Box, { children: _jsx(AlertDescription, Object.assign({ fontSize: "sm" }, { children: alertDesc })) }), _jsx(CloseButton, { size: "sm", alignSelf: "flex-start", position: "relative", right: -1, top: -1, onClick: handleClose })] }))) : (_jsx(Spacer, {}));
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- for type inference
const EmptyFieldEditor = (props) => _jsx("div", {});
export const ComponentPropertyEditor = (props) => {
    var _a, _b, _c, _d;
    const queries = RuntimeContext.useSelectState((s) => s.schema.queries);
    const query = React.useMemo(() => {
        const q = queries.find((i) => { var _a, _b; return i.name === ((_b = (_a = props.instance) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.target); });
        if (!q)
            return;
        return Object.assign(Object.assign({}, q), { sourceType: "query" });
    }, [queries, (_b = (_a = props.instance) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.target]);
    const FieldEditor = React.useMemo(() => React.lazy(() => Promise.resolve(typeof props.Editor === "function" ? props.Editor() : props.Editor)
        .then((Editor) => {
        if (Editor && props.propName in Editor) {
            return Editor[props.propName];
        }
        if (props.propDef.type in PropertyEditorByType) {
            return PropertyEditorByType[props.propDef.type];
        }
        return EmptyFieldEditor;
    })
        .then((comp) => ({ default: comp }))), [props.propDef.type, props.propName, props.Editor]);
    const propname = (_c = props.propDef.label) !== null && _c !== void 0 ? _c : props.propName;
    const humanizedPropName = useHumanize(propname);
    const { isHidden } = useHidden(props.propDef.hideOrShownOn, Object.assign(Object.assign({}, props.values), { source: query }));
    if (isHidden)
        return null;
    return (_jsx(React.Suspense, Object.assign({ fallback: null }, { children: props.propDef.type === "state" ||
            props.propDef.type === "role" ||
            props.propDef.type === "action" ||
            (props.propDef.type === "custom" &&
                props.propDef.options.style === "full-width") ||
            ((_d = props.propDef.style) === null || _d === void 0 ? void 0 : _d.width) === "full-width" ? (_jsx(FieldEditor, { propDef: props.propDef, propName: props.propName, value: props.value, onChange: props.handleChange, view: props.view, values: props.values, instance: props.instance, 
            // @ts-ignore
            PropertyEditor: PropertyEditorByType })) : (_jsx(ComponentPropertyEditorContainer, Object.assign({ title: humanizedPropName, description: props.propDef.description }, { children: _jsx(FieldEditor, { propDef: props.propDef, propName: props.propName, value: props.value, onChange: props.handleChange, view: props.view, values: props.values, instance: props.instance, 
                // @ts-ignore
                PropertyEditor: PropertyEditorByType }) }))) })));
};
export const ColumnSetting = ({ instance, type }) => {
    const runtimeActions = RuntimeContext.useActions();
    if (!instance.metadata || !instance.metadata.layout)
        return;
    return (_jsxs(Stack, Object.assign({ p: 4 }, { children: [_jsx(Box, { children: _jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: "Column Setting" })) }), _jsx(ComponentPropertyEditorContainer, Object.assign({ title: "Position" }, { children: _jsxs(Select, Object.assign({ defaultValue: instance.metadata.layout.column, onChange: (e) => {
                        runtimeActions.setComponentLayoutMetadata({ component: instance.id }, Number(e.currentTarget.value));
                    } }, { children: [_jsx("option", Object.assign({ value: 1 }, { children: "Column 1" })), _jsx("option", Object.assign({ value: 2 }, { children: "Column 2" })), type === "col-3" && _jsx("option", Object.assign({ value: 3 }, { children: "Column 3" }))] })) }))] })));
};
export const NestedListSourceSelector = (props) => {
    var _a;
    const source = props.instance.source;
    const runtimeActions = RuntimeContext.useActions();
    const sources = RuntimeContext.useSelectState((state) => { var _a; return ((_a = state.schema) === null || _a === void 0 ? void 0 : _a.tables) || []; });
    const handleSelect = React.useCallback((option) => {
        runtimeActions.setComponentSource({ component: props.instance.id }, produce(source, (draft) => {
            draft.target = option.value;
        }));
    }, [props.instance.id, source]);
    const onRowIDChange = React.useCallback((rowID) => {
        runtimeActions.setComponentSource({ component: props.instance.id }, produce(source, (draft) => {
            draft.rowId = rowID;
        }));
    }, [props.instance.id, source]);
    const handleSelectField = React.useCallback((e) => {
        const value = e.currentTarget.value;
        runtimeActions.setComponentSource({ component: props.instance.id }, produce(source, (draft) => {
            draft.fieldId = value;
        }));
    }, [props.instance.id, source]);
    const fields = RuntimeContext.useSelectState((state) => {
        var _a;
        return ((_a = state.schema.tables
            .find((view) => view.name === props.instance.source.target)) === null || _a === void 0 ? void 0 : _a.columns.filter((field) => field.type === "array")) || [];
    });
    return (_jsxs(Stack, Object.assign({ spacing: 2, p: 4, borderBottom: "1px", borderColor: "gray.300" }, { children: [_jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: "Data" })), _jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2 }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Source" }) })), _jsx(GridItem, Object.assign({ colSpan: 9 }, { children: _jsx(SourceSelector, { value: source.target, onChange: handleSelect, sources: sources }) }))] })), _jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2 }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Default Row ID" }) })), _jsx(GridItem, Object.assign({ colSpan: 9 }, { children: _jsx(StringPropertyEditor, { onChange: onRowIDChange, propDef: { type: "string", options: { format: "text" } }, propName: "defaultRowID", value: ((_a = source === null || source === void 0 ? void 0 : source.rowId) === null || _a === void 0 ? void 0 : _a.toString()) || "" }) }))] })), _jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2 }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Field" }) })), _jsx(GridItem, Object.assign({ colSpan: 9 }, { children: _jsx(Select, Object.assign({ value: source.fieldId, placeholder: "Select a column", onChange: handleSelectField }, { children: fields.map((field) => (_jsx("option", Object.assign({ value: field.name }, { children: field.name }), field.name))) })) }))] }))] })));
};
export const ListSourceSelector = (props) => {
    var _a;
    const runtimeActions = RuntimeContext.useActions();
    const schemaSources = useSchemaSource([
        "tables",
        "views",
        "insights",
        "queries",
    ]);
    const customSources = RuntimeContext.useSelectState((state) => state.customSources);
    const sources = React.useMemo(() => {
        return schemaSources
            .map((view) => ({
            name: view.name,
            label: view.name,
        }))
            .concat(Object.entries(customSources).map(([name, source]) => ({
            name,
            label: source.name,
        })));
    }, [schemaSources, customSources]);
    const sourceHooks = useSourceHooks(props.instance.source);
    const handleSelect = React.useCallback((option) => {
        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
            draft.target = option.value;
        }));
    }, [props.instance.id, props.instance.source]);
    const handleUpdateParams = React.useCallback((slug, value) => {
        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
            if (draft.type === "list" || draft.type === "standalone-list") {
                if (value === "0") {
                    draft.params[slug] = "";
                }
                else {
                    draft.params[slug] = value;
                }
            }
        }));
    }, [props.instance.id, props.instance.source]);
    return (_jsxs(Stack, Object.assign({ spacing: 2, p: 4, borderBottom: "1px", borderColor: "gray.300" }, { children: [_jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: "Data" })), _jsxs(_Fragment, { children: [_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2 }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Source" }) })), _jsx(GridItem, Object.assign({ colSpan: 9 }, { children: _jsx(SourceSelector, { value: props.instance.source.target, onChange: handleSelect, sources: sources }) }))] })), customSources[props.instance.source.target] && (_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2, my: "8px" }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Item Value" }) })), _jsx(GridItem, Object.assign({ colSpan: 9, my: "8px" }, { children: _jsx(PropertyEditorByType.string, { propDef: {
                                        type: "string",
                                        options: { format: "text" },
                                    }, propName: "itemId", value: props.instance.source.itemId, onChange: (val) => {
                                        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
                                            draft.itemId = val;
                                        }));
                                    } }) }))] }))), props.instance.source.type === "list" &&
                        (isComponent(props.instance, "@qorebase/list-component") ||
                            isComponent(props.instance, "@qorebase/list-card-component")) && (_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2, mt: "8px" }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Limit" }) })), _jsx(GridItem, Object.assign({ colSpan: 9, mt: "8px" }, { children: _jsxs(Select, Object.assign({ size: "sm", value: props.instance.source.limitType, onChange: (val) => {
                                        const value = val.target.value;
                                        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
                                            draft.limitType = value;
                                            if (value !== "retrieve_all") {
                                                draft.limit = 50;
                                            }
                                            else {
                                                draft.limit = undefined;
                                            }
                                        }));
                                    } }, { children: [_jsx("option", Object.assign({ value: "", style: { display: "none" } }, { children: "Set data limit" })), _jsx("option", Object.assign({ value: "default", id: "default" }, { children: "50 (default)" })), _jsx("option", Object.assign({ value: "custom", id: "custom" }, { children: "Custom limit" })), _jsx("option", Object.assign({ value: "retrieve_all", id: "retriveAll" }, { children: "Retrieve all data" }))] })) }))] }))), _jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2, my: "8px" }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Prefetch" }) })), _jsx(GridItem, Object.assign({ colSpan: 9, my: "8px" }, { children: _jsx(PropertyEditorByType.boolean, { propDef: {
                                        type: "boolean",
                                        options: {},
                                    }, propName: "limit", value: !!props.instance.source.prefetch, onChange: (prefetch) => {
                                        runtimeActions.setComponentSource({ component: props.instance.id }, Object.assign(Object.assign({}, props.instance.source), { prefetch }));
                                    } }) }))] })), 
                    //@ts-ignore
                    props.instance.source.limitType === "custom" && (_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2, my: "8px" }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, Object.assign({ fontSize: "sm" }, { children: "Custom Limit" })) })), _jsx(GridItem, Object.assign({ colSpan: 9, my: "8px" }, { children: _jsx(PropertyEditorByType.string, { propDef: {
                                        type: "string",
                                        options: { format: "text" },
                                    }, propName: "set limit", 
                                    //@ts-ignore
                                    value: (_a = props.instance.source.limit) === null || _a === void 0 ? void 0 : _a.toString(), onChange: (val) => {
                                        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
                                            const limit = parseInt(val);
                                            if (isNaN(limit)) {
                                                draft.limit = undefined;
                                            }
                                            else {
                                                draft.limit = limit;
                                            }
                                        }));
                                    } }) }))] }))), props.instance.source.type === "list" && (_jsx(LimitHint, { instance: props.instance })), sourceHooks.params.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: "Parameters" })), sourceHooks.params.map((param) => {
                                return (_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2, my: "8px" }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: param.slug }) })), _jsx(GridItem, Object.assign({ colSpan: 9, my: "8px" }, { children: _jsx(PropertyEditorByType.string, { propDef: {
                                                    type: "string",
                                                    options: { format: "text" },
                                                }, propName: param.slug, value: (props.instance.source.type === "list" ||
                                                    props.instance.source.type === "standalone-list") &&
                                                    props.instance.source.params[param.slug], onChange: (val) => {
                                                    handleUpdateParams(param.slug, val);
                                                } }) }))] }), param.slug));
                            })] }))] })] })));
};
export const RecordSourceSelector = (props) => {
    var _a, _b, _c;
    const runtimeActions = RuntimeContext.useActions();
    const schema = RuntimeContext.useSelectState((state) => state.schema);
    const customSources = RuntimeContext.useSelectState((state) => state.customSources);
    const sources = React.useMemo(() => {
        const tableWithViews = schema["tables"]
            .concat(schema["views"])
            .concat(schema["insights"])
            .concat(schema["queries"]);
        return tableWithViews
            .map((view) => ({
            name: view.name,
            label: view.name,
        }))
            .concat(Object.entries(customSources).map(([name, source]) => ({
            name,
            label: source.name,
        })));
    }, [schema, customSources]);
    const sourceHooks = useSourceHooks(props.instance.source);
    const handleSelect = React.useCallback((option) => {
        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
            draft.target = option.value;
        }));
    }, [props.instance.id, props.instance.source]);
    const handleRowIDChange = React.useCallback((rowID) => {
        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
            draft.rowId = rowID;
        }));
    }, [props.instance.id, props.instance.source]);
    const handleUpdateParams = React.useCallback((slug, value) => {
        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
            if (value === "0") {
                draft.params[slug] = "";
            }
            else {
                draft.params[slug] = value;
            }
        }));
    }, [props.instance.id, props.instance.source]);
    return (_jsxs(Stack, Object.assign({ spacing: 2, p: 4, borderBottom: "1px", borderColor: "gray.300" }, { children: [_jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: "Data" })), _jsxs(_Fragment, { children: [_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2 }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Source" }) })), _jsx(GridItem, Object.assign({ colSpan: 9 }, { children: _jsx(SourceSelector, { value: props.instance.source.target, onChange: handleSelect, sources: sources }) }))] })), _jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2 }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Default Row" }) })), _jsx(GridItem, Object.assign({ colSpan: 9 }, { children: _jsx(Select
                                // @ts-ignore
                                , Object.assign({ 
                                    // @ts-ignore
                                    value: ((_a = props.instance.source.defaultRow) === null || _a === void 0 ? void 0 : _a.type) || "row-id", onChange: (e) => {
                                        const type = e.currentTarget.value;
                                        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
                                            draft.defaultRow =
                                                type === "row-id"
                                                    ? { type, rowId: "" }
                                                    : { type: "first-row" };
                                        }));
                                    }, size: "sm" }, { children: ["row-id", "first-row"].map((mode) => (_jsx("option", Object.assign({ value: mode }, { children: humanize(mode) }), mode))) })) }))] })), ((_b = props.instance.source.defaultRow) === null || _b === void 0 ? void 0 : _b.type) === "row-id" && (_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2 }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Default Row ID" }) })), _jsx(GridItem, Object.assign({ colSpan: 9 }, { children: _jsx(StringPropertyEditor, { onChange: handleRowIDChange, propDef: { type: "string", options: { format: "text" } }, propName: "defaultRowID", value: (_c = props.instance.source) === null || _c === void 0 ? void 0 : _c.rowId.toString() }) }))] }))), sourceHooks.params.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: "Parameters" })), sourceHooks.params.map((param) => {
                                return (_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2, my: "8px" }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: param.slug }) })), _jsx(GridItem, Object.assign({ colSpan: 9, my: "8px" }, { children: _jsx(PropertyEditorByType.string, { propDef: {
                                                    type: "string",
                                                    options: { format: "text" },
                                                }, propName: param.slug, value: props.instance.source.params[param.slug], onChange: (val) => {
                                                    handleUpdateParams(param.slug, val);
                                                } }) }))] }), param.slug));
                            })] }))] })] })));
};
export const RecordListSourceSelector = (props) => {
    var _a;
    const sourceType = props.instance.source.sourceType;
    const runtimeActions = RuntimeContext.useActions();
    const schema = RuntimeContext.useSelectState((state) => state.schema);
    const customSources = RuntimeContext.useSelectState((state) => state.customSources);
    const sourceHooks = useSourceHooks(props.instance.source);
    const sources = React.useMemo(() => {
        const tables = schema.tables
            .concat(schema.views)
            .concat(schema.insights)
            .concat(schema.queries);
        return tables
            .map((view) => ({
            name: view.name,
            label: view.name,
        }))
            .concat(Object.entries(customSources).map(([name, source]) => ({
            name,
            label: source.name,
        })));
    }, [schema, customSources]);
    const handleSelect = React.useCallback((option) => {
        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
            draft.target = option.value;
        }));
    }, [props.instance.id, props.instance.source]);
    const handleRowIDChange = React.useCallback((rowID) => {
        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
            if (draft.sourceType === "record") {
                draft.rowId = rowID;
            }
        }));
    }, [props.instance.id, props.instance.source]);
    const handleChangeList = React.useCallback(() => {
        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
            draft.sourceType = "list";
        }));
    }, [props.instance.id, props.instance.source]);
    const handleChangeRecord = React.useCallback(() => {
        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
            draft.sourceType = "record";
        }));
    }, [props.instance.id, props.instance.source]);
    const handleUpdateParams = React.useCallback((slug, value) => {
        runtimeActions.setComponentSource({ component: props.instance.id }, produce(props.instance.source, (draft) => {
            if (value === "0") {
                draft.params[slug] = "";
            }
            else {
                draft.params[slug] = value;
            }
        }));
    }, [props.instance.id, props.instance.source]);
    return (_jsxs(Stack, Object.assign({ spacing: 2, p: 4, borderBottom: "1px", borderColor: "gray.300" }, { children: [_jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: "Data" })), _jsxs(_Fragment, { children: [_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2 }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Source" }) })), _jsx(GridItem, Object.assign({ colSpan: 9 }, { children: _jsx(SourceSelector, { value: props.instance.source.target, onChange: handleSelect, sources: sources }) }))] })), _jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2, my: "8px" }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Prefetch" }) })), _jsx(GridItem, Object.assign({ colSpan: 9, my: "8px" }, { children: _jsx(PropertyEditorByType.boolean, { propDef: {
                                        type: "boolean",
                                        options: {},
                                    }, propName: "limit", value: !!props.instance.source.prefetch, onChange: (prefetch) => {
                                        runtimeActions.setComponentSource({ component: props.instance.id }, Object.assign(Object.assign({}, props.instance.source), { prefetch }));
                                    } }) }))] })), _jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2, my: "8px" }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Type" }) })), _jsx(GridItem, Object.assign({ colSpan: 9, my: "8px" }, { children: _jsx(Flex, Object.assign({ justifyContent: "flex-end" }, { children: _jsxs(ButtonGroup, Object.assign({ variant: "solid", spacing: "1", p: 1, border: "1px", borderColor: "gray.200", rounded: "md", size: "sm" }, { children: [_jsx(Button, Object.assign({ onClick: handleChangeList, rounded: "md", border: "1px", bg: sourceType === "list" ? "blue.50" : "white", color: sourceType === "list" ? "blue.500" : "black", borderColor: sourceType === "list" ? "blue.200" : "white", m: 0, _hover: { bg: "#eff4fb" } }, { children: "List" })), _jsx(Button, Object.assign({ onClick: handleChangeRecord, rounded: "md", border: "1px", bg: sourceType === "record" ? "blue.50" : "white", color: sourceType === "record" ? "blue.500" : "black", borderColor: sourceType === "record" ? "blue.200" : "white", m: 0, _hover: { bg: "#eff4fb" } }, { children: "Single" }))] })) })) }))] })), props.instance.source.sourceType === "record" && (_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2 }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: "Row ID" }) })), _jsx(GridItem, Object.assign({ colSpan: 9 }, { children: _jsx(StringPropertyEditor, { onChange: handleRowIDChange, propDef: { type: "string", options: { format: "text" } }, propName: "rowId", value: (_a = props.instance.source) === null || _a === void 0 ? void 0 : _a.rowId }) }))] }))), sourceHooks.params.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: "Parameters" })), sourceHooks.params.map((param) => {
                                return (_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", gap: 2, my: "8px" }, { children: [_jsx(GridItem, Object.assign({ colSpan: 3, display: "flex", alignItems: "center" }, { children: _jsx(Text, { children: param.slug }) })), _jsx(GridItem, Object.assign({ colSpan: 9, my: "8px" }, { children: _jsx(PropertyEditorByType.string, { propDef: {
                                                    type: "string",
                                                    options: { format: "text" },
                                                }, propName: param.slug, value: props.instance.source.params[param.slug], onChange: (val) => {
                                                    handleUpdateParams(param.slug, val);
                                                } }) }))] }), param.slug));
                            })] }))] })] })));
};
export const ShowAndDisableConditionEditor = (props) => {
    const runtimeActions = RuntimeContext.useActions();
    if (!props.instance)
        return null;
    return (_jsx(_Fragment, { children: props.instance[props.condition].conditions.map((cond, i) => {
            return (_jsxs(Grid, Object.assign({ templateColumns: "repeat(8, 1fr)", gap: 1 }, { children: [_jsx(GridItem, Object.assign({ colSpan: 7, maxW: "full" }, { children: _jsx(FormulaEditor, { type: "boolean", value: cond.formula, onChange: (value) => runtimeActions[props.condition === "showCondition"
                                ? "updateComponentShowCondition"
                                : "updateComponentDisableCondition"]({ component: props.instance.id }, (draft) => {
                                draft.conditions[i].formula = value;
                            }) }) })), _jsx(GridItem, Object.assign({ colSpan: 1, maxW: "full" }, { children: _jsx(IconButton, { as: Delete, "aria-label": "delete", ml: 2, size: "sm", padding: 2, variant: "outline", cursor: "pointer", onClick: () => runtimeActions[props.condition === "showCondition"
                                ? "removeComponentShowCondition"
                                : "removeComponentDisableCondition"]({ component: props.instance.id }, i) }) }))] }), cond.id));
        }) }));
};
//# sourceMappingURL=ComponentPropertyEditor.js.map