import{html as e,css as t}from"../../../../lit/index.js";import"../../../simple-icon/lib/simple-icons.js";import"../../../simple-icon/lib/simple-icon-lite.js";import{SimpleColors as s}from"../../../simple-colors/simple-colors.js";import"../../../rpg-character/rpg-character.js";import{store as i}from"./AppHaxStore.js";export class AppHaxSiteLogin extends s{static get tag(){return"app-hax-site-login"}constructor(){super(),this.windowControllers=new AbortController,this.username="",this.password="",this.errorMSG="Enter User name",this.hidePassword=!0,this.hasPass=!1}static get properties(){return{...super.properties,username:{type:String},password:{type:String},errorMSG:{type:String},hidePassword:{type:Boolean},hasPass:{type:Boolean}}}firstUpdated(){super.firstUpdated(),setTimeout((()=>{this.shadowRoot.querySelector("input").focus()}),0)}static get styles(){return[super.styles,t`
        :host {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        #inputcontainer {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        a {
          color: red;
        }

        // This does not work
        #errorText > p {
          visibility: hidden;
          background-color: lightblue;
          color: red;
          font-weight: bold;
        }
        rpg-character {
          display: block;
          margin: 0px;
        }
        .external {
          text-align: center;
        }
        input {
          font-family: "Press Start 2P", sans-serif;
          font-size: 28px;
          padding: 8px;
          border: 4px solid black;
          border-radius: 8px;
          width: 75%;
        }
        button {
          font-family: "Press Start 2P", sans-serif;
          font-size: 30px;
          padding: 8px;
          border: 4px solid black;
          border-radius: 8px;
          min-width: 50%;
          margin: 16px;
        }
        button:focus,
        button:hover {
          background-color: var(--simple-colors-default-theme-green-8);
          color: var(--simple-colors-default-theme-grey-1);
          outline: 2px solid var(--simple-colors-default-theme-grey-1);
          cursor: pointer;
        }
        .notyou {
          padding: 8px;
        }
        .visibility-icon {
          color: var(--simple-colors-default-theme-grey-12);
          background-color: var(--simple-colors-default-theme-grey-3);
          border: 2px solid var(--simple-colors-default-theme-grey-12);
          position: relative;
          margin-top: -44px;
          margin-bottom: 20px;
          margin-left: 70%;
          z-index: 1;
          padding: 2px;
          --simple-icon-width: 26px;
          --simple-icon-height: 26px;
        }
      `]}checkUsername(){const e=this.shadowRoot.querySelector("#username").value;this.hidePassword=!1,this.errorMSG="",this.username=e,i.appEl.playSound("click2"),setTimeout((()=>{this.shadowRoot.querySelector("input").focus()}),0)}async checkPassword(){i.appEl.playSound("click2");const e=this.shadowRoot.querySelector("#password").value;globalThis.dispatchEvent(new CustomEvent("jwt-login-login",{composed:!0,bubbles:!0,cancelable:!1,detail:{username:this.username,password:e}}))}reset(){this.errorMSG="",this.username="",this.hasPass=!1,this.hidePassword=!0}nameChange(){this.username=this.shadowRoot.querySelector("#username").value}connectedCallback(){super.connectedCallback(),globalThis.addEventListener("jwt-logged-in",this._jwtLoggedIn.bind(this),{signal:this.windowControllers.signal}),globalThis.addEventListener("jwt-login-login-failed",this._jwtLoginFailed.bind(this),{signal:this.windowControllers.signal})}disconnectedCallback(){this.windowControllers.abort(),super.disconnectedCallback()}_jwtLoginFailed(e){this.hidePassword=!0,this.errorMSG="Invalid Username or Password",i.appEl.playSound("error")}_jwtLoggedIn(e){e.detail&&(i.user={name:this.username},i.appEl.playSound("success"),this.dispatchEvent(new CustomEvent("simple-modal-hide",{bubbles:!0,cancelable:!0,detail:{}})),i.toast(`Welcome ${this.username}! Let's go!`,5e3,{hat:"construction"}),i.appEl.reset())}passChange(e){const t=this.shadowRoot.querySelector("#password").value;this.hasPass=!!t}toggleViewPass(e){const t=this.shadowRoot.querySelector("#password"),s="password"===t.getAttribute("type")?"text":"password";t.setAttribute("type",s),e.target.icon="text"===s?"lrn:visible":"lrn:view-off"}render(){return e`
      <rpg-character seed="${this.username}"></rpg-character>
      <p id="errorText">${this.errorMSG}</p>
      <div id="inputcontainer">
        ${this.hidePassword?e`<input
                id="username"
                type="text"
                placeholder="user name"
                aria-label="user name"
                @input="${this.nameChange}"
              />
              <button
                ?disabled="${!this.username}"
                @click=${this.checkUsername}
              >
                Next &gt;
              </button>`:e`<div class="notyou">
                Hey ${this.username}! <a @click=${this.reset}>not you?</a>
              </div>
              <input
                id="password"
                type="password"
                placeholder="password"
                @input="${this.passChange}"
              />
              <simple-icon-button-lite
                icon="lrn:view-off"
                tabindex="-1"
                title="Toggle password display"
                @click="${this.toggleViewPass}"
                class="visibility-icon"
              ></simple-icon-button-lite>
              <button ?disabled="${!this.hasPass}" @click=${this.checkPassword}>
                Login
              </button>`}
        <div class="external">
          <slot name="externalproviders"></slot>
        </div>
      </div>
    `}}customElements.define(AppHaxSiteLogin.tag,AppHaxSiteLogin);