import { UserNameValidationError as K, DisplayNameValidationError as _, PasswordValidationError as F } from "./accelbyte-widgets372.mjs";
import { Button as B } from "./accelbyte-widgets107.mjs";
import { Checkbox as y } from "./accelbyte-widgets335.mjs";
import { FormGroup as f } from "./accelbyte-widgets263.mjs";
import { InputGroup as k } from "./accelbyte-widgets229.mjs";
import { InputGroupPassword as J } from "./accelbyte-widgets264.mjs";
import { PasswordConstraint as L } from "./accelbyte-widgets265.mjs";
import { Select as $ } from "./accelbyte-widgets526.mjs";
import { t as P } from "./accelbyte-widgets58.mjs";
import { Env as E } from "./accelbyte-widgets108.mjs";
import { LegalHelper as w } from "@accelbyte/sdk-legal";
import * as e from "react";
import { Trans as s } from "react-i18next";
import { LinkPlatformAccountConfirmationDialog as G } from "./accelbyte-widgets527.mjs";
import n from "./accelbyte-widgets373.mjs";
import { LinkNewAccountVerification as W } from "./accelbyte-widgets528.mjs";
import { LegalUtils as S } from "./accelbyte-widgets147.mjs";
import { FeatureFlags as z } from "./accelbyte-widgets57.mjs";
import { Ctx as H } from "./accelbyte-widgets33.mjs";
import { InputValidationHelper as p, ValidateableInputField as u } from "@accelbyte/sdk-iam";
import I from "classnames";
import { validateNotEmpty as Y } from "./accelbyte-widgets370.mjs";
import { Validation as T } from "./accelbyte-widgets269.mjs";
class Ce extends e.Component {
  constructor(h) {
    super(h), this.updatePolicies = () => {
      const { policies: t } = this.props;
      t && this.setState({
        requiredPolicies: t.filter((i) => i.isMandatory),
        optionalPolicies: t.filter((i) => !i.isMandatory)
      });
    }, this.onChangeCountry = (t) => {
      this.validation.set("country", Y(t.value)), this.setState({ country: t }), this.props.onChangeCountry(t);
    }, this.onChangeDisplayName = (t) => {
      const i = t.target.value, { validations: a } = this.props.inputValidationManager.state;
      this.validation.set("displayName", p.validateDisplayName(i, E.IS_DISABLE_USERNAME, a)), this.setState({ displayName: i });
    }, this.onChangeUsername = (t) => {
      const i = t.target.value, { validations: a } = this.props.inputValidationManager.state;
      this.validation.set("username", p.validateUserName(i, a)), this.setState({ username: i });
    }, this.onPasswordChange = (t) => {
      const i = t.target.value, { validations: a } = this.props.inputValidationManager.state;
      this.validation.set("password", p.validatePassword(i, a)), this.setState({
        password: i
      });
    }, this.onVerificationCodeChange = (t) => {
      this.setState({ verificationCode: t });
    }, this.renderMinimumAgeCheckbox = () => {
      const { reachMinimumAge: t } = this.state, i = this.props.ageRestriction.age;
      if (i)
        return /* @__PURE__ */ e.createElement("div", { className: n.agreementList }, /* @__PURE__ */ e.createElement("div", { className: n.agreementItem }, /* @__PURE__ */ e.createElement(
          y,
          {
            isChecked: t,
            onChange: () => {
              this.setState({ reachMinimumAge: !t });
            }
          }
        ), /* @__PURE__ */ e.createElement("div", { className: n.text }, /* @__PURE__ */ e.createElement(s, { i18nKey: "LinkPlatformAccountPage.LinkNewAccountForm.minimumAge" }, "I confirm that I am ", { age: i }, " years of age or older."))));
    }, this.renderRequiredPolicies = () => {
      const { requiredPolicies: t, isRequiredPolicyAccepted: i } = this.state;
      if (t.length)
        return /* @__PURE__ */ e.createElement("div", { className: n.agreementList }, /* @__PURE__ */ e.createElement("div", { className: n.agreementItem }, /* @__PURE__ */ e.createElement(
          y,
          {
            isChecked: i,
            onChange: () => {
              this.setState({ isRequiredPolicyAccepted: !i });
            }
          }
        ), /* @__PURE__ */ e.createElement("div", { className: I(n.text, n.breakLabelWord) }, /* @__PURE__ */ e.createElement(s, { i18nKey: "LinkPlatformAccountPage.LinkNewAccountForm.tos.haveRead" }, "I have read and agreed to the"), t.map((a, r) => {
          const o = w.createLegalURL(S.getLegalUrl(), a.localizedPolicyVersionId);
          return /* @__PURE__ */ e.createElement(e.Fragment, { key: `${r}-${a.policyName}` }, r === t.length - 1 && t.length > 1 && /* @__PURE__ */ e.createElement(s, { i18nKey: "LinkPlatformAccountPage.LinkNewAccountForm.tos.and" }, "and"), /* @__PURE__ */ e.createElement("span", null, /* @__PURE__ */ e.createElement("a", { href: o, target: "_blank", rel: "noreferrer" }, a.policyName)), t.length !== 1 && r !== t.length - 1 && r !== t.length - 2 ? ", " : " ");
        }))));
    }, this.renderOptionalPolicies = () => {
      const { optionalPolicies: t, acceptedOptionalPolicyIdMap: i } = this.state;
      return !t || !t.length ? null : t.map((a, r) => {
        const o = w.createLegalURL(S.getLegalUrl(), a.localizedPolicyVersionId);
        return /* @__PURE__ */ e.createElement("div", { className: n.agreementList, key: `${r}-${JSON.stringify(a.policyId)}` }, /* @__PURE__ */ e.createElement("div", { className: n.agreementItem }, /* @__PURE__ */ e.createElement(
          y,
          {
            isChecked: i.get(a.policyId),
            onChange: () => {
              this.onClickOptionalPolicyCheckbox(a);
            }
          }
        ), /* @__PURE__ */ e.createElement("span", { className: n.text }, /* @__PURE__ */ e.createElement(s, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.optional" }, "[Optional]")), /* @__PURE__ */ e.createElement("div", { className: I(n.text, n.breakLabelWord) }, a.policyName, /* @__PURE__ */ e.createElement("a", { href: o, target: "_blank", rel: "noreferrer" }, /* @__PURE__ */ e.createElement(s, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.learnMore" }, "Learn more.")))));
      });
    }, this.onClickOptionalPolicyCheckbox = (t) => {
      const { acceptedOptionalPolicyIdMap: i } = this.state;
      i.set(t.policyId, !i.get(t.policyId)), this.setState({ acceptedOptionalPolicyIdMap: i });
    }, this.onClickContinue = () => {
      const { isRequiredPolicyAccepted: t, requiredPolicies: i, acceptedOptionalPolicyIdMap: a } = this.state, r = [];
      if (t)
        for (const o of i)
          r.push(o.policyId);
      a.forEach((o, g) => {
        o && r.push(g);
      }), this.props.onContinue({
        ...this.state,
        acceptedPolicyIds: r,
        reachMinimumAge: !0
      });
    }, this.closeConfirmDialog = () => this.setState({ openConfirmDialog: !1 }), this.openConfirmDialog = () => this.setState({ openConfirmDialog: !0 }), this.state = {
      verificationCode: "",
      displayName: "",
      country: this.props.currentCountry,
      username: "",
      password: "",
      requiredPolicies: [],
      optionalPolicies: [],
      isRequiredPolicyAccepted: !1,
      reachMinimumAge: !1,
      acceptedOptionalPolicyIdMap: /* @__PURE__ */ new Map(),
      openConfirmDialog: !1
    }, this.validation = new T(), this.validation.listen(() => this.setState({}));
  }
  componentDidMount() {
    this.updatePolicies();
  }
  componentDidUpdate(h) {
    JSON.stringify(this.props.policies) !== JSON.stringify(h.policies) && this.updatePolicies(), JSON.stringify(this.props.currentCountry) !== JSON.stringify(h.currentCountry) && this.setState({ country: this.props.currentCountry }), JSON.stringify(this.props.linkNewPlatformAccountError) !== JSON.stringify(h.linkNewPlatformAccountError) && this.props.linkNewPlatformAccountError && this.closeConfirmDialog();
  }
  render() {
    const { onChangePage: h, inputValidationManager: t, platformId: i } = this.props, { onRequestVerificationCode: a, isRequestingVerificationCode: r } = this.props, { validations: o } = t.state, { displayName: g, username: C, country: D, password: N, requiredPolicies: V, isRequiredPolicyAccepted: b, reachMinimumAge: M, verificationCode: A } = this.state, v = this.props.countries.map((l) => ({
      value: l.code || "",
      label: l.name || ""
    })), c = p.getValidationByKey(u.enum.username, o), m = p.getValidationByKey(u.enum.displayName, o), d = p.getValidationByKey(u.enum.password, o), x = E.IS_DISABLE_DISPLAY_NAME ? g.length > 0 : !0, R = E.IS_DISABLE_USERNAME || C.length > 0, U = A.length > 0, O = H.hasFeature(z.isLegalEnabled), q = this.validation.isAllValid() && (b || V.length === 0) && (M || !this.props.ageRestriction.age) && N.length > 0 && x && R && U;
    return /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
      W,
      {
        verificationCode: A,
        onChangePage: h,
        isRequestingVerificationCode: r,
        onRequestVerificationCode: a,
        onChangeVerificationCode: this.onVerificationCodeChange,
        validation: this.validation
      }
    ), /* @__PURE__ */ e.createElement("hr", null), /* @__PURE__ */ e.createElement("div", { className: n.label }, /* @__PURE__ */ e.createElement(s, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.country" }, "Country")), /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(
      $,
      {
        isFullWidth: !0,
        className: "flex w-full items-center",
        value: v.find(({ value: l }) => D.value === l),
        onChange: (l) => this.onChangeCountry({
          value: (l == null ? void 0 : l.value) ?? "",
          label: (l == null ? void 0 : l.label) ?? ""
        }),
        options: v
      }
    )), !E.IS_DISABLE_USERNAME && /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement("div", { className: n.label }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(s, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.userName" }, "Username")), /* @__PURE__ */ e.createElement("div", null, C.length, "/", c == null ? void 0 : c.maxLength)), /* @__PURE__ */ e.createElement(
      k,
      {
        className: n.input,
        value: C,
        onChange: this.onChangeUsername,
        placeholder: P("linkPlatformAccountPage.LinkNewAccount.placeholder.userName"),
        disabled: !!this.props.inputValidationManager.state.fetchError,
        popoverContent: /* @__PURE__ */ e.createElement(
          L,
          {
            descriptions: p.getValidationDescription(u.enum.username, o)
          }
        ),
        maxLength: c == null ? void 0 : c.maxLength
      }
    ), K(this.validation.get("username"), {
      min: c && c.minLength,
      max: c && c.maxLength
    })), !E.IS_DISABLE_DISPLAY_NAME && /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement("div", { className: n.label }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(s, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.displayName" }, "Display Name"), /* @__PURE__ */ e.createElement(s, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.tos.optional" }, " (optional)")), /* @__PURE__ */ e.createElement("div", null, g.length, "/", m == null ? void 0 : m.maxLength)), /* @__PURE__ */ e.createElement(
      k,
      {
        className: n.input,
        value: g,
        onChange: this.onChangeDisplayName,
        placeholder: P("linkPlatformAccountPage.LinkNewAccount.placeholder.displayName"),
        popoverContent: /* @__PURE__ */ e.createElement(
          L,
          {
            descriptions: p.getValidationDescription(u.enum.displayName, o)
          }
        ),
        maxLength: m == null ? void 0 : m.maxLength
      }
    ), _(this.validation.get("displayName"), {
      min: m && m.minLength,
      max: m && m.maxLength
    })), /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement("div", { className: n.label }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(s, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.password" }, "Password")), /* @__PURE__ */ e.createElement("div", null, N.length, "/", d == null ? void 0 : d.maxLength)), /* @__PURE__ */ e.createElement(
      J,
      {
        className: n.input,
        value: N,
        placeholder: P("linkPlatformAccountPage.LinkNewAccount.placeholder.password"),
        togglePassword: !0,
        onChange: this.onPasswordChange,
        popoverContent: /* @__PURE__ */ e.createElement(
          L,
          {
            descriptions: p.getValidationDescription(u.enum.password, o)
          }
        ),
        maxLength: d == null ? void 0 : d.maxLength,
        hasStrengthMeter: !!N && !this.validation.get("password")
      }
    ), F(this.validation.get("password"), {
      min: d && d.minLength,
      max: d && d.maxLength
    })), /* @__PURE__ */ e.createElement(f, null, this.renderMinimumAgeCheckbox(), this.renderRequiredPolicies(), O && this.renderOptionalPolicies()), /* @__PURE__ */ e.createElement(B, { className: "btn btn-primary w-full uppercase", onClick: () => this.openConfirmDialog(), disabled: !q }, /* @__PURE__ */ e.createElement(s, { i18nKey: "linkPlatformAccountPage.LinkNewAccount.continue" }, "Continue")), this.state.openConfirmDialog && /* @__PURE__ */ e.createElement(
      G,
      {
        onCloseDialog: () => this.closeConfirmDialog(),
        toggleDialogConfirmation: () => this.onClickContinue(),
        platformId: i,
        isLoading: this.props.isLinkingUser
      }
    ));
  }
}
export {
  Ce as LinkNewAccountForm
};
