import {LitElement, html, css, nothing} from 'lit';
// @ts-ignore: TS2307
// import style from './spw-lit-button.css';
import {customElement, property} from 'lit/decorators.js';

@customElement('spw-lit-button')
export class SpwLitButton extends LitElement {
  static styles = css`
    :host {
      box-sizing: border-box;
      line-height: 1.3;
      -webkit-text-size-adjust: 100%;
      font-size: 100%;

      *,
      *::before,
      *::after {
        box-sizing: inherit;
        font-family: 'Nunito Sans';
      }
      display: inline-block;
      --spw-button-font-size-small: 14px;
      --spw-button-font-size-medium: 16px;
      --spw-button-font-size-large: 18px;
      --spw-button-px-small: 16px;
      --spw-button-px-medium: 20px;
      --spw-button-px-large: 24px;
      --spw-button-py-small: 8px;
      --spw-button-py-medium: 8px;
      --spw-button-py-large: 12px;
    }

    :host([isfullwidth='true']) {
      display: block;
    }

    /* Base */

    .spw-button {
      display: inline-block;
      vertical-align: top;
      border: none;
      border-radius: 27px;
      letter-spacing: 0.18px;
      cursor: pointer;
      font-weight: bold;
      outline: 3px solid transparent;
      overflow: hidden;
      transition: all 0.2s ease-in-out;
      text-decoration: none;
    }

    .spw-button__inner {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
    }

    /* Variants */

    .spw-button--primary {
      background: var(--spw-ds-primary);
      color: var(--spw-ds-white);
    }
    .spw-button--primary:not([disabled]):hover {
      background: var(--spw-ds-variant);
    }
    .spw-button--primary:not([disabled]):active {
      background: var(--spw-ds-active);
    }

    /* Sizes */

    .spw-button--large {
      font-size: var(--spw-button-font-size-large);
      padding: var(--spw-button-py-large) var(--spw-button-px-large);
    }

    .spw-button--medium {
      font-size: var(--spw-button-font-size-medium);
      padding: var(--spw-button-py-medium) var(--spw-button-px-medium);
    }

    /* Icon */

    .spw-icon--left {
      margin-right: 8px;
    }
    .spw-icon--right {
      margin-left: 8px;
    }
  `;

  @property({type: String}) href?: string;
  @property({type: String}) target: string = '_self';
  @property({type: String}) rel?: string;
  @property({type: String}) download?: string;
  @property({type: String}) name: string = '';
  @property({type: [String, Number]}) value: string | number = '';
  @property({type: String}) type: 'button' | 'submit' | 'reset' = 'button';
  @property({type: String}) variant:
    | 'primary'
    | 'secondary'
    | 'tertiary'
    | 'outlined' = 'primary';
  @property({type: String}) surface: 'default' | 'dark' | 'light' = 'default';
  @property({type: Boolean}) disabled: boolean = false;
  @property({type: String}) size: 'large' | 'medium' | 'small' = 'medium';
  @property({type: String}) accAriaLabel?: string;
  @property({type: String}) icon?: string;
  @property({type: String}) iconPosition: 'left' | 'right' = 'right';
  @property({type: Boolean}) isFullWidth: boolean = false;

  private onFocus() {
    this.dispatchEvent(new CustomEvent('spwFocus'));
  }

  private onBlur() {
    this.dispatchEvent(new CustomEvent('spwBlur'));
  }

  private onClick(ev: MouseEvent) {
    if (this.disabled) {
      ev.preventDefault();
      return;
    }

    if (this.type === 'reset') {
      ev.preventDefault();
      this.resetFormInputs();
      return;
    }

    if (this.type === 'submit' && !this.disabled) {
      const form = this.closest('form');
      if (form) {
        ev.preventDefault();
        form.requestSubmit();
        return;
      }
    }

    if (this.href !== undefined) {
      this.dispatchEvent(new CustomEvent('spwNavigate', {detail: ev}));
    }
  }

  private resetFormInputs() {
    const form = this.closest('form');
    if (!form) return;

    const spwInputs = form.querySelectorAll('spw-input');
    spwInputs.forEach((spwInput) => {
      const input = spwInput.shadowRoot?.querySelector('input');
      if (input) {
        (input as HTMLInputElement).value = '';
      }
    });
  }

  private get elementClass() {
    return {
      'spw-button': true,
      [`spw-button--${this.variant}`]: true,
      [`spw-button--surface-${this.surface}`]: true,
      [`spw-button--${this.size}`]: true,
      [`spw-button--fullwidth`]: this.isFullWidth,
    };
  }

  private computeClass(): string {
    return Object.entries(this.elementClass)
      .filter(([_, value]) => value)
      .map(([key, _]) => key)
      .join(' ');
  }

  render() {
    const isAnchor = !!this.href;
    const iconPosition =
      this.icon && !this.iconPosition ? 'right' : this.iconPosition;
    const iconClass = `spw-icon--${iconPosition}`;

    const content = html`
      <div class="spw-button__inner">
        ${this.icon && this.iconPosition === 'left'
          ? html`<spw-lit-icon
              class=${iconClass}
              icon=${this.icon}
            ></spw-lit-icon>`
          : nothing}
        <slot></slot>
        ${this.icon && this.iconPosition === 'right'
          ? html`<spw-lit-icon
              class=${iconClass}
              icon=${this.icon}
            ></spw-lit-icon>`
          : nothing}
      </div>
    `;

    return isAnchor
      ? html`
          <a
            class=${this.computeClass()}
            @focus=${this.onFocus}
            @blur=${this.onBlur}
            @click=${this.onClick}
            aria-label=${this.accAriaLabel || ''}
            aria-disabled=${this.disabled ? 'true' : 'false'}
            href=${this.href}
            target=${this.target}
            rel=${this.rel || nothing}
            download=${this.download || nothing}
          >
            ${content}
          </a>
        `
      : html`
          <button
            class=${this.computeClass()}
            ?disabled=${this.disabled}
            @focus=${this.onFocus}
            @blur=${this.onBlur}
            @click=${this.onClick}
            aria-label=${this.accAriaLabel || ''}
            aria-disabled=${this.disabled ? 'true' : 'false'}
            type=${this.type}
            name=${this.name}
            value=${this.value}
          >
            ${content}
          </button>
        `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'spw-lit-button': SpwLitButton;
  }
}