/**
 * EdGEL button component.
 *
 * Style a `<button>` tag or an <a> tag as an EdGEL button.
 */

import { css, html } from 'lit'
import { ifDefined } from 'lit/directives/if-defined.js'
import { EdGELElement } from '../base.js'

import '../../edgel-icon.js'

export class EdGELButton extends EdGELElement {
  static properties = {
    /** The href attribute for the link */
    url: { type: String },
    /** The name of the icon to use on the button */
    icon: { type: String },
    /** Whether the icon position should be "before" or "after" the slot.  Default "before" */
    iconPosition: { type: String, attribute: 'icon-position' },
    /**
     * The bootstrap size label to use (lg or sm).
     * Leave out for the medium size.
     */
    size: { type: String },
    /** Whether the outline style should be applied to the button */
    outline: { type: Boolean },
    /**
     * The name of the palette colour to use for the button.  Defaults
     * to 'dark'.
     */
    colour: { type: String },
    /** Use if you need to replicate the active state programmatically */
    btnActive: { type: Boolean, attribute: 'button-active' },
    /** Theme the button as disabled */
    btnDisabled: { type: Boolean, attribute: 'button-disabled' },
    /**
     * When using button classes on <a> elements that are used to trigger
     * in-page functionality (like collapsing content), rather than linking
     * to new pages or sections within the current page, these links should
     * be given a role="button" to appropriately convey their purpose to
     * assistive technologies such as screen readers.
     */
    btnRole: { type: Boolean, attribute: 'button-role' },
    /** If rendering a button, the type attribute.  Ignored for links. */
    btnType: { type: String, attribute: 'button-type' }
  }

  static styles = [
    css`:host { display: inline-block; }`
  ]

  constructor() {
    super()

    this.colour = 'dark'
    this.iconPosition = 'before'
  }

  render() {
    let disabledValue
    let pressedValue
    let btnClass = 'btn w-100'

    btnClass = this.outline ?
      `${btnClass} btn-outline-${this.colour}` :
      `${btnClass} btn-${this.colour}`

    if (this.size && (this.size === 'lg' || this.size === 'sm')) {
      btnClass = `${btnClass} btn-${this.size}`
    }

    if (this.btnActive) {
      this.role = 'button'
      btnClass = `${btnClass} active`
      pressedValue = 'true'
    }

    if (this.btnDisabled) {
      btnClass = `${btnClass} disabled`
      disabledValue = 'true'
    }

    const iconHtml = this.icon ?
      html`<edgel-icon name="${this.icon}"></edgel-icon>` :
      html``

    const props = {
      url: this.url,
      prefix: this.iconPosition === 'after' ? html`` : iconHtml,
      suffix: this.iconPosition === 'after' ? iconHtml : html``,
      classes: btnClass,
      role: this.btnRole,
      type: this.btnType,
      disabled: disabledValue,
      pressed: pressedValue
    }

    return this.url ? this._linkRender(props) : this._buttonRender(props)
  }

  _buttonRender({ prefix, suffix, classes, type, disabled, pressed }) {
    return html`
      <button
        class=${classes}
        type=${ifDefined(type || undefined)}
        aria-disabled=${ifDefined(disabled)}
        aria-pressed=${ifDefined(pressed)}
      >
        ${prefix}
        <slot></slot>
        ${suffix}
      </button>
    `
  }

  _linkRender({ url, prefix, suffix, classes, role, disabled, pressed }) {
    return html`
      <a
        href=${url}
        class=${classes}
        role=${ifDefined(role ? 'button' : undefined)}
        aria-disabled=${ifDefined(disabled)}
        aria-pressed=${ifDefined(pressed)}
      >
        ${prefix}
        <slot></slot>
        ${suffix}
      </a>
    `
  }
}
