import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';
import { Spell } from './Spell';

@customElement('spell-scryer')
export class Scryer extends LitElement {
  isSpellPaneOpen: boolean = false;
  currentSpell: Spell | null = null;
  spellCount: number = 0;

  getCurrentSpell() {
    if (this.currentSpell) {
      const spell = { ...this.currentSpell };
      this.currentSpell = null;
      return spell;
    }

    return null;
  }

  setCurrentSpell(spell: Spell) {
    this.currentSpell = spell;
    this.spellCount = 1;
    if (this.isSpellPaneOpen) {
      this.toggleSpellPane();
    }
  }

  dismissAddModal() {
    this.currentSpell = null;
    this.spellCount = 0;
    this.requestUpdate();
  }

  setSpellCount() {
    this.spellCount = 1;
  }

  toggleSpellPane() {
    this.isSpellPaneOpen = !this.isSpellPaneOpen;
    this.requestUpdate();
  }

  static get styles() {
    let globalStyle = '';
    for (let styleSheetI = 0; styleSheetI < document.styleSheets.length; styleSheetI++) {
      const { cssRules } = document.styleSheets[styleSheetI];
      globalStyle = `${globalStyle}\n${Object.values(cssRules).map(rule => rule.cssText).join('\n')}`;
    }

    const stringArray = [globalStyle] as any;
    stringArray.raw = [globalStyle];

    return [
      css(stringArray as TemplateStringsArray),
      css`
        @media (min-width: 501px) {
          .the_board >* {
            width: 15em;
          }
        }

        .spell_scryer {
          width: 100%;
        }

        a, a:hover, a:visited {
          color: black;
          text-decoration: none;
        }

        a:hover {
          text-decoration: underline;
        }

        .spell_list {
          position: fixed;
          z-index: 9999;
          background-color: white;
        }

        .the_board {
          display: flex;
          justify-content: center;
          flex-direction: row;
          text-align: center;
        }

        .the_board >* {
          padding: .25em;
        }
      `
    ];
  }

  override render() {
    return html`
    <div class="spell_scryer">
      <div class="container spell_list" style="display: ${this.isSpellPaneOpen ? 'block' : 'none'}">
        <a href="#" @click="${this.toggleSpellPane}">Close <i class="bi bi-x-circle-fill"></i></a>
        <spell-list .selectSpell="${(spell: Spell) => this.setCurrentSpell(spell)}"></spell-list>
      </div>
      <a href="#" @click="${this.toggleSpellPane}">Spells <i class="bi bi-magic"></i></a>
      <div class="the_board">
        <dd-place .getCurrentSpell="${() => this.getCurrentSpell()}" location="Player 1 Reserves"></dd-place>
        <dd-place .getCurrentSpell="${() => this.getCurrentSpell()}" location="Player 1 Home"></dd-place>
        <dd-place .getCurrentSpell="${() => this.getCurrentSpell()}" location="Frontier"></dd-place>
        <dd-place .getCurrentSpell="${() => this.getCurrentSpell()}" location="Player 2 Home"></dd-place>
        <dd-place .getCurrentSpell="${() => this.getCurrentSpell()}" location="Player 2 Reserves"></dd-place>
      </div>
    </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'spell-scryer': Scryer;
  }
}