import { jsxs as i, jsx as t } from "react/jsx-runtime";
import { useState as O, useMemo as g } from "react";
import { Box as C, Typography as a, Select as z, TextField as j, MenuItem as k } from "@mui/material";
import { defaultCountries as s, parseCountry as d, FlagEmoji as y } from "react-international-phone";
import D from "@arcblock/icons/lib/ArrowDown";
import { mergeSx as P } from "../Util/style.js";
function F({
  ref: x = void 0,
  value: r,
  onChange: w = void 0,
  sx: I = {},
  selectCountryProps: M = void 0,
  preview: u = !1,
  valueField: v = "iso2",
  ...c
}) {
  const { hideFlag: p = !0, hideDialCode: h = !1 } = M || {}, [n, S] = O(""), m = g(() => {
    const e = s.find((o) => o[1] === r);
    return r && e ? d(e) : { name: "", iso2: "", dialCode: "" };
  }, [r]), b = g(() => {
    if (!n) return s;
    const e = n.toLowerCase();
    return s.filter((o) => {
      const l = d(o);
      return l.name.toLowerCase().includes(e) || l.iso2.toLowerCase().includes(e) || l.dialCode.includes(e);
    });
  }, [n]), f = /* @__PURE__ */ i(
    C,
    {
      sx: {
        display: "flex",
        alignItems: "center",
        flexWrap: "nowrap",
        gap: 0.5,
        cursor: u ? "default" : "pointer"
      },
      children: [
        p ? null : /* @__PURE__ */ t(y, { iso2: r, style: { display: "flex", width: 24, color: "inherit" } }),
        /* @__PURE__ */ t(a, { component: "span", sx: { lineHeight: 1.5 }, children: h ? m?.name : `+${m?.dialCode}` })
      ]
    }
  );
  return u ? f : /* @__PURE__ */ i(
    z,
    {
      ...c,
      ref: x,
      MenuProps: {
        style: { maxHeight: 400, top: 2, zIndex: 9999 },
        // 默认 zIndex 为 1300, 但是在 SwipeableDrawer 中需要设置为 9999
        anchorOrigin: { vertical: "bottom", horizontal: "left" },
        transformOrigin: { vertical: "top", horizontal: "left" },
        ...c.MenuProps ?? {}
      },
      sx: P(
        {
          '&.Mui-focused:has(div[aria-expanded="false"])': { fieldset: { display: "block" } },
          ".MuiSelect-select": { padding: 1, paddingRight: "24px !important" },
          svg: { right: 4, top: 10 },
          "&:hover": {
            "fieldset.MuiOutlinedInput-notchedOutline": {
              borderColor: "divider"
            }
          },
          "fieldset.MuiOutlinedInput-notchedOutline": {
            borderColor: "divider"
          },
          ".MuiMenuItem-root": { justifyContent: "flex-start" }
        },
        I
      ),
      value: r,
      onChange: (e) => w?.(e.target.value),
      IconComponent: (e) => /* @__PURE__ */ t(D, { ...e, width: 20, height: 20 }),
      renderValue: () => f,
      children: [
        /* @__PURE__ */ t(C, { sx: { p: 1, position: "sticky", top: 0, bgcolor: "background.paper", zIndex: 1 }, children: /* @__PURE__ */ t(
          j,
          {
            size: "small",
            fullWidth: !0,
            placeholder: "Search country...",
            value: n,
            onChange: (e) => S(e.target.value),
            onClick: (e) => e.stopPropagation(),
            onKeyDown: (e) => e.stopPropagation()
          }
        ) }),
        b.map((e) => {
          const o = d(e);
          return /* @__PURE__ */ i(k, { value: o[v], children: [
            p ? null : /* @__PURE__ */ t(y, { iso2: o.iso2, style: { marginRight: 8, width: 24 } }),
            /* @__PURE__ */ t(
              a,
              {
                sx: {
                  marginRight: 1
                },
                children: o.name
              }
            ),
            h ? null : /* @__PURE__ */ i(a, { color: "gray", children: [
              "(+",
              o.dialCode,
              ")"
            ] })
          ] }, o.iso2);
        })
      ]
    }
  );
}
const q = F;
export {
  q as default
};
