import { j as e } from "../../node_modules/react/jsx-runtime.js";
import N from "react";
import { Icon as o } from "../Icon/index.js";
import { cn as i } from "../../utils/index.js";
import { Select as g, SelectTrigger as h, SelectValue as u, SelectContent as y, SelectGroup as E } from "../Select/index.js";
import { Item as w, ItemText as v, ItemIndicator as S } from "../../node_modules/@radix-ui/react-select/dist/index.js";
import { Badge as I } from "../Badge/index.js";
import { Text as R } from "../Text/index.js";
const m = {
  AMBER: {
    className: "bg-amber-40 text-content-primary",
    selectClassName: "bg-amber-90 text-content-inverse-strong",
    iconName: "code-block"
  },
  GREEN: {
    className: "bg-green-70 text-content-inverse-strong",
    selectClassName: "text-content-primary bg-content-inverse-strong",
    iconName: "station"
  },
  BLUE: {
    className: "bg-blue-80 text-content-inverse-strong",
    selectClassName: "text-content-primary bg-content-inverse-strong",
    iconName: "station"
  }
}, x = {
  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."
  }
}, T = N.forwardRef(({ className: n, children: c, environment: t, ...a }, s) => /* @__PURE__ */ e.jsxs(
  w,
  {
    ref: s,
    className: i(
      "relative flex w-full px-6 py-3 cursor-pointer select-none items-center rounded-sm text-sm outline-none focus:bg-surface data-[disabled]:pointer-events-none data-[disabled]:opacity-50 border-b last:border-b-none",
      n
    ),
    ...a,
    children: [
      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 max-w-60", children: [
        /* @__PURE__ */ e.jsxs(
          I,
          {
            className: i(
              "flex items-center gap-1 w-fit",
              t.style.className
            ),
            size: "sm",
            children: [
              /* @__PURE__ */ e.jsx(o, { name: t.style.iconName }),
              /* @__PURE__ */ e.jsx(v, { children: c })
            ]
          }
        ),
        /* @__PURE__ */ e.jsx(R, { size: "sm", children: t.description })
      ] }),
      /* @__PURE__ */ e.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ e.jsx(S, { children: /* @__PURE__ */ e.jsx(o, { name: "check", className: "h-4 w-4" }) }) })
    ]
  }
));
function $({
  value: n,
  onValueChange: c,
  environments: t
}) {
  const {
    style: { selectClassName: a }
  } = t[n];
  return /* @__PURE__ */ e.jsxs(g, { value: n, onValueChange: c, children: [
    /* @__PURE__ */ e.jsx(
      h,
      {
        className: i(
          "border-none w-fit h-fit px-2 py-0.5 font-semibold",
          a
        ),
        children: /* @__PURE__ */ e.jsx(u, {})
      }
    ),
    /* @__PURE__ */ e.jsx(y, { children: /* @__PURE__ */ e.jsx(E, { className: "p-0 m-0", children: Object.entries(t).map(([s, r], l) => /* @__PURE__ */ e.jsx(T, { environment: r, value: s, children: r.label }, l)) }) })
  ] });
}
function f({
  editable: n = !1,
  onValueChange: c,
  children: t,
  ...a
}) {
  const s = a.environments ?? x, r = a.value ?? Object.keys(s)[0], { label: l, style: p, prefix: b } = s[r], { className: d, iconName: j } = p;
  return /* @__PURE__ */ e.jsxs("section", { className: "flex-grow flex flex-col", children: [
    /* @__PURE__ */ e.jsx("div", { className: i("w-full h-2 flex justify-center", d), children: /* @__PURE__ */ e.jsxs(
      "div",
      {
        className: i(
          "absolute flex flex-row sm:rounded-b-lg p-2 gap-1 w-full sm:w-fit h-fit items-center justify-center text-sm",
          d
        ),
        children: [
          /* @__PURE__ */ e.jsx(o, { name: j }),
          b,
          n ? /* @__PURE__ */ e.jsx(
            $,
            {
              value: r,
              onValueChange: c,
              environments: s
            }
          ) : /* @__PURE__ */ e.jsx("b", { children: l })
        ]
      }
    ) }),
    t
  ] });
}
f.STYLES = m;
f.DEFAULT_ENVIRONMENTS = x;
export {
  f as EnvironmentIndicator
};
