import { j as jsxRuntimeExports } from "../../../../../../../_virtual/jsx-runtime.js";
import { p as Me, j as Oe } from "../../../../../../sdk/dist/shared/chunk-AFVJZPLS.js";
import "@sinclair/typebox";
import "../../../../../../sdk/dist/shared/chunk-A3GF4PYW.js";
import "../../../../../../sdk/dist/shared/chunk-W33JMRRN.js";
import { useState, startTransition, useCallback, Fragment } from "react";
import "../../../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-hot-toast/dist/index.js";
import { BsDatabaseAdd, BsDatabaseDown, BsAt, BsCrosshair } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/bs/index.js";
import { FieldTitle } from "../field-factory.js";
import { useSiteQueries, useSiteQuery, usePagePathParams } from "../../../../../../../use-page-data.js";
import { useDatasources, useDatasource } from "../../../hooks/use-datasource.js";
import { FiEdit } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/fi/index.js";
import { tx as D } from "../../../../../../style-system/dist/twind.js";
import { LuPlus } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/lu/index.js";
import TagsInput, { TagsSelect } from "../../TagsInput.js";
import { Button as o } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/button.js";
import { Root as s, Content as p, Title as g, Description as m } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/dialog.js";
import { Tooltip as e } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/tooltip.js";
import { IconButton as o$1 } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/icon-button.js";
import { Root as C, Trigger as u, Content as g$1, Group as y, Label as h, Item as v } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/select.js";
import { Root as u$1 } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/text-field.js";
import { Root as p$1, Item as l } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/segmented-control.js";
const baseOperators = [
  { value: "eq", label: "Equals" },
  { value: "ne", label: "Not equals" }
];
const stringOperators = [
  { value: "contains", label: "Contains" },
  { value: "notContains", label: "Not contains" },
  { value: "startsWith", label: "Starts with" },
  { value: "notStartsWith", label: "Not starts with" },
  { value: "endsWith", label: "Ends with" },
  { value: "notEndsWith", label: "Not ends with" }
];
const nanoIdOperators = [{ value: "eq", label: "Equals" }];
const arrayOperators = [
  { value: "contains", label: "Contains" },
  { value: "notContains", label: "Not contains" },
  { value: "containsAll", label: "Contains all" },
  { value: "containsAny", label: "Contains any" },
  { value: "notContainsAny", label: "Not contains any" }
];
const numberOperators = [
  { value: "lt", label: "Less than" },
  { value: "lte", label: "Less than or equal" },
  { value: "gt", label: "Greater than" },
  { value: "gte", label: "Greater than or equal" }
];
const dateOperators = [
  { value: "before", label: "Before Date" },
  { value: "after", label: "After Date" },
  { value: "beforeNow", label: "Before Now" },
  { value: "afterNow", label: "After Now" }
];
function getOperatorLabel(operator) {
  const allOperators = [
    ...baseOperators,
    ...stringOperators,
    ...nanoIdOperators,
    ...arrayOperators,
    ...numberOperators,
    ...dateOperators
  ];
  return allOperators.find((op) => op.value === operator)?.label;
}
function getValueLabel(value) {
  if (typeof value === "string") {
    return value;
  }
  if (Array.isArray(value)) {
    return value.join(", ");
  }
  return "";
}
const QueryField = (props) => {
  const { currentValue = [], onChange, schema, title, description, brickId } = props;
  const datasources = useDatasources();
  const availableQueries = useSiteQueries();
  const [showModal, setShowModal] = useState(false);
  if (!datasources.length) {
    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "field field-query basis-full", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(FieldTitle, { title, description }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: "No database available. Create a database first so you can create queries." })
    ] });
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-1 gap-2", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "query-field flex items-center justify-between flex-1", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(FieldTitle, { withIcon: true, title, description }),
      availableQueries.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
        o,
        {
          variant: "soft",
          size: "1",
          radius: "full",
          type: "button",
          onClick: () => {
            setShowModal(true);
          },
          children: "Manage page queries"
        }
      )
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "basis-full flex flex-col gap-2", children: [
      availableQueries.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: "No queries available. Create a query first so you can use it in this page." }),
      currentValue.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "list-none p-0 m-0 mt-2 ml-3 font-normal", children: currentValue.map((query, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { className: "flex items-center gap-1.5 mb-2", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(BsDatabaseAdd, {}),
        availableQueries.find((q) => q.id === query.queryId)?.label,
        " ",
        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-gray-500 text-xs", children: [
          "(",
          query.alias,
          ")"
        ] })
      ] }, index)) })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      QueryModal,
      {
        onChange,
        queries: currentValue,
        open: showModal,
        onClose: () => setShowModal(false)
      }
    )
  ] });
};
function QueryModal({
  queries: initialQueries,
  open,
  onClose,
  onChange
}) {
  const availableQueries = useSiteQueries();
  const [showCreationForm, setShowCreationForm] = useState(initialQueries.length === 0);
  const [editingQuery, setEditingQuery] = useState(null);
  const [queries, setQueries] = useState(initialQueries);
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    s,
    {
      open,
      onOpenChange: (open2) => {
        if (!open2) {
          onClose?.();
        }
      },
      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
        p,
        {
          "aria-describedby": "Queries managament",
          maxWidth: "760px",
          minHeight: "80dvh",
          className: "overflow-y-clip flex flex-col gap-y-2",
          children: [
            /* @__PURE__ */ jsxRuntimeExports.jsxs(g, { className: "flex items-center gap-3 pl-0 -ml-3", children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx(BsDatabaseDown, { className: "h-6 w-6 text-upstart-600" }),
              "Page queries",
              queries.length < 5 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
                o,
                {
                  size: "2",
                  variant: "outline",
                  radius: "medium",
                  className: D("!ml-auto", showCreationForm && "!opacity-0"),
                  onClick: () => {
                    setEditingQuery(null);
                    setShowCreationForm(true);
                  },
                  children: [
                    /* @__PURE__ */ jsxRuntimeExports.jsx(LuPlus, { className: "w-4 h-4" }),
                    "Add Query"
                  ]
                }
              )
            ] }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(m, { children: "Page queries can be used for fetching dynamic content and use it in your page. You can specify parameters for queries that accept them. Up to 5 queries can be set for a page." }),
            showCreationForm && /* @__PURE__ */ jsxRuntimeExports.jsx(
              QueryEditor,
              {
                showCancelBtn: initialQueries.length > 0,
                query: editingQuery,
                onChange: (query) => {
                  setQueries((prev) => prev.filter((q) => q.alias !== query.alias).concat(query));
                  setShowCreationForm(false);
                  startTransition(() => {
                    onChange(queries);
                  });
                },
                onClose: () => setShowCreationForm(false)
              }
            ),
            queries.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col border border-gray-200 rounded-lg overflow-hidden -mx-1 mt-3 shadow-sm", children: queries.map((query) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
              "div",
              {
                className: "flex items-center justify-between p-4 [&:not(:last-child)]:border-b border-gray-200 ",
                children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: availableQueries.find((q) => q.id === query.queryId)?.label }),
                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-6 items-center justify-start text-sm  text-gray-500", children: [
                      /* @__PURE__ */ jsxRuntimeExports.jsx(e, { content: `Alias`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex gap-1 items-center cursor-help", children: [
                        /* @__PURE__ */ jsxRuntimeExports.jsx(BsAt, { className: "text-upstart-500" }),
                        query.alias
                      ] }) }),
                      (query.params?.length ?? 0) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(e, { content: `Parameters`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex gap-1 items-center cursor-help", children: [
                        /* @__PURE__ */ jsxRuntimeExports.jsx(BsCrosshair, { className: "text-upstart-500" }),
                        query.params?.map((p2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex gap-1 items-center", children: [
                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: p2.field }),
                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: getOperatorLabel(p2.op)?.toLocaleLowerCase() }),
                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: getValueLabel(p2.value) })
                        ] }, p2.field))
                      ] }) })
                    ] })
                  ] }),
                  /* @__PURE__ */ jsxRuntimeExports.jsx(
                    o$1,
                    {
                      size: "2",
                      variant: "soft",
                      color: "violet",
                      onClick: () => {
                        setEditingQuery(query);
                        setShowCreationForm(true);
                      },
                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiEdit, { className: "w-4 h-4" })
                    }
                  )
                ]
              },
              query.queryId
            )) })
          ]
        }
      )
    }
  );
}
function QueryEditor({
  query: initialQuery,
  onClose,
  showCancelBtn,
  onChange
}) {
  const [query, setQuery] = useState(
    initialQuery ?? {
      params: []
    }
  );
  const queryReference = useSiteQuery(query?.queryId);
  const params = queryReference?.parameters ?? [];
  const reset = () => {
    setQuery({
      params: []
    });
  };
  const datasource = useDatasource(queryReference?.datasourceId);
  const availableQueries = useSiteQueries();
  const pageParams = usePagePathParams();
  const validateQuery = () => {
    return Me.validate(Oe, query) && validateParams();
  };
  const validateParams = () => {
    for (const p2 of params) {
      const schema = datasource?.schema?.items?.properties?.[p2.field];
      if (schema) {
        const value = query.params?.find((f) => f.field === p2.field)?.value;
        const valid = Me.validate(schema, value);
        console.log(`Validating param ${p2}:`, { valid, value, schema });
        if (!valid) {
          return false;
        }
      }
    }
    return true;
  };
  const getOperatorOptionsForField = (fieldName) => {
    if (!datasource) return [];
    const fieldType = getFieldType(fieldName);
    switch (fieldType) {
      case "array":
        return arrayOperators;
      case "nanoid":
        return nanoIdOperators;
      case "string":
        return [...baseOperators, ...stringOperators];
      case "number":
      case "integer":
        return [...baseOperators, ...numberOperators];
      case "boolean":
        return [{ value: "eq", label: "Equals" }];
      case "date":
      case "datetime":
        return [...dateOperators, baseOperators[0]];
      default:
        return [...baseOperators, ...stringOperators, ...numberOperators, ...dateOperators];
    }
  };
  const updateParam = (name, key, value) => {
    console.log("Updating param:", { name, key, value });
    setQuery((prev) => {
      const currentParams = [...prev?.params ?? []];
      const currentParam = currentParams.find((p2) => p2.field === name) ?? {
        field: name,
        op: "eq",
        value: ""
      };
      const currentParamIndex = currentParams.findIndex((p2) => p2.field === name);
      if (currentParamIndex === -1) {
        console.warn("Current param not found:", { name, key, value });
        console.warn("Current params:", currentParams);
        return prev;
      }
      if (key === "field") {
        const op = value ? getOperatorOptionsForField(value)[0]?.value ?? "eq" : "eq";
        currentParams[currentParamIndex] = { field: value, op, value: "" };
      } else if (key === "op") {
        currentParams[currentParamIndex] = {
          ...currentParam,
          op: value,
          value: ""
        };
      } else {
        currentParams[currentParamIndex] = { ...currentParam, [key]: value };
      }
      console.log("Updated params:", currentParams);
      return {
        ...prev,
        params: currentParams
      };
    });
  };
  const getFieldType = (fieldName) => {
    if (!datasource) return "string";
    const property = datasource.schema?.items?.properties?.[fieldName];
    if (property?.type === "string" && property.format === "date") return "date";
    if (property?.type === "string" && property.format === "date-time") return "datetime";
    if (property?.type === "string" && property.format === "nanoid") return "nanoid";
    return property?.type ?? "string";
  };
  function getFieldName(paramName) {
    return datasource?.schema?.items?.properties?.[paramName].title ?? "";
  }
  function getFieldOp(paramName) {
    return query.params?.find((p2) => p2.field === paramName)?.op ?? "eq";
  }
  function getFieldValue(paramName, defaultValue = "") {
    console.log("Getting field value:", { paramName, params: query.params });
    return query.params?.find((p2) => p2.field === paramName)?.value ?? defaultValue;
  }
  const handleSubmit = useCallback(() => {
    console.log("Submitting query:", query);
    if (validateQuery()) {
      onChange(query);
      onClose?.();
    } else {
      console.error("Query validation failed:", Me.errors, query);
    }
  }, [query]);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm border border-gray-300 bg-gray-50 p-4 rounded-lg -mx-1 mt-3 shadow-sm", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-bold text-base mb-3", children: initialQuery ? "Edit query" : "Add query to use" }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col text-sm gap-4 flex-1 -mx-2.5 divide-y divide-gray-200", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between gap-4 flex-1 items-center py-0.5 px-2.5", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 basis-1/2", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(FieldTitle, { className: "font-medium", title: "Query", description: "Select a query" }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs(
            C,
            {
              "aria-required": true,
              defaultValue: query?.queryId,
              size: "2",
              onValueChange: (value) => setQuery(
                (prev) => ({
                  ...prev ?? {},
                  queryId: value,
                  params: availableQueries.find((q) => q.id === value)?.parameters?.map((p2) => ({
                    field: p2.field,
                    op: p2.op
                  })) ?? []
                })
              ),
              children: [
                /* @__PURE__ */ jsxRuntimeExports.jsx(
                  u,
                  {
                    radius: "medium",
                    variant: "surface",
                    placeholder: "Select a query",
                    className: "!max-w-2/3 !mr-[1px]"
                  }
                ),
                /* @__PURE__ */ jsxRuntimeExports.jsx(g$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(y, { children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsx(h, { children: "Available queries" }),
                  availableQueries.map((q) => /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: q.id, children: q.label }, q.id))
                ] }) })
              ]
            }
          )
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col basis-1/2 gap-2", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            FieldTitle,
            {
              withIcon: true,
              className: "font-medium",
              title: "Alias",
              description: "Alias for the query results, used in dynamic content. Use a simple keyword without spaces or special characters. Aliases are unique across the page.",
              containerClassName: "!basis-0"
            }
          ),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            u$1,
            {
              defaultValue: query?.alias,
              placeholder: "Ex: latestPosts",
              pattern: "^[a-zA-Z0-9_]+$",
              onChange: (e2) => {
                setQuery((prev) => ({
                  ...prev,
                  alias: e2.target.value
                }));
              },
              className: "!w-full"
            }
          )
        ] })
      ] }),
      params.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 flex-1 justify-between pt-3 px-2.5", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-1 w-full justify-between items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
          FieldTitle,
          {
            title: "Parameters",
            className: "font-medium",
            description: "Specify parameters for this query"
          }
        ) }),
        params.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-3 mt-1", children: params.map((param, index) => {
          return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-x-3 gap-y-0.5 items-center", children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-[200px] flex items-center gap-3 pr-1", children: getFieldName(param.field) }),
              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: D("flex gap-2 items-center w-[120px]"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                C,
                {
                  defaultValue: getFieldOp(param.field),
                  size: "2",
                  onValueChange: (value) => updateParam(param.field, "op", value),
                  children: [
                    /* @__PURE__ */ jsxRuntimeExports.jsx(
                      u,
                      {
                        radius: "medium",
                        variant: "ghost",
                        placeholder: "Select operator",
                        className: "!flex-1 !mr-1"
                      }
                    ),
                    /* @__PURE__ */ jsxRuntimeExports.jsx(g$1, { position: "popper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(y, { children: getOperatorOptionsForField(param.field).map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: option.value, children: option.label }, option.value)) }) })
                  ]
                },
                `operator-${index}-${param}`
              ) }),
              getFieldType(param.field) === "date" || getFieldType(param.field) === "datetime" ? (getFieldOp(param.field) === "before" || getFieldOp(param.field) === "after" || getFieldOp(param.field) === "eq") && // Absolute date: span both columns
              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: D("grow flex justify-end"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                u$1,
                {
                  size: "2",
                  type: getFieldType(param.field) === "datetime" ? "datetime-local" : "date",
                  defaultValue: String(getFieldValue(param.field)),
                  onChange: (e2) => updateParam(param.field, "value", e2.target.value),
                  className: "!w-full"
                }
              ) }) : (
                // Non-date fields: span both columns
                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: D("grow flex justify-end"), children: getFieldType(param.field) === "number" || getFieldType(param.field) === "integer" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                  u$1,
                  {
                    type: "number",
                    size: "2",
                    defaultValue: String(getFieldValue(param.field)),
                    onChange: (e2) => updateParam(param.field, "value", Number(e2.target.value)),
                    placeholder: "Value",
                    min: "1",
                    className: "!w-full"
                  }
                ) : getFieldType(param.field) === "boolean" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
                  p$1,
                  {
                    size: "1",
                    defaultValue: String(getFieldValue(param.field) || "true"),
                    onValueChange: (value) => updateParam(param.field, "value", value === "true"),
                    className: D("!mt-0.5 [&_.rt-SegmentedControlItemLabel]:(px-3)"),
                    children: [
                      /* @__PURE__ */ jsxRuntimeExports.jsx(l, { value: "true", children: "True" }),
                      /* @__PURE__ */ jsxRuntimeExports.jsx(l, { value: "false", children: "False" })
                    ]
                  }
                ) : getFieldType(param.field) === "array" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                  TagsInput,
                  {
                    initialValue: getFieldValue(param.field, []),
                    onChange: (value) => updateParam(param.field, "value", value),
                    className: "!w-full",
                    placeholder: "Add tags"
                  }
                ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
                  TagsSelect,
                  {
                    isMulti: false,
                    creatable: true,
                    clearable: true,
                    initialValue: getFieldValue(param.field, []),
                    onChange: (value) => updateParam(param.field, "value", value),
                    className: "!w-full",
                    placeholder: "Value or variable",
                    options: pageParams.map((p2) => ({
                      label: p2,
                      value: p2
                    }))
                  }
                ) })
              )
            ] }),
            index < params.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-t border-dotted mx-auto w-2/3 border-gray-200 my-2 relative", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute left-1/2 -translate-x-1/2 -top-3 bg-gray-50 rounded-full px-2 py-1 inline-block text-xs text-gray-500", children: "And" }) })
          ] }, index);
        }) })
      ] })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mt-10", children: [
      showCancelBtn && /* @__PURE__ */ jsxRuntimeExports.jsx(
        o,
        {
          type: "button",
          size: "2",
          color: "gray",
          variant: "soft",
          onClick: () => {
            reset();
            onClose?.();
          },
          children: "Cancel"
        }
      ),
      /* @__PURE__ */ jsxRuntimeExports.jsx(o, { disabled: validateQuery() === false, onClick: handleSubmit, size: "2", children: initialQuery ? "Save query" : "Add query" })
    ] })
  ] });
}
export {
  QueryField as default
};
//# sourceMappingURL=page-queries.js.map
