import { jsxs as p, jsx as e } from "react/jsx-runtime";
import { useState as P, useMemo as K } from "react";
import R from "@mui/material/Select";
import w from "@mui/material/MenuItem";
import U from "@mui/material/FormControl";
import V from "@mui/material/InputLabel";
import G from "@mui/material/FormHelperText";
import _ from "@mui/material/ListItemIcon";
import q from "@mui/material/ListItemText";
import J from "@mui/material/CircularProgress";
import Q from "@mui/material/OutlinedInput";
import X from "@mui/material/InputBase";
import Y from "@mui/material/Chip";
import m from "@mui/material/Box";
import Z from "@mui/icons-material/Search";
import $ from "@mui/icons-material/Clear";
import { INPUT_HEIGHTS as oo, toMuiInputSize as to, toMuiColor as eo } from "./types.js";
function ro({
  options: g,
  value: h,
  onChange: f,
  size: v = "md",
  color: T = "neutral",
  label: u,
  helperText: M,
  placeholder: i,
  searchable: c = !1,
  multiple: x = !1,
  loading: C = !1,
  error: d,
  fullWidth: E,
  disabled: H,
  clearable: k = !1,
  sx: A
}) {
  const [y, D] = P(""), [O, L] = P(!1), [s, a] = P(-1), F = to(v), I = eo(T), W = typeof d == "string" ? !!d : d, z = typeof d == "string" ? d : void 0, S = () => {
    L(!1), a(-1), c && D("");
  }, n = K(() => {
    if (!c || !y) return g;
    const o = y.toLowerCase();
    return g.filter((t) => t.label.toLowerCase().includes(o));
  }, [g, y, c]), N = (o) => {
    f(o.target.value);
  }, j = (o) => {
    if (o.key === "Escape") {
      S();
      return;
    }
    if (o.key === "ArrowDown") {
      if (o.preventDefault(), o.stopPropagation(), n.length === 0) return;
      const t = s + 1;
      a(t >= n.length ? 0 : t);
      return;
    }
    if (o.key === "ArrowUp") {
      o.preventDefault(), o.stopPropagation();
      const t = s - 1;
      a(t < 0 ? n.length - 1 : t);
      return;
    }
    if (o.key === "Tab") {
      if (o.preventDefault(), o.stopPropagation(), n.length === 0) return;
      const t = s + 1;
      a(t >= n.length ? 0 : t);
      return;
    }
    if (o.key === "Enter" && s >= 0 && s < n.length) {
      o.preventDefault(), o.stopPropagation();
      const t = n[s];
      if (!t.disabled)
        if (x) {
          const r = Array.isArray(h) ? h : [], b = r.includes(t.value) ? r.filter((l) => l !== t.value) : [...r, t.value];
          f(b);
        } else
          f(t.value), S();
      return;
    }
    o.stopPropagation();
  };
  return /* @__PURE__ */ p(
    U,
    {
      size: F,
      fullWidth: E,
      error: W,
      disabled: H,
      style: { "--ov-input-height": oo[v] },
      sx: A,
      children: [
        u && /* @__PURE__ */ e(
          V,
          {
            color: I === "default" || I === "inherit" ? void 0 : I,
            shrink: !!i || void 0,
            children: u
          }
        ),
        /* @__PURE__ */ p(
          R,
          {
            value: h,
            onChange: N,
            multiple: x,
            displayEmpty: !!i,
            label: u,
            notched: u && !!i || void 0,
            input: x ? /* @__PURE__ */ e(Q, { label: u }) : void 0,
            open: O,
            onOpen: () => {
              L(!0), a(-1);
            },
            onClose: S,
            renderValue: x ? (o) => {
              const t = o;
              return t.length === 0 && i ? /* @__PURE__ */ e(m, { sx: { color: "var(--ov-fg-faint)" }, children: i }) : /* @__PURE__ */ p(
                m,
                {
                  sx: {
                    display: "flex",
                    flexWrap: "nowrap",
                    gap: 0.5,
                    overflow: "hidden",
                    alignItems: "center"
                  },
                  children: [
                    t.map((r) => {
                      const b = g.find((l) => l.value === r);
                      return /* @__PURE__ */ e(
                        Y,
                        {
                          label: b?.label ?? r,
                          size: "small",
                          ...k ? {
                            onDelete: (l) => {
                              l.stopPropagation(), f(t.filter((B) => B !== r));
                            },
                            onMouseDown: (l) => {
                              l.stopPropagation();
                            }
                          } : {}
                        },
                        r
                      );
                    }),
                    k && t.length > 1 && /* @__PURE__ */ e(
                      "button",
                      {
                        type: "button",
                        "aria-label": "Clear all",
                        onClick: (r) => {
                          r.stopPropagation(), f([]);
                        },
                        style: {
                          display: "inline-flex",
                          alignItems: "center",
                          flexShrink: 0,
                          marginLeft: 2,
                          cursor: "pointer",
                          color: "var(--ov-fg-faint)",
                          lineHeight: 0,
                          background: "none",
                          border: "none",
                          padding: 0
                        },
                        children: /* @__PURE__ */ e($, { sx: { fontSize: 16 } })
                      }
                    )
                  ]
                }
              );
            } : i && !h ? () => /* @__PURE__ */ e(m, { sx: { color: "var(--ov-fg-faint)" }, children: i }) : void 0,
            MenuProps: {
              PaperProps: {
                sx: {
                  maxHeight: 300,
                  ...v === "xs" || v === "sm" ? {
                    "& .MuiMenuItem-root": {
                      fontSize: "0.8rem",
                      minHeight: 28,
                      padding: "3px 8px"
                    },
                    "& .MuiListItemText-root": {
                      margin: 0
                    },
                    "& .MuiListItemText-primary": {
                      fontSize: "0.8rem"
                    },
                    "& .MuiListItemIcon-root": {
                      minWidth: 22
                    }
                  } : {}
                }
              }
            },
            children: [
              c && /* @__PURE__ */ e(
                m,
                {
                  sx: { px: 1, pb: 0.5, pt: 0.5 },
                  onClickCapture: (o) => o.stopPropagation(),
                  onMouseDown: (o) => o.stopPropagation(),
                  children: /* @__PURE__ */ p(
                    m,
                    {
                      sx: {
                        display: "flex",
                        alignItems: "center",
                        height: 28,
                        border: "1px solid var(--ov-border-default)",
                        borderRadius: "4px",
                        bgcolor: "var(--ov-bg-base)",
                        px: 0.75,
                        "&:focus-within": { borderColor: "var(--ov-accent)" }
                      },
                      children: [
                        /* @__PURE__ */ e(
                          Z,
                          {
                            sx: { fontSize: 14, color: "var(--ov-fg-faint)", mr: 0.5 }
                          }
                        ),
                        /* @__PURE__ */ e(
                          X,
                          {
                            autoFocus: !0,
                            fullWidth: !0,
                            placeholder: "Search...",
                            value: y,
                            onChange: (o) => {
                              D(o.target.value), a(-1);
                            },
                            onKeyDown: j,
                            sx: {
                              flex: 1,
                              fontSize: "0.75rem",
                              color: "var(--ov-fg-default)",
                              "& input": { py: 0, px: 0 },
                              "& input::placeholder": {
                                color: "var(--ov-fg-faint)",
                                opacity: 1
                              }
                            }
                          }
                        )
                      ]
                    }
                  )
                }
              ),
              C && /* @__PURE__ */ p(w, { disabled: !0, children: [
                /* @__PURE__ */ e(J, { size: 16, sx: { mr: 1 } }),
                " Loading..."
              ] }),
              n.map((o, t) => /* @__PURE__ */ p(
                w,
                {
                  value: o.value,
                  disabled: o.disabled,
                  ...c ? {
                    onMouseEnter: () => a(t),
                    sx: t === s ? { bgcolor: "action.focus" } : void 0
                  } : {},
                  children: [
                    o.icon && /* @__PURE__ */ e(_, { sx: { minWidth: 28 }, children: o.icon }),
                    /* @__PURE__ */ e(q, { children: o.label })
                  ]
                },
                o.value
              )),
              n.length === 0 && !C && /* @__PURE__ */ e(w, { disabled: !0, children: "No options" })
            ]
          }
        ),
        (z || M) && /* @__PURE__ */ e(G, { children: z ?? M })
      ]
    }
  );
}
ro.displayName = "Select";
export {
  ro as S
};
