import { Component, Prop, h } from '@stencil/core';
import { ButtonTypes } from './types';

@Component({
  tag: 'scu-button',
  styleUrl: 'scss/scu-button.scss',
  shadow: true
})

export class SCUButton {

  @Prop({ reflect: true }) label: string = "!No Label Sent!";

  @Prop({ reflect: true }) disabled: boolean = false;

  @Prop({ reflect: true }) type: ButtonTypes = ButtonTypes.primary;
  @Prop({ reflect: true }) outline: boolean = false;
  @Prop({ reflect: true }) grey: boolean = false;
  @Prop({ reflect: true }) link: boolean = false;
  @Prop({ reflect: true }) icon_only: boolean = false;

  @Prop({ reflect: true }) icon: string;

  render() {

    let finalType = this.type;
    let colorVar = '--comp-scu-icon-button-primary-default-label-color';
    if (this.disabled) {
      colorVar = '--comp-scu-icon-button-primary-disabled-label-color';
    }
    if (this.outline) {
      finalType = ButtonTypes.outline;
      colorVar = '--comp-scu-icon-button-outline-default-label-color';
      if (this.disabled) {
        colorVar = '--comp-scu-icon-button-outline-disabled-label-color';
      }
    }
    if (this.grey) {
      finalType = ButtonTypes.grey;
    }
    if (this.link) {
      finalType = ButtonTypes.link;
    }

    return (
      <div tabindex="0"
        class={`
          comp-scu-button 
          ${ this.disabled ? 'disabled' : ''}
          ${ finalType }
          ${ this.icon ? 'icon' : '' }
          ${ this.icon_only ? 'icon_only' : '' }
        `}
        onMouseDown={e => e.preventDefault()}>
        { this.icon ? (
          <scu-icon 
            icon={this.icon}
            color-var={colorVar}
            class="icon"></scu-icon>
        ) : '' } 
        <div class="label">
          {this.label}
        </div>
      </div>
    );
  } 
}