const CSS_CLASSES = {
  btn: ['itf-button', 'btn'],
  basic: ['btn-basic'],
  primary: ['btn-primary'],
  secondary: ['btn-secondary'],
  large: ['btn-lg'],
  small: ['btn-sm'],
  block: ['itf-button__block'],
  labeled: ['labeled'],
  squircle: ['btn-squircle'],
  icon: ['btn-icon'],
  loading: ['loading'],
  spinner: ['itf-spinner'],
  loadingWhite: ['itf-spinner__white'],
};

export
class Button extends HTMLElement {

  static get observedAttributes() {
    return ['disabled', 'open'];
  }

  get isLoading() {
    return this.hasAttribute('loading');
  }

  get styleClasses() {
    let styles = [];
    if (this.hasAttribute('color')) {
      styles.push(`btn-${this.getAttribute('color')}`);
    }
    if (this.hasAttribute('block')) {
      styles.push(CSS_CLASSES.block);
    }
    if (this.hasAttribute('labeled')) {
      styles.push(CSS_CLASSES.labeled);
    }
    if (this.hasAttribute('squircle')) {
      styles.push(CSS_CLASSES.squircle);
    }
    if (this.hasAttribute('icon')) {
      styles.push(CSS_CLASSES.icon);
    }
    if (this.isLoading) {
      styles.push(CSS_CLASSES.loading);
    }

    if (this.hasAttribute('small')) {
      styles = styles.concat(CSS_CLASSES.small);
    } else if (this.hasAttribute('large')) {
      styles = styles.concat(CSS_CLASSES.large);
    }

    if (this.hasAttribute('primary')) {
      styles = styles.concat(CSS_CLASSES.primary);
    } else if (this.hasAttribute('secondary')) {
      styles = styles.concat(CSS_CLASSES.secondary);
    } else if (!this.hasAttribute('color')) {
      styles = styles.concat(CSS_CLASSES.basic);
    }
    return styles;
  }

  get open() {
    return this.hasAttribute('open');
  }

  get disabled() {
    return this.hasAttribute('disabled');
  }

  set disabled(val) {
    if (val) {
      this.setAttribute('tabindex', '-1');
      this.setAttribute('disabled', '');
      this.setAttribute('aria-disabled', 'true');
    } else {
      this.setAttribute('tabindex', '0');
      this.setAttribute('aria-disabled', 'false');
      this.removeAttribute('disabled');
    }
  }

  constructor() {
    super();
  }

  connectedCallback() {
    const button = document.createElement('button');

    const loadingText = this.getAttribute('loading-text');
    const html = this.innerHTML;
    this.replaceWith(button);
    button.innerHTML = html;
    button.classList.add(...CSS_CLASSES.btn);
    button.classList.add(...this.styleClasses);

    if (this.isLoading) {
      button.setAttribute('disabled', 'disabled');
      const loadingDiv = document.createElement('div');
      const spinnerDiv = document.createElement('div');
      spinnerDiv.classList.add(...CSS_CLASSES.spinner);
      if (this.hasAttribute('primary') || this.hasAttribute('white')) {
        spinnerDiv.classList.add(CSS_CLASSES.loadingWhite);
      }
      loadingDiv.appendChild(spinnerDiv);
      // if (this.isLoading && loadingText) {
      //   const loadingTextDiv = document.createElement('div');
      //   loadingTextDiv.innerHTML = loadingText;
      //   loadingDiv.appendChild(loadingTextDiv);
      // }
      button.appendChild(loadingDiv);
    }
  }
}
