/**
 * HTML for showing infos about the current query or result. Also gives
 * the user the abiltiy to access the meta data for the current query or
 * result.
 */
const template = document.createElement('template');
template.innerHTML = `

  <link rel="stylesheet" href="../../static/fonts/Material_design_icons/material-icons.css">
  <link rel="stylesheet" href="../../static/css/Materialize/materialize.min.css">
  <link rel="stylesheet" href="../../static/css/nopaque.css">

  <div class="col">
    <h6 style="margin-top: 0px;">Infos</h6>
    <div class="divider" style="margin-bottom: 10px;"></div>
    <div class="row">
      <div class="col s12">
        <button id="show-metadata"
                class="waves-effect
                       waves-light
                       btn-flat
                       flat-interaction"
                type="submit">Corpus Metadata
          <i class="material-icons left">info_outline</i>
        </button>
      </div>
      <div class="col s12">
        <p>
          <slot name="received-match-count">
            0
          </slot> of
          <slot name="match-count">(to be determined)</slot>
          matches loaded.
          <br>
          Matches occured in
          <slot name="text-lookup-count">(to be determined)</slot>
          corpus files:
          <br>
          <slot name=text-titles>(to be determined)</slot>
        </p>
        <p id="query-results-user-feedback">
          <i class="material-icons">help</i>
          The Server is still sending your results.
          Functions like "Export Results" and "Match Inspect" will be
          available after all matches have been loaded.
        </p>
        <div class="progress" id="query-progress-bar">
          <div class="determinate"></div>
        </div>
      </div>
    </div>
  </div>
`;

class InfoMenu extends HTMLElement {
  constructor() {
    super();

    this.appendChild(template.content.cloneNode(true));
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));

  }

  // methods that will be used in connectedCallback on eventListeners
  showMetadata() {
    console.log('Show metadata somehow');
  }

  connectedCallback() {
    const showMetadataBtn = this.querySelector('#show-metadata');
    showMetadataBtn.addEventListener('click', () => this.showMetadata());
  }

  disconnectedCallback() {
    const showMetadataBtn = this.querySelector('#show-metadata');
    showMetadataBtn.removeEventListener();
  }
}

window.customElements.define('info-menu', InfoMenu);

export { InfoMenu };