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.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.ADD_LINE, Store.actions.REMOVE_LINE, Store.actions.UNDO, 'INIT'].includes(action)) {
      return; // Only render if content changed
    }

    this.shadowRoot.innerHTML = `
    <style>
      * {
        margin: 0;
      }
      #window {
        width: 800px;
        height: 477px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 5px 12px #0000001F;
        border-radius: 20px;
        opacity: 1;
        padding: 50px;
        display: flex;
        flex-direction: column;
        row-gap: 35px;
      }
      #title {
        height: 49px;;
        margin-bottom: -12px;
        text-align: center;
        font-size: 40px;
        font-family: "Montserrat", sans-serif;
        font-weight: normal;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
      }
      #description {
        text-align: center;
        height: 74px;
        text-align: center;
        font-size: 18px;
        font-family: "Montserrat", sans-serif;
        font-weight: normal;
        letter-spacing: 0px;
        color: #333333;
        opacity: 1;
      }
      #list {
        padding: 13px;
      }
      #list > option {
        height: 40px;
        align-content: center;
        padding-left: 15px;
        font-size: 18px;
        font-family: "Montserrat", sans-serif;
        font-weight: normal;
      }
      #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 > custom-button:last-child {
        margin-left: auto;
      }
      #undo-char {
        margin-top: 3px;
      }
    </style>
    <div id="window">
      <h1 id="title">${this.text.title}</h1>
      <p id="description">${this.text.description}</p>
      <select id="list" multiple is="item-list">
        ${this.renderOptions()}
      </select>
      <span id="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 action="${Store.actions.ADD_LINE}" width="138px" color="${this.properties.color}">Add</custom-button>
      </span>
    </div>
    `;
  }
}

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