import{html as t,css as e}from"../../../lit/index.js";import{SimpleColors as s}from"../../simple-colors/simple-colors.js";import"../../simple-icon/lib/simple-icons.js";import"../../simple-icon/lib/simple-icon-lite.js";import"../flash-card.js";export class FlashCardSet extends s{static get tag(){return"flash-card-set"}constructor(){super(),this.questions=[],this.currentQuestion=0,this.cardLength=4}static get properties(){return{questions:{type:Array}}}updated(t){super.firstUpdated&&super.firstUpdated(t),this.renderTags(),this.shadowRoot.querySelector(".arrow-left").addEventListener("click",(()=>{this.currentQuestion>0&&(this.currentQuestion-=1,this.changeVisible())})),this.shadowRoot.querySelector(".arrow-right").addEventListener("click",(()=>{this.currentQuestion<this.questions.length/4-1&&(this.currentQuestion+=1,this.changeVisible())}))}getData(){const t=this.shadowRoot.querySelector("slot").assignedNodes({flatten:!0})[1].childNodes,e=["","","",""];for(let s=0;s<t.length;s++)if(s%2==1){for(let i=0;i<t[s].childNodes.length;i++)if(i%2==1){const{slot:r}=t[s].childNodes[i];"front"===r&&(e[0]=t[s].childNodes[i].innerHTML),"back"===r&&(e[1]=t[s].childNodes[i].innerHTML),"image"===r&&(e[2]=t[s].childNodes[i].innerHTML),"attributes"===r&&(e[3]=t[s].childNodes[i].innerHTML)}for(let t=0;t<e.length;t++)this.questions.push(e[t]);for(let t=0;t<4;t++)e[t]=""}}renderTags(){this.getData();for(let t=0;t<this.questions.length;t+=this.cardLength)this.formatEl(t/this.cardLength,this.questions[t],this.questions[t+1],this.questions[t+2],this.questions[t+3])}formatEl(t){const e=globalThis.document.createElement("flash-card");e.setAttribute("id",`card${t}`),0!==t&&(e.className="hidden"),e.innerHTML=`\n      <p slot="front">${arguments[1]}</p>\n      <p slot="back">${arguments[2]}</p>`,e.setAttribute("img-source",arguments[3]),arguments[4].includes("dark")&&e.setAttribute("dark",""),this.shadowRoot.querySelector("#content").appendChild(e)}changeVisible(){for(let t=0;t<this.questions.length;t+=this.cardLength){const e=this.shadowRoot.querySelector("#card"+t/this.cardLength);t/this.cardLength===this.currentQuestion?e.className="visible":e.className="hidden"}}static get styles(){return e`
      :host {
        display: block;
      }
      .arrow-right {
        transform: scale(2) translateY(100px) translateX(10px);
      }
      .arrow-left {
        transform: scale(2) translateY(100px) translateX(-10px);
      }
      .visible {
        transform: scale(1);
        display: block;
        transition: all 1s ease-in-out;
        top: 0;
        left: 0;
      }
      .hidden {
        transform: scale(0);
        display: none;
        transition: all 1s ease-in-out;
        top: 0;
        left: 0;
      }
      #content {
        position: relative;
      }
    `}render(){return t`
      <div id="container">
        <div style="display: inline-flex">
          <simple-icon-lite
            tabindex="0"
            icon="arrow-back"
            class="arrow-left"
            onclick="${this.changeVisible()}"
          ></simple-icon-lite>
          <div id="content"></div>
          <simple-icon-lite
            tabindex="0"
            icon="arrow-forward"
            class="arrow-right"
          ></simple-icon-lite>
        </div>
        <slot style="display: none"></slot>
      </div>
    `}static get haxProperties(){return new URL("../lib/flash-card.haxProperties.json",import.meta.url).href}}customElements.define(FlashCardSet.tag,FlashCardSet);