import{html as t,css as e}from"../../lit/index.js";import{SimpleColors as r}from"../simple-colors/simple-colors.js";import"./lib/flash-card-answer-box.js";import"./lib/flash-card-prompt-img.js";export class FlashCard extends r{static get tag(){return"flash-card"}constructor(){super(),this.imgKeyword="",this.imgSource=""}static get properties(){return{...super.properties,inverted:{type:Boolean},imgSource:{type:String,attribute:"img-source",reflect:!0},imgKeyword:{type:String,attribute:"img-keyword"},status:{type:String,reflect:!0}}}static get styles(){return[super.styles,e`
        :host {
          display: block;
          box-sizing: content-box !important;
          border: 1px solid var(--simple-colors-default-theme-accent-6);
          min-width: 320px;
          min-height: 155px;
          border-radius: 20px;
          padding: 20px;
          width: 5em;
          background-color: var(--simple-colors-default-theme-accent-2);
          box-shadow: 0 0 5px var(--simple-colors-default-theme-accent-7);
          margin: 10px;
        }
        p {
          color: var(--simple-colors-default-theme-accent-10);
        }
      `]}statusChanged(t){this.status=t.detail,"correct"===this.status&&import("../multiple-choice/lib/confetti-container.js").then((t=>{setTimeout((()=>{this.shadowRoot.querySelector("#confetti").setAttribute("popped","")}),0)}))}render(){return t`
      <confetti-container id="confetti">
        ${this.imgSource||this.imgKeyword?t`
              <flash-card-image-prompt
                img-src="${this.imgSource}"
                img-keyword="${this.imgKeyword}"
                status="${this.status}"
              ></flash-card-image-prompt>
            `:""}
        <flash-card-answer-box
          @flash-card-status-change="${this.statusChanged}"
        >
          <div slot="front">
            <slot slot="front" name="front"></slot>
          </div>
          <div slot="back">
            <slot slot="back" name="back"></slot>
          </div>
        </flash-card-answer-box>
      </confetti-container>
    `}static get haxProperties(){return new URL(`./lib/${this.tag}.haxProperties.json`,import.meta.url).href}}customElements.define(FlashCard.tag,FlashCard);