import { jsx as n, jsxs as l } from "react/jsx-runtime";
import { use as v, useRef as z, useState as L, useMemo as M } from "react";
import { Box as s, Button as N, IconButton as w, Typography as B, Popper as E, Paper as P, ClickAwayListener as j, MenuList as A, MenuItem as R } from "@mui/material";
import { Icon as x } from "@iconify/react";
import T from "@iconify-icons/material-symbols/check";
import $ from "iconify-icons-material-symbols-400/language";
import { LocaleContext as H } from "./context.js";
import { styled as O } from "../Theme/index.js";
import { mergeSx as W } from "../Util/style.js";
function Y({ ...t }) {
  const { showText: a = !0, popperProps: p = {}, popperType: g = "click", icon: r, size: m = 24, ...h } = t, { locale: i, changeLocale: d, languages: f } = v(H), c = z(null), [u, o] = L(!1), y = (e) => {
    d(e), o(!1), typeof t.onChange == "function" && t.onChange(e);
  }, I = (e) => {
    c.current?.contains(e.target) || o(!1);
  }, k = a ? N : w, C = g === "hover" ? {
    onMouseEnter: () => {
      o(!0);
    },
    onMouseLeave: () => {
      o(!1);
    }
  } : {
    onClick: () => {
      o(!u);
    }
  }, S = M(() => r ? /* @__PURE__ */ n(r, {}) : /* @__PURE__ */ n(x, { icon: $, fontSize: m, style: { transform: "scale(1.10)" } }), [r, m]);
  return (
    // @ts-ignore
    /* @__PURE__ */ l(q, { ...h, ...C, children: [
      /* @__PURE__ */ n(k, { ref: c, className: "trigger", role: "button", "aria-label": "Locale selector button", children: /* @__PURE__ */ l(
        s,
        {
          sx: {
            display: "flex",
            alignItems: "center"
          },
          children: [
            S,
            a ? /* @__PURE__ */ n(B, { component: "strong", className: "trigger-text", children: f.find((e) => e.code === i)?.name }) : ""
          ]
        }
      ) }),
      /* @__PURE__ */ n(
        E,
        {
          open: u,
          anchorEl: c.current,
          ...p,
          sx: W(
            // @ts-ignore
            { zIndex: (e) => e.zIndex.tooltip + 10 },
            // @ts-ignore
            p?.sx
          ),
          children: /* @__PURE__ */ n(
            P,
            {
              variant: "outlined",
              className: "locales",
              sx: {
                borderRadius: 1
              },
              children: /* @__PURE__ */ n(j, { onClickAway: I, children: /* @__PURE__ */ n(A, { children: f.map(({ code: e, name: b }) => /* @__PURE__ */ l(
                R,
                {
                  className: "locale-item",
                  onClick: () => y(e),
                  sx: {
                    fontSize: 16,
                    fontStyle: "normal",
                    fontStretch: "normal",
                    lineHeight: "normal",
                    letterSpacing: "2px",
                    textAlign: "center",
                    color: "text.primary",
                    cursor: "pointer",
                    display: "flex",
                    padding: "16px",
                    alignItems: "center"
                  },
                  children: [
                    /* @__PURE__ */ n(
                      s,
                      {
                        component: x,
                        icon: T,
                        className: e === i ? "check-icon check-icon-visible" : "check-icon",
                        sx: {
                          marginRight: 1,
                          visibility: e === i ? "visible" : "hidden"
                        }
                      }
                    ),
                    b
                  ]
                },
                e
              )) }) })
            }
          )
        }
      )
    ] })
  );
}
const q = O(s)`
  display: inline-block;

  .trigger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    white-space: nowrap;

    .trigger-text {
      margin-left: 5px;
      font-size: 14px;
      color: ${({ theme: t }) => t.palette.text.primary};
    }
  }
`;
export {
  Y as default
};
