import { jsxs as n, jsx as r } from "react/jsx-runtime";
import { useState as E, useMemo as F } from "react";
import N from "@mui/material/Select";
import x from "@mui/material/MenuItem";
import j from "@mui/material/FormControl";
import B from "@mui/material/InputLabel";
import O from "@mui/material/FormHelperText";
import G from "@mui/material/ListItemIcon";
import K from "@mui/material/ListItemText";
import R from "@mui/material/CircularProgress";
import U from "@mui/material/OutlinedInput";
import V from "@mui/material/InputBase";
import _ from "@mui/material/Chip";
import m from "@mui/material/Box";
import q from "@mui/icons-material/Search";
import A from "@mui/icons-material/Clear";
import { INPUT_HEIGHTS as J, toMuiInputSize as Q, toMuiColor as X } from "./types.js";
function Y({
  options: f,
  value: v,
  onChange: c,
  size: p = "md",
  color: P = "neutral",
  label: a,
  helperText: I,
  placeholder: t,
  searchable: u = !1,
  multiple: g = !1,
  loading: S = !1,
  error: s,
  fullWidth: w,
  disabled: L,
  clearable: y = !1,
  sx: z
}) {
  const [d, C] = E(""), D = Q(p), h = X(P), H = typeof s == "string" ? !!s : s, M = typeof s == "string" ? s : void 0, b = F(() => {
    if (!u || !d) return f;
    const o = d.toLowerCase();
    return f.filter((i) => i.label.toLowerCase().includes(o));
  }, [f, d, u]), T = (o) => {
    c(o.target.value);
  };
  return /* @__PURE__ */ n(
    j,
    {
      size: D,
      fullWidth: w,
      error: H,
      disabled: L,
      style: { "--ov-input-height": J[p] },
      sx: z,
      children: [
        a && /* @__PURE__ */ r(
          B,
          {
            color: h === "default" || h === "inherit" ? void 0 : h,
            shrink: !!t || void 0,
            children: a
          }
        ),
        /* @__PURE__ */ n(
          N,
          {
            value: v,
            onChange: T,
            multiple: g,
            displayEmpty: !!t,
            label: a,
            notched: a && !!t || void 0,
            input: g ? /* @__PURE__ */ r(U, { label: a }) : void 0,
            onClose: () => {
              u && C("");
            },
            renderValue: g ? (o) => {
              const i = o;
              return i.length === 0 && t ? /* @__PURE__ */ r(m, { sx: { color: "var(--ov-fg-faint)" }, children: t }) : /* @__PURE__ */ n(m, { sx: { display: "flex", flexWrap: "nowrap", gap: 0.5, overflow: "hidden", alignItems: "center" }, children: [
                i.map((e) => {
                  const W = f.find((l) => l.value === e);
                  return /* @__PURE__ */ r(
                    _,
                    {
                      label: W?.label ?? e,
                      size: "small",
                      ...y ? {
                        onDelete: (l) => {
                          l.stopPropagation(), c(i.filter((k) => k !== e));
                        },
                        onMouseDown: (l) => {
                          l.stopPropagation();
                        }
                      } : {}
                    },
                    e
                  );
                }),
                y && i.length > 1 && /* @__PURE__ */ r(
                  "span",
                  {
                    role: "button",
                    "aria-label": "Clear all",
                    onMouseDown: (e) => {
                      e.stopPropagation(), e.preventDefault(), c([]);
                    },
                    style: {
                      display: "inline-flex",
                      alignItems: "center",
                      flexShrink: 0,
                      marginLeft: 2,
                      cursor: "pointer",
                      color: "var(--ov-fg-faint)",
                      lineHeight: 0
                    },
                    children: /* @__PURE__ */ r(A, { sx: { fontSize: 16 } })
                  }
                )
              ] });
            } : t && !v ? () => /* @__PURE__ */ r(m, { sx: { color: "var(--ov-fg-faint)" }, children: t }) : void 0,
            MenuProps: {
              PaperProps: {
                sx: {
                  maxHeight: 300,
                  ...p === "xs" || p === "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: [
              u && /* @__PURE__ */ r(
                m,
                {
                  sx: { px: 1, pb: 0.5, pt: 0.5 },
                  onKeyDown: (o) => o.stopPropagation(),
                  onClickCapture: (o) => o.stopPropagation(),
                  onMouseDown: (o) => o.stopPropagation(),
                  children: /* @__PURE__ */ n(
                    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__ */ r(q, { sx: { fontSize: 14, color: "var(--ov-fg-faint)", mr: 0.5 } }),
                        /* @__PURE__ */ r(
                          V,
                          {
                            autoFocus: !0,
                            fullWidth: !0,
                            placeholder: "Search...",
                            value: d,
                            onChange: (o) => C(o.target.value),
                            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 }
                            }
                          }
                        )
                      ]
                    }
                  )
                }
              ),
              S && /* @__PURE__ */ n(x, { disabled: !0, children: [
                /* @__PURE__ */ r(R, { size: 16, sx: { mr: 1 } }),
                " Loading..."
              ] }),
              b.map((o) => /* @__PURE__ */ n(x, { value: o.value, disabled: o.disabled, children: [
                o.icon && /* @__PURE__ */ r(G, { sx: { minWidth: 28 }, children: o.icon }),
                /* @__PURE__ */ r(K, { children: o.label })
              ] }, o.value)),
              b.length === 0 && !S && /* @__PURE__ */ r(x, { disabled: !0, children: "No options" })
            ]
          }
        ),
        (M || I) && /* @__PURE__ */ r(O, { children: M ?? I })
      ]
    }
  );
}
Y.displayName = "Select";
export {
  Y as S
};
