"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const ui = require("@contember/ui");
const react = require("react");
const GenericVariableEdit = ({ label, value, onChange }) => {
  const [localValues, setLocalValues] = react.useState(value.length > 0 ? value : [""]);
  const onChangeCallback = react.useCallback((index, newValue) => {
    const newValues = newValue !== null ? localValues.map((v, i) => i === index ? newValue : v) : localValues.filter((_, i) => i !== index);
    setLocalValues(newValues);
    onChange(newValues.map((it) => it.trim()).filter((it) => !!it));
  }, [localValues, onChange, setLocalValues]);
  return /* @__PURE__ */ jsxRuntime.jsxs(ui.FieldContainer, { label, gap: "gap", style: { margin: "1em" }, children: [
    localValues.map((v, i) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { padding: false, horizontal: true, gap: false, children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        ui.TextInput,
        {
          notNull: true,
          value: v,
          distinction: "seamless",
          onChange: (newValue) => {
            onChangeCallback(i, newValue ?? "");
          },
          style: { marginLeft: "0.5em" }
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(
        ui.Button,
        {
          distinction: "seamless",
          onClick: () => {
            onChangeCallback(i, null);
          },
          children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { blueprintIcon: "trash" })
        }
      )
    ] }, i)),
    /* @__PURE__ */ jsxRuntime.jsxs(
      ui.Button,
      {
        distinction: "seamless",
        justify: "start",
        onClick: () => {
          setLocalValues((prev) => [...prev, ""]);
        },
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            ui.Icon,
            {
              blueprintIcon: "add",
              style: {
                marginRight: "0.2em",
                position: "relative",
                top: "0.05em"
              }
            }
          ),
          "Add"
        ]
      }
    )
  ] });
};
const VariableSelector = ({ rolesConfig, membership, variable, onChange }) => {
  const innerOnChange = react.useCallback(
    (newValues) => {
      const newMembership = {
        ...membership,
        variables: [
          ...membership.variables.filter((membershipVariable) => membershipVariable.name !== variable.name),
          {
            name: variable.name,
            values: newValues
          }
        ]
      };
      onChange(newMembership);
    },
    [membership, onChange, variable.name]
  );
  const roleConfig = rolesConfig?.[membership.role];
  const variableConfig = roleConfig?.variables[variable.name];
  if (roleConfig && variableConfig === void 0) {
    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Unknown variable" });
  }
  const variableInMembership = membership.variables.find(
    (membershipVariable) => membershipVariable.name === variable.name
  );
  const values = variableInMembership !== void 0 ? variableInMembership.values : [];
  if (variableConfig?.render) {
    const Component = variableConfig.render;
    return /* @__PURE__ */ jsxRuntime.jsx(Component, { value: values, onChange: innerOnChange });
  } else {
    return /* @__PURE__ */ jsxRuntime.jsx(GenericVariableEdit, { label: variable.name, value: values, onChange: innerOnChange });
  }
};
exports.VariableSelector = VariableSelector;
//# sourceMappingURL=VariableSelector.cjs.map
