import { jsx as e, jsxs as f } from "react/jsx-runtime";
import { useState as I, useMemo as C } from "react";
import { styled as k, Box as p, Typography as y, IconButton as D, Button as U, useTheme as S, FormControl as B, TextField as F } from "@mui/material";
import { Remove as T, Add as _ } from "@mui/icons-material";
import { translate as z } from "@arcblock/ux/lib/Locale/util";
import { useMemoizedFn as E } from "ahooks";
import { useLocaleContext as M } from "@arcblock/ux/lib/Locale/context";
import R from "@arcblock/icons/lib/Link";
import { mergeSx as j } from "@arcblock/ux/lib/Util/style";
import { withoutProtocol as A } from "ufo";
import { Icon as P } from "@iconify/react";
import { isValidUrl as h, getLogoByUrl as W, isDuplicateUrl as N } from "./utils.js";
import { translations as V } from "../../libs/locales.js";
import { inputFieldStyle as K, commonInputStyle as O } from "../editable-field.js";
const g = 10;
function X(t) {
  return A(t);
}
function $({
  value: t,
  onChange: s,
  errorMsg: l
}) {
  return /* @__PURE__ */ e(B, { fullWidth: !0, children: /* @__PURE__ */ e(
    F,
    {
      variant: "outlined",
      value: t,
      onChange: (i) => {
        const u = i.target.value;
        s(u);
      },
      fullWidth: !0,
      error: !!l,
      helperText: l,
      sx: j(K, l ? {} : O)
    }
  ) });
}
function q({ links: t = [], onChange: s }) {
  const { locale: l } = M(), r = E((o, n = {}) => z(V, o, l, "en", n)), [i, u] = I([""]), x = C(() => {
    const o = t[t.length - 1];
    return !h(o) || i.length > 0 && i[i.length - 1];
  }, [i, t]), v = () => {
    (t.length < g || !x) && s([...t, ""]);
  }, L = (o) => {
    const n = t.filter((c, d) => d !== o), a = i.filter((c, d) => d !== o);
    u(a), s(n);
  }, b = (o, n) => {
    const a = [...t];
    a[o] = n;
    const c = [...i], d = !!(n && !h(n));
    c[o] = !1, d ? c[o] = d : a.filter((m, w) => m && h(m) && w !== o).some((m) => N(m, n)) && (c[o] = "duplicate"), u(c), s(a);
  };
  return /* @__PURE__ */ f(
    p,
    {
      sx: {
        width: "100%"
      },
      children: [
        /* @__PURE__ */ e(
          p,
          {
            sx: {
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              gap: 1
            },
            children: /* @__PURE__ */ e(y, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0, fontSize: "12px", color: "text.primary" }, children: r("profile.socialMedia") })
          }
        ),
        t.map((o, n) => {
          let a = "";
          return i[n] === "duplicate" ? a = r("profile.duplicateURL") : i[n] === !0 ? a = r("profile.invalidURL") : a = "", /* @__PURE__ */ f(
            p,
            {
              sx: {
                display: "flex",
                alignItems: "flex-start",
                mb: 1
              },
              children: [
                /* @__PURE__ */ e($, { value: o, onChange: (c) => b(n, c), errorMsg: a }),
                /* @__PURE__ */ e(D, { onClick: () => L(n), children: /* @__PURE__ */ e(T, { sx: { color: "text.secondary" } }) })
              ]
            },
            n
          );
        }),
        t.length < g ? /* @__PURE__ */ f(
          U,
          {
            fullWidth: !0,
            variant: "outlined",
            disabled: !!x,
            onClick: v,
            size: "small",
            sx: {
              height: "40px",
              border: "1px dashed",
              borderColor: "grey.100",
              color: "text.primary",
              "&:hover": {
                borderColor: "grey.100",
                backgroundColor: "action.hover"
              },
              "&.Mui-disabled": {
                borderStyle: "dashed"
              }
            },
            children: [
              /* @__PURE__ */ e(_, {}),
              " ",
              /* @__PURE__ */ e("span", { children: r("profile.addLink") })
            ]
          }
        ) : /* @__PURE__ */ e(y, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0, fontSize: "12px", color: "text.secondary" }, children: r("profile.maxLinkCount", { count: g }) })
      ]
    }
  );
}
function G({ link: t }) {
  const l = S().palette.mode === "dark";
  if (!t)
    return null;
  const { icon: r, options: i } = W(t) || {};
  return r ? /* @__PURE__ */ e(
    P,
    {
      icon: r,
      width: 20,
      height: 20,
      style: {
        filter: l && !i?.skipDarkInvert ? "brightness(0) saturate(100%) invert(1)" : "none",
        transform: "scale(0.8)"
      },
      ...i
    }
  ) : /* @__PURE__ */ e(R, { width: 20, height: 20, style: { filter: l ? "brightness(0) saturate(100%) invert(1)" : "none" } });
}
function ut({
  editable: t = !1,
  links: s = [],
  onChange: l
}) {
  return t ? /* @__PURE__ */ e(q, { links: s, onChange: l }) : /* @__PURE__ */ e(
    p,
    {
      sx: {
        width: "100%",
        display: "flex",
        flexDirection: "column",
        gap: 2
      },
      children: s.map((r) => /* @__PURE__ */ f(
        p,
        {
          sx: {
            display: "flex",
            alignItems: "center",
            gap: 1,
            overflow: "hidden",
            width: "100%"
          },
          children: [
            /* @__PURE__ */ e(G, { link: r }),
            /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(p, { component: "a", href: r, style: { textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: X(r) }) })
          ]
        },
        r
      ))
    }
  );
}
const H = k("span")`
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &,
  & > * {
    color: ${({ theme: t }) => t.palette.text.primary};
  }

  & > * {
    word-break: break-all;
  }

  .status {
    margin-left: 8px;
  }
`;
export {
  ut as LinkPreviewInput
};
