import { j as e } from "../../node_modules/react/jsx-runtime.js";
import j from "react";
import { Icon as l } from "../Icon/index.js";
import { cn as r } from "../../utils/index.js";
import { Select as h, SelectTrigger as b, SelectValue as u, SelectContent as E, SelectGroup as g } from "../Select/index.js";
import { Item as v, ItemText as y, ItemIndicator as S } from "../../node_modules/@radix-ui/react-select/dist/index.js";
import { Badge as w } from "../Badge/index.js";
import { Typography as I } from "../Typography/index.js";
const m = {
  AMBER: {
    className: "amber",
    selectClassName: "amber-select",
    iconName: "code-block"
  },
  GREEN: {
    className: "green",
    selectClassName: "green-select",
    iconName: "station"
  },
  BLUE: {
    className: "blue",
    selectClassName: "blue-select",
    iconName: "station"
  }
}, p = {
  staging: {
    style: m.AMBER,
    prefix: /* @__PURE__ */ e.jsxs("p", { children: [
      "Working with ",
      /* @__PURE__ */ e.jsx("b", { children: "mock data in" })
    ] }),
    label: "Staging",
    description: "Make configuration changes and test your app with mock data."
  },
  production: {
    style: m.GREEN,
    prefix: /* @__PURE__ */ e.jsxs("p", { children: [
      "Working with ",
      /* @__PURE__ */ e.jsx("b", { children: "live data in" })
    ] }),
    label: "Production",
    description: "Integrate with live data and release your app for end-users."
  }
}, R = j.forwardRef(({ className: t, children: c, environment: s, ...n }, a) => /* @__PURE__ */ e.jsxs(
  v,
  {
    ref: a,
    className: r(
      "environment-select-dropdown last:border-transparent",
      t
    ),
    ...n,
    children: [
      /* @__PURE__ */ e.jsxs("div", { className: "environment-select-dropdown-item", children: [
        /* @__PURE__ */ e.jsxs(
          w,
          {
            className: r(
              "environment-select-dropdown-badge",
              s.style.className
            ),
            children: [
              /* @__PURE__ */ e.jsx(l, { name: s.style.iconName }),
              /* @__PURE__ */ e.jsx(y, { children: c })
            ]
          }
        ),
        /* @__PURE__ */ e.jsx(I, { variant: "body-sm", children: s.description })
      ] }),
      /* @__PURE__ */ e.jsx("span", { className: "environment-select-dropdown-icon", children: /* @__PURE__ */ e.jsx(S, { children: /* @__PURE__ */ e.jsx(l, { name: "check", className: "environment-icon" }) }) })
    ]
  }
));
function T({
  value: t,
  onValueChange: c,
  environments: s
}) {
  const {
    style: { selectClassName: n }
  } = s[t];
  return /* @__PURE__ */ e.jsxs(h, { value: t, onValueChange: c, children: [
    /* @__PURE__ */ e.jsx(
      b,
      {
        className: r(
          "border-none w-fit h-fit px-2 py-0.5 font-semibold",
          n
        ),
        children: /* @__PURE__ */ e.jsx(u, {})
      }
    ),
    /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsx(g, { className: "environment-select-dropdown-layout", children: Object.entries(s).map(([a, o], i) => /* @__PURE__ */ e.jsx(R, { environment: o, value: a, children: o.label }, i)) }) })
  ] });
}
function x({
  editable: t = !1,
  onValueChange: c,
  ...s
}) {
  const n = s.environments ?? p, a = s.value ?? Object.keys(n)[0], { label: o, style: i, prefix: N } = n[a], { className: d, iconName: f } = i;
  return /* @__PURE__ */ e.jsx("div", { className: r("environment-indicator", d), children: /* @__PURE__ */ e.jsxs("div", { className: r("environment-indicator-item", d), children: [
    /* @__PURE__ */ e.jsx(l, { name: f }),
    N,
    t ? /* @__PURE__ */ e.jsx(
      T,
      {
        value: a,
        onValueChange: c,
        environments: n
      }
    ) : /* @__PURE__ */ e.jsx("b", { children: o })
  ] }) });
}
x.STYLES = m;
x.DEFAULT_ENVIRONMENTS = p;
export {
  x as EnvironmentIndicator
};
