import{html as e,css as t}from"../../../../lit/index.js";import{SimpleColors as r}from"../../../simple-colors/simple-colors.js";import{autorun as s,toJS as o}from"../../../../mobx/dist/mobx.esm.js";import{store as i}from"./AppHaxStore.js";import"../../../promise-progress/promise-progress.js";export class AppHaxHatProgress extends r{static get tag(){return"app-hax-hat-progress"}constructor(){super(),this.promises=[],this.max=100,s((()=>{this.promises=o(i.newSitePromiseList)})),s((()=>{this.dark=o(i.darkMode)}))}static get properties(){return{...super.properties,promises:{type:Array}}}process(){this.shadowRoot.querySelector("#progress2").process()}firstUpdated(e){super.firstUpdated&&super.firstUpdated(e),this.dispatchEvent(new CustomEvent("progress-ready",{detail:!0})),setTimeout((()=>{this.shadowRoot.querySelector("#progress2").addEventListener("value-changed",(e=>{this.shadowRoot.querySelector("#value").textContent=e.detail.value})),this.shadowRoot.querySelector("#progress2").addEventListener("max-changed",(e=>{this.max=e.detail.value})),this.shadowRoot.querySelector("#progress2").addEventListener("promise-progress-finished",(e=>{if(e.detail.value){this.shadowRoot.querySelector(".game")&&this.shadowRoot.querySelector(".game").remove();const e=i.AppHaxAPI.lastResponse.createSite.data,t=globalThis.document.createElement("button");this.shadowRoot.querySelector("#value").textContent=this.max,t.textContent="Let's go!",t.classList.add("game"),t.addEventListener("pointerdown",(()=>{i.appEl.playSound("click")})),t.addEventListener("click",(()=>{i.appEl.reset(),setTimeout((()=>{globalThis.location=e.slug.replace("index.html","")}),0)})),this.shadowRoot.querySelector("#progress2").parentNode.appendChild(t),i.toast(`${e.title?e.title:""} ready!`,1500,{hat:"random"}),i.setPageTitle(`${e.title?e.title:""} ready!`),setTimeout((()=>{i.toast("redirecting in 3..",1e4,{hat:"random",walking:!0}),i.setPageTitle("Redirecting in 3.."),setTimeout((()=>{i.toast("redirecting in 2..",1e4,{hat:"random",walking:!0}),i.setPageTitle("Redirecting in 2.."),setTimeout((()=>{i.toast("redirecting in 1..",1e4,{hat:"random",walking:!0}),i.setPageTitle("Redirecting in 1.."),i.appEl.reset(),setTimeout((()=>{i.setPageTitle("Enjoy!"),globalThis.location=e.slug.replace("index.html","")}),1e3)}),1e3)}),1e3)}),1800),this.dispatchEvent(new CustomEvent("promise-progress-finished",{composed:!0,bubbles:!0,cancelable:!0,detail:!0}))}}))}),0)}static get styles(){return[super.styles,t`
        :host {
          display: block;
          height: 400px;
          width: 400px;
        }
        img {
          width: 400px;
          height: 400px;
          pointer-events: none;
        }
        .progress {
          margin: -148px 0 0 10px;
          z-index: -1;
        }
        .progress::part(progress) {
          height: 100px;
          width: 338px;
          margin-top: -1px 0 0 -4px;
        }

        .progress::part(progress)::-moz-progress-bar {
          background-color: red;
          height: 50px;
          margin: 24px 0 0 0;
          border: none;
        }

        .count {
          color: var(--simple-colors-default-theme-grey-1, white);
          font-family: "Press Start 2P", sans-serif;
          width: 350px;
          text-align: center;
          position: relative;
          display: block;
          font-size: 30px;
          margin-top: -250px;
          margin-left: 30px;
        }
        .game {
          font-family: "Press Start 2P", sans-serif;
          font-size: 28px;
          font-weight: bold;
          text-align: center;
          width: 310px;
          background-color: var(--simple-colors-default-theme-red-7, red);
          color: var(--simple-colors-default-theme-grey-1, white);
          border: 0px;
          height: 54px;
          display: block;
          position: relative;
          margin: 138px 0px 0px 52px;
          padding: 0;
          box-sizing: border-box;
        }
        .game:focus,
        .game:hover {
          cursor: pointer;
          background-color: var(--simple-colors-default-theme-red-8);
          color: var(--simple-colors-default-theme-grey-2);
        }
        .game:active {
          cursor: progress;
          background-color: var(--simple-colors-default-theme-red-10);
          color: var(--simple-colors-default-theme-grey-5);
        }
      `]}render(){return e`
      <img
        src="${new URL("../assets/images/HatBlank.svg",import.meta.url).href}"
        alt=""
      />
      <promise-progress
        id="progress2"
        accent-color="red"
        ?dark="${this.dark}"
        class="progress"
        .list=${this.promises}
      ></promise-progress>
      <div class="count"><span id="value">0</span>%</div>
    `}}customElements.define(AppHaxHatProgress.tag,AppHaxHatProgress);