import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'atria-button',
  styleUrl: 'button.scss',
  shadow: true
})
export class AtriaButtonComponent {
  // Props equivalent to Angular @Input()
  @Prop() buttonId: string = "";
  @Prop() buttonText: string = "";
  @Prop() buttonType: string = 'primary';
  @Prop() buttonIconLeft: string = "";
  @Prop() buttonIconRight: string = "";
  @Prop() disabled: boolean = false;
  @Prop() loading: boolean = false;
  @Prop() active: boolean = false;
  @Prop() width: string = "";
  @Prop() buttonRole: string = 'button';

  // Event equivalent to Angular @Output()
  @Event() btnClick!: EventEmitter<any>;

  // Click Handler
  private onClick = () => {
    if (!this.disabled && !this.loading) {
      this.btnClick.emit({
        id: this.buttonId,
        text: this.buttonText,
        type: this.buttonType,
        active: this.active
      });
    }
  };

  render() {
    const classes = [
      'bh-btn',
      this.buttonType,
      this.loading ? 'bh-loading' : '',
      this.disabled ? 'disabled' : '',
      this.active ? 'active' : '',
      !this.buttonText && !this.loading && this.buttonIconLeft ? 'bh-icon-only' : ''
    ]
      .filter(Boolean)
      .join(' ');

    return (
      <button
        id={this.buttonId}
        class={classes}
        style={{ width: this.width }}
        type={this.buttonRole}
        onClick={this.onClick}
        disabled={this.disabled}
      >
        {/* Left Icon */}
        {this.buttonIconLeft && !this.loading && (
          <i class={`left bh-icon bh-icon-md ${this.buttonIconLeft}`} aria-label={this.buttonText}></i>
        )}

        {/* Button Text */}
        {this.buttonText}

        {/* Right Icon */}
        {this.buttonIconRight && !this.loading && (
          <i class={`right bh-icon bh-icon-md ${this.buttonIconRight}`} aria-label={this.buttonText}></i>
        )}
      </button>
    );
  }
}