import Store from '../modules/store.js';
import text from '../modules/text.js';

class AppBase extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.text = text;
    this.store = new Store();
  }
  
  connectedCallback() {
    this.store.subscribe(this.render.bind(this));
    this.render();
  }

  renderText() {
    const textList = this.store.getRecords();
    return textList.map((item) => `<option value=${item.id}>${item.text}</option>`).join('\n');
  }

  render(action = 'INITIAL') {
    if (![Store.actions.ADD_LINE, Store.actions.REMOVE_LINE, Store.actions.UNDO, 'INITIAL'].includes(action)) {
      return; // Only render if content changed
    }

    this.shadowRoot.innerHTML = `
    <main-window title="${this.text.title}" description="${this.text.description}">
      <select multiple is="item-list">
        ${this.renderText()}
      </select>
      <span id="button-bar">
        <custom-button action="${Store.actions.REMOVE_LINE}" color="#324bff">Delete</custom-button>
        <custom-button action="${Store.actions.ADD_LINE}" color="#324bff">Add</custom-button>
        <custom-button action="${Store.actions.UNDO}" outline color="#324bff">Undo</custom-button>
      </span>
    </main-window>
    `;
  }
}

customElements.define('app-base', AppBase);