import { q as r, t, g as s, x, p as weStyles, i } from "./shared-styles-6f00e07f.js";
import { e, w as wrapPathInSvg, O as mdiClose } from "./icon-d2a053d3.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
    if (decorator = decorators[i2])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
let SplashScreen = class extends s {
  constructor() {
    super(...arguments);
    this.progressState = "";
    this.passwordsDontMatch = false;
    this.view = 0;
  }
  async firstUpdated() {
    window.electronAPI.onProgressUpdate((e2, payload) => {
      console.log("RECEIVED PROGRESS UPDATE: ", e2, payload);
      this.progressState = payload;
    });
    const lairSetupRequired = await window.electronAPI.lairSetupRequired();
    console.log("lairSetupRequired: ", lairSetupRequired);
    if (lairSetupRequired) {
      this.view = 1;
    } else {
      this.view = 3;
    }
    this.profile = await window.electronAPI.getProfile();
  }
  async setupAndLaunch() {
    const confirmPassword = this.confirmPasswordInput?.value;
    if (!confirmPassword || confirmPassword !== this.password) {
      this.passwordsDontMatch = true;
      return;
    }
    this.view = 4;
    try {
      await window.electronAPI.launch(this.password);
    } catch (e2) {
      console.error("Failed to launch: ", e2);
      this.progressState = "";
      this.view = 1;
    }
  }
  async launch() {
    this.view = 4;
    try {
      await window.electronAPI.launch(this.password);
    } catch (e2) {
      console.error("Failed to launch: ", e2);
      this.progressState = "";
      if (e2.toString().includes("Wrong password.")) {
        this.password = void 0;
        this.launchError = "Wrong password.";
        setTimeout(() => {
          if (this.passwordInput)
            this.passwordInput.focus();
        });
        setTimeout(() => {
          this.launchError = void 0;
        }, 3e3);
      } else {
        this.launchError = e2;
        setTimeout(() => {
          this.launchError = void 0;
        }, 6e3);
      }
      this.view = 3;
    }
  }
  checkPasswords() {
    const confirmPassword = this.confirmPasswordInput?.value;
    if (!confirmPassword || confirmPassword !== this.password) {
      this.passwordsDontMatch = true;
    } else {
      this.passwordsDontMatch = false;
    }
  }
  setupDisabled() {
    return !this.password || this.password === "" || this.passwordsDontMatch;
  }
  renderSetupLair() {
    return x`
      <div class="column center-content">
        <div class="row" style="align-items: center;">
          <h1>Setup</h1>
        </div>
        <div style="font-size: 17px; max-width: 500px; text-align: center;">
          Choose a password to encrypt your data and private keys. You will always need this
          password to start Moss.
        </div>
        <h3>Select Password:</h3>
        <input
          autofocus
          @input=${(_e) => {
      this.checkPasswords();
      this.password = this.passwordInput.value;
    }}
          id="password-input"
          type="password"
        />
        <h3>Confirm Password:</h3>
        <input
          @input=${(_e) => this.checkPasswords()}
          id="confirm-password-input"
          type="password"
          @keypress=${(e2) => {
      if (e2.key === "Enter") {
        if (!this.setupDisabled()) {
          this.setupAndLaunch();
        }
      }
    }}
        />
        <div class="input-error ${this.passwordsDontMatch ? "" : "color-transparent"}">
          Passwords don't match!
        </div>
        <button
          @click=${() => this.setupAndLaunch()}
          tabindex="0"
          style="margin-top: 10px; margin-bottom: 30px;"
          .disabled=${this.setupDisabled()}
        >
          Setup and Launch
        </button>
      </div>
    `;
  }
  renderEnterPassword() {
    return x`
      <div class="column center-content">
        <h3>Enter Password:</h3>
        <input
          autofocus
          @input=${(_e) => {
      this.password = this.passwordInput.value;
    }}
          @keypress=${(e2) => {
      if (e2.key === "Enter") {
        this.launch();
      }
    }}
          id="password-input"
          type="password"
        />
        <button
          @click=${() => this.launch()}
          tabindex="0"
          style="margin-top: 30px; margin-bottom: 30px;"
          .disabled=${!this.password || this.password === ""}
        >
          Launch
        </button>
      </div>
    `;
  }
  renderContent() {
    switch (this.view) {
      case 0:
        return x`loading`;
      case 1:
        return this.renderSetupLair();
      case 3:
        return this.renderEnterPassword();
      case 4:
        return this.renderLaunching();
      default:
        return x``;
    }
  }
  renderLaunching() {
    return x` <h1>Starting up...</h1> `;
  }
  renderExitButton() {
    return x`
      <div class="top-right row" style="align-items: center;">
        <sl-icon
          tabindex="0"
          @click=${() => window.electronAPI.exit()}
          @keypress=${(e2) => {
      if (e2.key === "Enter") {
        window.electronAPI.exit();
      }
    }}
          title="Quit"
          class="exit-icon"
          .src=${wrapPathInSvg(mdiClose)}
        ></sl-icon>
      </div>
    `;
  }
  render() {
    return x`
      <div class="background">
        ${this.renderContent()}
        ${this.profile && this.progressState === "" ? x`<span class="bottom-left">profile: ${this.profile}</span>` : x``}
        <img
          class="top-left"
          src="icon.png"
          style="height: 60px; margin-right: 15px;"
          alt="Moss icon"
          title="Moss"
        />
        <div class="bottom-left">${this.progressState}</div>
        <div class="bottom-right">
          <div class="row" style="align-items: center;">
            <span style="color: white; margin-left: 6px;">Lightningrod Labs</span>
            <img src="lightningrodlabs_logo.png" style="height: 30px; margin-left: 6px" />
          </div>
        </div>
        <div class="top-right errorbar row " style="${this.launchError ? "" : "display: none;"}">
          ${this.launchError}
        </div>
      </div>
    `;
  }
  static get styles() {
    return [
      weStyles,
      i`
        :host {
          flex: 1;
          display: flex;
          margin: 0;
          padding: 0;
          color: #e6e3fc;
        }

        h1 {
          color: #ffffff;
        }

        .errorbar {
          background: #990606;
          color: #e6e3fc;
          border-radius: 10px;
          font-weight: bold;
          align-items: center;
          justify-content: flex-end;
          padding: 18px;
          box-shadow: 0px 0px 3px 1px black;
          font-size: 17px;
        }

        .input-error {
          margin-top: 3px;
          color: red;
        }

        .color-transparent {
          color: transparent;
        }

        h3 {
          margin-bottom: 8px;
        }

        button {
          all: unset;
          cursor: pointer;
          background: #9b7429;
          color: #ffffff;
          padding: 10px;
          border-radius: 10px;
          font-weight: bold;
        }

        button:disabled {
          opacity: 0.7;
        }

        button:hover:not(:disabled) {
          background: #b7962b;
        }

        button:focus {
          outline: 2px solid orange;
        }

        input {
          height: 30px;
          width: 200px;
          font-size: 20px;
          border-radius: 8px;
        }

        .exit-icon {
          font-size: 30px;
          color: white;
          cursor: pointer;
        }

        .loader {
          color: #e6e3fc;
          font-size: 35px;
        }

        .bottom-left {
          position: absolute;
          bottom: 5px;
          left: 5px;
          color: #ffffff;
          font-size: 15px;
        }

        .bottom-right {
          position: absolute;
          bottom: 5px;
          right: 10px;
          color: #ffffff;
          font-size: 15px;
        }

        .top-left {
          position: absolute;
          top: 5px;
          left: 10px;
          color: #ffffff;
        }

        .top-right {
          position: absolute;
          top: 5px;
          right: 10px;
          color: #ffffff;
        }

        .background {
          position: relative;
          display: flex;
          flex: 1;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }
      `
    ];
  }
};
__decorateClass([
  r()
], SplashScreen.prototype, "progressState", 2);
__decorateClass([
  r()
], SplashScreen.prototype, "profile", 2);
__decorateClass([
  r()
], SplashScreen.prototype, "passwordsDontMatch", 2);
__decorateClass([
  r()
], SplashScreen.prototype, "password", 2);
__decorateClass([
  r()
], SplashScreen.prototype, "launchError", 2);
__decorateClass([
  e("#password-input")
], SplashScreen.prototype, "passwordInput", 2);
__decorateClass([
  e("#confirm-password-input")
], SplashScreen.prototype, "confirmPasswordInput", 2);
__decorateClass([
  r()
], SplashScreen.prototype, "view", 2);
SplashScreen = __decorateClass([
  t("splash-screen")
], SplashScreen);
