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

class CustomButton extends HTMLElement {
  static observedAttributes = ['outline', 'color', 'width', 'action'];

  constructor() {
    super();
    this.publish = Store.publish;
    this.attachShadow({ mode: 'open' });
  }
  
  onClick(e) {
    this.publish(this.getAttribute('action'));
  }

  connectedCallback() {
    this.render();
    this.shadowRoot.getElementById('button').addEventListener('click', this.onClick.bind(this));
  }

  disconnectedCallback() {
    this.shadowRoot.getElementById('button').removeEventListener('click', this.onClick);
  }

  attributeChangedCallback() {
    this.render();
  }

  render() {
    const isOutline = this.getAttribute('outline') !== null && this.getAttribute('outline') !== 'false';
    this.shadowRoot.innerHTML = `
    <style>
      button {
        border-radius: 50px;
        border-width: 1px;
        border-style: ${isOutline ? 'solid' : 'hidden'};
        border-color: ${this.getAttribute('color')};
        opacity: 1;
        width: ${this.getAttribute('width')};
        height: 49px;
        background-color: ${isOutline ? 'white' : this.getAttribute('color')};
        color: ${isOutline ? this.getAttribute('color') : 'white'};
        text-align: center;
        font-size: 16px;
        font-family: "Montserrat", sans-serif;
        font-weight: normal
        letter-spacing: 0px;
        text-transform: uppercase;
      }
    </style>
    <button id="button">
      <slot></slot>
    </button>
    `;
  }
}

customElements.define('custom-button', CustomButton);