import { jsx, Fragment, jsxs } from "react/jsx-runtime";
import { FieldContainer, Box, TextInput, Button, Icon } from "@contember/ui";
import { useCallback, useState } from "react";
const GenericVariableEdit = ({ label, value, onChange }) => {
  const [localValues, setLocalValues] = useState(value.length > 0 ? value : [""]);
  const onChangeCallback = 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__ */ jsxs(FieldContainer, { label, gap: "gap", style: { margin: "1em" }, children: [
    localValues.map((v, i) => /* @__PURE__ */ jsxs(Box, { padding: false, horizontal: true, gap: false, children: [
      /* @__PURE__ */ jsx(
        TextInput,
        {
          notNull: true,
          value: v,
          distinction: "seamless",
          onChange: (newValue) => {
            onChangeCallback(i, newValue ?? "");
          },
          style: { marginLeft: "0.5em" }
        }
      ),
      /* @__PURE__ */ jsx(
        Button,
        {
          distinction: "seamless",
          onClick: () => {
            onChangeCallback(i, null);
          },
          children: /* @__PURE__ */ jsx(Icon, { blueprintIcon: "trash" })
        }
      )
    ] }, i)),
    /* @__PURE__ */ jsxs(
      Button,
      {
        distinction: "seamless",
        justify: "start",
        onClick: () => {
          setLocalValues((prev) => [...prev, ""]);
        },
        children: [
          /* @__PURE__ */ jsx(
            Icon,
            {
              blueprintIcon: "add",
              style: {
                marginRight: "0.2em",
                position: "relative",
                top: "0.05em"
              }
            }
          ),
          "Add"
        ]
      }
    )
  ] });
};
const VariableSelector = ({ rolesConfig, membership, variable, onChange }) => {
  const innerOnChange = 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__ */ jsx(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__ */ jsx(Component, { value: values, onChange: innerOnChange });
  } else {
    return /* @__PURE__ */ jsx(GenericVariableEdit, { label: variable.name, value: values, onChange: innerOnChange });
  }
};
export {
  VariableSelector
};
//# sourceMappingURL=VariableSelector.js.map
