import { jsxs as b, jsx as t } from "react/jsx-runtime";
import { useState as m, useRef as z, useEffect as g } from "react";
import { Select as y, ListSubheader as T, TextField as w, MenuItem as M } from "@mui/material";
import { useMemoizedFn as c, useDebounce as I } from "ahooks";
import { KeyboardArrowDown as S } from "@mui/icons-material";
import { useLocaleContext as D } from "@arcblock/ux/lib/Locale/context";
import { translate as O } from "@arcblock/ux/lib/Locale/util";
import P from "@arcblock/ux/lib/Empty";
import { getTimezones as F } from "./utils.js";
import { translations as L } from "../../libs/locales.js";
const r = F();
function V({ value: p, onChange: f, disabled: i = !1, mode: h = "self" }) {
  const { locale: x } = D(), n = c((e, o = {}) => O(L, e, x, "en", o)), [l, v] = m(r), [s, C] = m(""), a = I(s, { wait: 500 }), u = z(null), d = c(
    (e) => e ? r.filter((o) => o.value.toLowerCase().includes(e.toLowerCase())) : r
  );
  return g(() => {
    const e = d(a);
    v(e ?? r), setTimeout(() => {
      u.current?.focus();
    }, 0);
  }, [a, d]), /* @__PURE__ */ b(
    y,
    {
      className: `timezone-select ${i ? "disabled" : ""}`,
      value: p,
      onChange: (e) => f(e.target.value),
      disabled: i,
      displayEmpty: !0,
      variant: "outlined",
      placeholder: n("profile.timezone"),
      IconComponent: (e) => /* @__PURE__ */ t(
        S,
        {
          ...e,
          sx: { fontSize: 18, color: (o) => `${o.palette.text.secondary} !important` }
        }
      ),
      MenuProps: {
        autoFocus: !1,
        PaperProps: {
          style: {
            maxHeight: "400px"
          }
        },
        style: {
          zIndex: h === "drawer" ? 9999 : 1300
        }
      },
      sx: {
        width: "100%",
        "&:hover": {
          "fieldset.MuiOutlinedInput-notchedOutline": {
            borderColor: "divider"
          }
        },
        "fieldset.MuiOutlinedInput-notchedOutline": {
          borderColor: "divider"
        }
      },
      children: [
        /* @__PURE__ */ t(T, { children: /* @__PURE__ */ t(
          w,
          {
            inputRef: u,
            autoFocus: !0,
            value: s,
            placeholder: n("profile.timezone"),
            variant: "outlined",
            size: "small",
            fullWidth: !0,
            onChange: (e) => C(e.target.value),
            onClick: (e) => e.stopPropagation(),
            onKeyDown: (e) => e.stopPropagation(),
            sx: {
              marginTop: "8px",
              "& .MuiOutlinedInput-root": {
                "& fieldset": {
                  borderColor: "divider",
                  borderWidth: "1px"
                },
                "&:hover fieldset": {
                  borderColor: "divider"
                },
                "&.Mui-focused fieldset": {
                  borderColor: "divider"
                }
              }
            }
          }
        ) }),
        l.map((e) => /* @__PURE__ */ t(M, { value: e.value, children: e.label }, e.value)),
        l.length > 0 ? null : /* @__PURE__ */ t(P, { children: n("emptyContent") })
      ]
    }
  );
}
export {
  V as TimezoneSelect
};
