import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { Params } from '@angular/router';
import { UiLinkButtonType } from './link-button-type.enum';

@Component({
  selector: 'ui-link-button',
  templateUrl: './link-button.component.html',
  styleUrls: ['./link-button.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LinkButtonComponent {
  @Input() uiType: UiLinkButtonType = UiLinkButtonType.PRIMARY;
  @Input() uiSize: 's' | 'm' | 'l' = 'm';
  @Input() uiFullWidth = false;
  @Input() uiRouterLink: string | string[];
  @Input() uiHref: string;
  @Input() uiTarget: '_blank' | '_self' | '_parent' | '_top' | string = '_self';
  @Input() uiQueryParams: Params = null;

  roundedButtonTypes: UiLinkButtonType[] = [
    UiLinkButtonType.ROUNDED_PRIMARY,
    UiLinkButtonType.ROUNDED_PRIMARY_ALT,
    UiLinkButtonType.ROUNDED_SECONDARY,
    UiLinkButtonType.ROUNDED_SECONDARY_ALT,
  ];

  get linkButtonClass(): string {
    const defaultClass = this.isRoundedButtonType ? 'ui-link-rounded-button' : 'ui-link-button';
    let currentClass = `${defaultClass} ${defaultClass}--${this.uiSize} ${defaultClass}--${this.uiType}`;

    if (this.uiFullWidth) {
      currentClass = `${currentClass} ${defaultClass}--full-width`;
    }

    return currentClass;
  }

  get isRoundedButtonType(): boolean {
    return this.roundedButtonTypes.includes(this.uiType);
  }
}