import {Component, forwardRef, Input, OnInit} from '@angular/core';
import {ViewerAccordionAbstract} from '../viewer-data/domains/viewer-accordion.abstract';

@Component({
  selector: 'app-viewer-secret',
  template: `
    <div class="row">
      <div class="col-12 ">
        <div class="form-group">
          <label for="exampleInputPassword1">Secret Word</label>
          <input type="password" class="form-control" id="exampleInputPassword1" [(ngModel)]="secret">
        </div>
        <zt-viewer-accordion [data]="data"></zt-viewer-accordion>
        <div class="alert alert-danger" role="alert" *ngIf="showError">
          Your Secret Word '{{secret}}' is incorrect, try with <b>sample</b>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['./viewer-secret.component.scss'],
  viewProviders: [
    {
      provide: ViewerAccordionAbstract,
      useExisting: forwardRef(() => ViewerSecretComponent)
    }
  ]
})
export class ViewerSecretComponent extends ViewerAccordionAbstract implements OnInit {
  @Input() data: any = {};
  @Input() key: any = 'sample';
  secret: string = '';
  showError: boolean = false;
  constructor() {
    super();
  }

  ngOnInit(): void {
  }

  /**
   *  Comparamos el valor proporcionado por el cliente con la clave del component
   */

  validOpen() {
    return this.secret == this.key;
  }

  /**
   * Si el valor no es igual a la clave del component, se ejecutará deferClick que mostrará un
   * mensaje de error .
   */

  deferClick() {
    this.showError = true;
    setTimeout(() => {
      this.showError = false;
    }, 2000);
  }

}