import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { IconType } from '@msfa-enums/icon-type.enum';

@Component({
  selector: 'msfa-hide-text',
  templateUrl: './hide-text.component.html',
  styleUrls: ['./hide-text.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HideTextComponent {
  @Input() changingText: string;
  @Input() symbols: string;
  @Input() ariaLabelType = 'text';

  hideText = true;
  iconType = IconType;

  get transformedText(): string {
    return this.hideText ? this.symbols : this.changingText;
  }

  toggleText(): void {
    this.hideText = !this.hideText;
  }

  get ariaLabel(): string {
    const buttonText = this.hideText ? 'Visa' : 'Dölj';
    return `${buttonText} ${this.ariaLabelType}`;
  }
}
