import './components/main-window.js';
import './components/custom-button.js';
import './components/item-list.js';
import './components/custom-item.js';
import './components/custom-modal.js';
import './components/custom-text.js';
import './components/back-icon.js';

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

class AppBase extends HTMLElement {
  constructor() {
    super();
    this.text = text;
    this.properties = {
      color: '#324BFF',
    };
    this.store = new Store();
  }
  
  connectedCallback() {
    this.store.subscribe(this.render.bind(this));
    this.render();
  }

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

    this.innerHTML = `
    <style>
      * {
        margin: 0;
      }
      html {
        height: 100%;
      }
      body {
        background: transparent linear-gradient(135deg, #A1C4FD 0%, #C2E9FB 100%) 0% 0% no-repeat padding-box;
        opacity: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100%;
        font-family: "Montserrat", sans-serif;
        font-weight: normal;
        font-size: 18px;
        letter-spacing: 0px;
      }
      #title {
        height: 49px;
        margin-bottom: -12px;
        text-align: center;
        font-size: 40px;
        font-weight: inherit;
        color: #333333;
        opacity: 1;

      }
      #description {
        height: 74px;
        text-align: center;
        font-size: 18px;
        color: #333333;
        opacity: 1;
      }
      .button-bar {
        display: flex;
        column-gap: 35px
      }
      .button-bar > .right-button {
        margin-left: auto;
      }
    </style>
    <main-window width="900px" gap="35px">
      <h1 id="title">${this.text.title}</h1>
      <p id="description">${this.text.description}</p>
      <select id="list" multiple is="item-list" action="${Store.actions.SELECT}" height="227px">
        ${this.store.getRecords().map((item) => `<option is="custom-item" color="${this.properties.color}" value=${item.id}>${item.text}</option>`)}
      </select>
      <span class="button-bar">
        <button is="custom-button" action="${Store.actions.UNDO}" outline width="81px" color="${this.properties.color}"><back-icon color="${this.properties.color}"></back-icon></button>
        <button is="custom-button" action="${Store.actions.REMOVE_LINE}" outline width="124px" color="${this.properties.color}">Delete</button>
        <button is="custom-button" class="right-button" action="${Store.actions.OPEN_MODAL}" width="138px" color="${this.properties.color}">Add</button>
      </span>
    </main-window>
    <custom-modal active="${this.store.state.modalActive}">
      <p>${text.modal.description}</p>
      <input is="custom-text" placeholder="${this.text.modal.placeholder}"/>
      <span class="button-bar">
        <button is="custom-button" class="right-button" action="${Store.actions.ADD_LINE}" width="138px" color="${this.properties.color}">Add</button>
        <button is="custom-button" action="${Store.actions.CLOSE_MODAL}" outline width="124px" color="${this.properties.color}">Cancel</button>
      </span>
    </custom-modal>
    `;
  }
}

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