// Helm — Lock screen (密碼登入頁). 真驗證:把密碼送後端,對了才進。
(function () {
  const NS = window.HelmDesignSystem_9613a7;
  const { Button, Input, Checkbox, HelmMark } = NS;

  function Lock({ onUnlock }) {
    const [pw, setPw] = React.useState("");
    const [err, setErr] = React.useState(false);
    const [errMsg, setErrMsg] = React.useState("密碼不正確，請再試一次");
    const [loading, setLoading] = React.useState(false);
    const [remember, setRemember] = React.useState(true);

    function submit(e) {
      e.preventDefault();
      if (loading || !pw) return;
      setLoading(true);
      setErr(false);
      window.HelmData.auth(pw, remember).then(function (res) {
        if (res.ok) {
          onUnlock();
        } else {
          setLoading(false);
          setErr(true);
          setErrMsg(res.reason === "network"
            ? "無法連線，稍後再試"
            : "密碼不正確，請再試一次");
        }
      });
    }

    return (
      <div className="lock">
        <div className="lock__texture" aria-hidden="true" />
        <div className="lock__center">
          <img src="./assets/helm-app-icon.svg" width="76" height="76" alt="" className="lock__icon" />
          <div className="lock__word">Helm</div>
          <div className="lock__tag">你親手掌自己財務的舵</div>

          <form className={"lock__form" + (err ? " shake" : "")} onSubmit={submit}>
            <Input
              type="password"
              inputMode="text"
              placeholder="輸入密碼"
              value={pw}
              invalid={err}
              onChange={(e) => { setPw(e.target.value); setErr(false); }}
              style={{ textAlign: "center" }}
              autoFocus
            />
            {err && <div className="lock__err">{errMsg}</div>}
            <Button type="submit" variant="primary" size="lg" block loading={loading}>
              {loading ? "驗證中…" : "進入"}
            </Button>
            <div className="lock__remember">
              <Checkbox id="remember" checked={remember} onChange={setRemember}
                label="記住登入" hint="在這台裝置上保持登入" />
            </div>
          </form>
        </div>
        <div className="lock__foot">
          <i className="ph ph-lock-simple" aria-hidden="true" />
          你的資料只有你看得到
        </div>
      </div>
    );
  }

  window.Lock = Lock;
})();