import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { UiIconType } from '@ui/icon/icon-type.enum';
import { UiIconSize } from '@ui/icon/icon-size.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 = UiIconType;
  IconSize = UiIconSize;

  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}`;
  }
}
