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

class ItemList extends HTMLSelectElement {
  constructor() {
    super();
    this.publish = Store.publish
  }
  
  connectedCallback() {
    this.addEventListener('click', this.onChange.bind(this));
    this.updateStyle();
  }

  onChange() {
    const selectedIds = Array.from(this.selectedOptions).map((option) => +option.value);
    this.publish(Store.actions.SELECT, selectedIds);
  }

  disconnectedCallback() {
    this.removeEventListener('click', this.onChange.bind(this));
  }

  updateStyle() {
      this.style.width = '100%';
      this.style.height = '227px';
      this.style.background = '#F7F7F7 0% 0% no-repeat padding-box';
      this.style.border = '1px solid #CCCCCC';
      this.style.opacity = '1';
      this.style.fontSize = '18px';
      this.style.fontFamily = '"Montserrat" sans-serif';
      this.style.fontWeight = 'normal';
      this.style.letterSpacing = '0px';
  }
}

customElements.define('item-list', ItemList, { extends: 'select' });