import { jsx as o, jsxs as h, Fragment as x } from "react/jsx-runtime";
import { abbreviateNumber as y } from "@argent/x-shared";
import g from "../../features/icons/SwitchPrimaryIcon.js";
import { Flex as u, Input as C, Button as I } from "@chakra-ui/react";
import { useRef as m, useEffect as w, useMemo as S } from "react";
import { useCompoundInputContext as a } from "./context.js";
import { usePriceImpactConfig as R } from "./utils.js";
import { LoadingPulse as $ } from "../LoadingPulse.js";
import { L1 as p, B2 as B, L1Bold as V } from "../typography.generated.js";
import { TokenIcon as _ } from "../TokenIcon.js";
function A({ ...t }) {
  const { id: n, amount: e, isDisabled: r, isLoading: i } = a(), c = m(null), l = m(null), d = e != null && e.hasError ? "text-danger" : e != null && e.value ? "text-primary" : "text-secondary", s = e == null ? void 0 : e.isFiatInput, b = s ? (e == null ? void 0 : e.fiatSymbol) || "$" : void 0, f = s ? 20 : 0;
  return w(() => {
    if (c.current && l.current) {
      const v = c.current.offsetWidth;
      l.current.style.width = `${v + f}px`;
    }
  }, [e == null ? void 0 : e.value, f]), e ? /* @__PURE__ */ o($, { isLoading: i && !e.value, ml: "3", children: /* @__PURE__ */ h(u, { alignItems: "center", justifyContent: "flex-end", position: "relative", children: [
    /* @__PURE__ */ o(u, { ref: c, position: "absolute", visibility: "hidden", fontSize: "h3", fontWeight: "700", whiteSpace: "pre", children: e.value || "0" }),
    /* @__PURE__ */ o(
      C,
      {
        ref: l,
        placeholder: "0",
        color: d,
        p: "0",
        pl: `${f}px`,
        minH: "min-content",
        maxW: "190px",
        ...!s && { width: "100% !important" },
        backgroundColor: "transparent",
        variant: "flat",
        fontSize: "h3",
        fontWeight: "700",
        textAlign: "right",
        value: e.value,
        onChange: e.onChange,
        isDisabled: r,
        isReadOnly: e.isReadOnly,
        _disabled: { opacity: 1, cursor: "default" },
        _hover: {
          backgroundColor: "transparent"
        },
        _focus: {
          boxShadow: "none",
          backgroundColor: "transparent"
        },
        _readOnly: {
          pointerEvents: "none",
          border: "none",
          cursor: "default"
        },
        tabIndex: e.isReadOnly ? -1 : 1,
        "data-testid": n,
        ...t
      }
    ),
    s && /* @__PURE__ */ o(p, { color: d, fontSize: "h3", fontWeight: "700", position: "absolute", left: "0", top: "50%", transform: "translateY(-50%)", pointerEvents: "none", children: b })
  ] }) }) : null;
}
function D({ children: t, ...n }) {
  var r, i;
  const { token: e } = a();
  return /* @__PURE__ */ o(u, { alignItems: "center", children: /* @__PURE__ */ o(I, { pl: "2", pr: "3", py: "1.5", height: "min-content", minH: "min-content", width: "min-content", rounded: "full", onClick: e == null ? void 0 : e.onClick, leftIcon: e != null && e.selected ? /* @__PURE__ */ o(_, { name: ((r = e == null ? void 0 : e.selected) == null ? void 0 : r.name) || "?", url: (i = e == null ? void 0 : e.selected) == null ? void 0 : i.iconUrl, size: "5", borderRadius: "50%" }) : void 0, backgroundColor: "button-secondary", ...n, children: /* @__PURE__ */ o(B, { children: e != null && e.selected ? e.selected.symbol || e.selected.name : t }) }) });
}
function H({ percentage: t, ...n }) {
  const { amount: e } = a(), { onPercentageClick: r } = e || {};
  if (r)
    return /* @__PURE__ */ h(V, { onClick: () => r(t), cursor: "pointer", role: "button", whiteSpace: "nowrap", color: "text-secondary", _hover: {
      color: "text-primary"
    }, ...n, children: [
      t,
      "%"
    ] });
}
function M({ ...t }) {
  var r;
  const { amount: n } = a(), e = S(() => {
    if (!(n != null && n.conversionValue))
      return;
    const { isFiatInput: i, conversionValue: c } = n, l = c.value ?? "0", d = c.symbol, s = y(l);
    return i ? `${s} ${d}` : `${d}${s}`;
  }, [n]);
  return /* @__PURE__ */ h(p, { color: "text-secondary", ...t, children: [
    ((r = n == null ? void 0 : n.conversionValue) == null ? void 0 : r.approx) && /* @__PURE__ */ o(x, { children: "≈ " }),
    e
  ] });
}
function N({ ...t }) {
  var r, i;
  const { token: n } = a(), e = ((r = n == null ? void 0 : n.selected) == null ? void 0 : r.onBalanceClick) || void 0;
  if (((i = n == null ? void 0 : n.selected) == null ? void 0 : i.balance) !== void 0)
    return /* @__PURE__ */ o(p, { color: "text-secondary", onClick: e, cursor: e ? "pointer" : "default", _hover: {
      color: e ? "text-primary" : "text-secondary"
    }, ...t, children: n == null ? void 0 : n.selected.balance });
}
function U({ ...t }) {
  const { amount: n } = a(), { onSwitchClick: e } = n || {};
  return e ? /* @__PURE__ */ o(u, { onClick: e, alignItems: "center", justifyContent: "center", cursor: "pointer", borderRadius: "full", p: "1", color: "icon-secondary", _hover: {
    color: "text-primary",
    backgroundColor: "button-secondary"
  }, ...t, children: /* @__PURE__ */ o(g, { width: "12px", height: "12px" }) }) : null;
}
function Y({ children: t, ...n }) {
  return /* @__PURE__ */ o(u, { position: "relative", flexDirection: "column", gap: "2", padding: "4", backgroundColor: "surface-elevated", width: "100%", borderRadius: "xl", ...n, children: t });
}
function q({ ...t }) {
  const { amount: n } = a(), e = R();
  if (!(n != null && n.priceImpact))
    return null;
  const { value: r, type: i } = (n == null ? void 0 : n.priceImpact) || {}, c = r === 0 ? "(0.00%)" : `(${r.toFixed(2)}%)`, l = e[i].textColor;
  return /* @__PURE__ */ o(p, { color: l, ...t, children: c });
}
export {
  Y as Container,
  M as ConversionValue,
  A as InputAmount,
  D as InputToken,
  H as PercentageButton,
  q as PriceImpact,
  U as SwitchButton,
  N as TokenBalance
};
