import './components/main-window.js';
import './components/custom-button.js';
import './components/item-list.js';
import './components/custom-modal.js';
import './components/custom-text.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();
  }

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

  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;
        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;
      }
      #list > option {
        height: 40px;
        align-content: center;
        padding-left: 15px;
        font-size: 18px;
      }
      #list > option:checked {
        background: ${this.properties.color} linear-gradient(0deg, ${this.properties.color} 0%, ${this.properties.color} 100%);
        box-shadow: 0 0 10px 100px ${this.properties.color} inset;
        color: #fff;
        outline: none;
      }
      .button-bar {
        display: flex;
        column-gap: 35px
      }
      .button-bar > .right-button {
        margin-left: auto;
      }
      #undo-char {
        margin-top: 3px;
      }
    </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" height="227px">
        ${this.renderOptions()}
      </select>
      <span class="button-bar">
        <custom-button action="${Store.actions.UNDO}" outline width="81px" color="${this.properties.color}">
          <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="undo-char" width="21" height="19" viewBox="0 0 5.556 5.027">
            <path d="M.681 2.22a2.38 2.38 0 0 1 4.742.294v0a2.38 2.38 0 0 1-4.526 1.03" style="fill:none;stroke:${this.properties.color};stroke-width:.264583;stroke-linecap:round;stroke-dasharray:none"/>
            <path d="m.132 1.525.437.964.964-.437" style="fill:none;stroke:${this.properties.color};stroke-width:.264583;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"/>
          </svg>

        </custom-button>
        <custom-button action="${Store.actions.REMOVE_LINE}" outline width="124px" color="${this.properties.color}">Delete</custom-button>
        <custom-button class="right-button" action="${Store.actions.OPEN_MODAL}" width="138px" color="${this.properties.color}">Add</custom-button>
      </span>
    </main-window>
    <custom-modal active="${this.store.state.modalActive}">
      <p>${text.modal.description}</p>
      <input is="custom-text"/>
      <span class="button-bar">
        <custom-button class="right-button" action="${Store.actions.ADD_LINE}" width="138px" color="${this.properties.color}">Add</custom-button>
        <custom-button action="${Store.actions.CLOSE_MODAL}" outline width="124px" color="${this.properties.color}">Cancel</custom-button>
      </span>
    </custom-modal>
    `;
  }
}

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