import { jsx as o, jsxs as s, Fragment as x } from "react/jsx-runtime";
import i from "../../features/icons/NoShieldSecondaryIcon.js";
import u from "../../features/icons/ShieldPrimaryIcon.js";
import g from "../../features/icons/ShieldSecondaryIcon.js";
import { Flex as a } from "@chakra-ui/react";
import { useMemo as l } from "react";
import { useTranslation as c } from "react-i18next";
import "../Typography.js";
import { usePasswordStrengthIndicatorContext as d } from "./context.js";
import { L1Bold as m, L2Bold as h } from "../typography.generated.js";
const T = ({ ...n }) => {
  const t = d(), { t: e } = c(), r = l(() => t === null ? null : t < 3 ? {
    bgColor: "surface-danger-default",
    textColor: "text-danger",
    label: e("passwordStrengthIndicator.tooWeak"),
    icon: /* @__PURE__ */ o(i, { w: 4, h: 4 })
  } : t === 3 ? {
    bgColor: "surface-success-default",
    textColor: "text-success",
    label: e("passwordStrengthIndicator.good"),
    icon: /* @__PURE__ */ o(g, { w: 4, h: 4 })
  } : {
    bgColor: "surface-success-default",
    textColor: "text-success",
    label: e("passwordStrengthIndicator.excellent"),
    icon: /* @__PURE__ */ o(u, { w: 4, h: 4 })
  }, [t, e]);
  return r ? /* @__PURE__ */ s(a, { px: 2, py: 1, bg: r.bgColor, color: r.textColor, rounded: "md", width: "fit-content", alignItems: "center", ...n, children: [
    r.icon,
    /* @__PURE__ */ o(m, { ml: 1, children: r.label })
  ] }) : null;
}, k = ({ ...n }) => {
  const t = d(), { t: e } = c(), r = l(() => {
    if (t === null)
      return {
        label: e("passwordStrengthIndicator.passwordMustContainAtLeast8Characters"),
        bgColor: "surface-transparent",
        textColor: "text-secondary"
      };
    if (t < 3)
      return {
        label: e("passwordStrengthIndicator.thisIsAWweakPasswordTryAStrongerOne"),
        bgColor: "surface-danger-default",
        textColor: "text-danger-accessible"
      };
    if (t === 3)
      return {
        label: e("passwordStrengthIndicator.makeYourPasswordStrongerWithAFewMoreCharacters"),
        bgColor: "surface-transparent",
        textColor: "text-secondary"
      };
  }, [t, e]);
  return /* @__PURE__ */ o(x, { children: r && /* @__PURE__ */ o(h, { bg: r.bgColor, color: r.textColor, px: 4, py: 3, rounded: "md", ...n, children: r.label }) });
}, L = ({ ...n }) => {
  const t = d(), { t: e } = c(), r = l(() => t === null ? {
    comment: e("passwordStrengthIndicator.passwordMustContainAtLeast8Characters"),
    bgColor: "surface-transparent",
    textColor: "text-secondary"
  } : t < 3 ? {
    bgColor: "surface-danger-default",
    labelTextColor: "text-danger",
    label: e("passwordStrengthIndicator.tooWeak"),
    commentTextColor: "text-danger-accessible",
    comment: e("passwordStrengthIndicator.thisIsAWweakPasswordTryAStrongerOne"),
    icon: /* @__PURE__ */ o(i, { w: 4, h: 4, color: "icon-danger" })
  } : t === 3 ? {
    bgColor: "surface-success-default",
    labelTextColor: "text-success",
    label: e("passwordStrengthIndicator.good"),
    comment: e("passwordStrengthIndicator.makeYourPasswordStrongerWithAFewMoreCharacters"),
    commentTextColor: "text-success-accessible",
    icon: /* @__PURE__ */ o(g, { w: 4, h: 4 })
  } : {
    bgColor: "surface-success-default",
    textColor: "text-success",
    label: e("passwordStrengthIndicator.excellent"),
    gap: 1,
    icon: /* @__PURE__ */ o(u, { w: 4, h: 4, color: "icon-success" })
  }, [t, e]);
  return r ? /* @__PURE__ */ s(a, { px: 4, py: 3, gap: r.gap ?? 3, bg: r.bgColor, rounded: "md", width: "fit-content", alignItems: "center", ...n, children: [
    r.icon,
    /* @__PURE__ */ s(a, { flexDirection: "column", children: [
      /* @__PURE__ */ o(m, { color: r.textColor ?? r.labelTextColor, children: r.label }),
      /* @__PURE__ */ o(h, { bg: r.bgColor, color: r.textColor ?? r.commentTextColor, rounded: "md", ...n, children: r.comment })
    ] })
  ] }) : null;
};
export {
  k as PasswordStrengthIndicatorComment,
  T as PasswordStrengthIndicatorLabel,
  L as PasswordStrengthIndicatorLabelAndComment
};
