import { Component, EventEmitter, Input, Output, Inject, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { MAT_DATE_LOCALE, ThemePalette } from '@angular/material/core';

@Component({
  selector: 'app-dynamic-input',
  templateUrl: './dynamic-input.component.html',
  styleUrls: ['./dynamic-input.component.css']
})
export class DynamicInputComponent implements OnInit{

  @Output() public dataValue: EventEmitter<string | Array<any> | boolean> = new EventEmitter();

  @Input() public label:string;
  @Input() public tag:string;
  @Input() public type:string;
  @Input() public placeholder:string;
  @Input() public value: string | Array<any> | boolean | Date;
  @Input() public id:string;
  @Input() public name: string;
  @Input() public required_reg: boolean;
  @Input() public required_mod: boolean;
  @Input() public readonly_reg: boolean;
  @Input() public readonly_mod: boolean;
  @Input() public disabled_reg: boolean;
  @Input() public disabled_mod: boolean;
  @Input() public maxLength: string;
  @Input() public pattern: string;
  @Input() public msgerror: string;
  @Input() public accept_file: string;
  @Input() public icon: string;
  @Input() public column: string;
  @Input() public typeForm: string;

  public textError:string;


  constructor() {
    this.label = '';
    this.tag = '';
    this.type = '';
    this.placeholder = '';
    this.value = '';
    this.id = '';
    this.name = '';
    this.required_reg = false;
    this.required_mod = false;
    this.readonly_reg = false;
    this.readonly_mod = false;
    this.disabled_reg = false;
    this.disabled_mod = false;
    this.maxLength = '';
    this.pattern = '';
    this.msgerror = '';
    this.accept_file = '';
    this.icon = '';
    this.column = '';
    this.textError = '';
    this.typeForm = '';
  }

  ngOnInit(): void {
    if (this.type === 'date') {
      let arrDate = this.value.toString().split('-');
      let year: number | string = parseInt(arrDate[0]) ;
      let month: number | string = parseInt(arrDate[1]);
      let day: number = parseInt(arrDate[2]);

      this.value = new Date( `${year}-${month}-${day}` );

    }
  }

  public getFile() {
    document.getElementById(this.id)!!.click();
  }

  public sub(obj: any) {
    var file = obj.value;
    if (file != '') {
      var fileName = file.split("\\");
      document.getElementById("yourBtn")!!.innerHTML = fileName[fileName.length - 1];
    } else {
      document.getElementById("yourBtn")!!.innerHTML = "Click aquí para subir un archivo";
    }
  }

  public setValue(event:any) {
    let dataInput:string = (event.target as HTMLInputElement).value;
    this.dataValue.emit( dataInput );
  }

  // Método para validar los campos
  public validatorData(textValue:string, pattern:string, required:boolean, msgerror:string, type: string) {

    if (type === 'date') {
      let arrDate: Array<string> = textValue.split('/');
      let day: number | string = parseInt(arrDate[0]) ;
      let month: number | string = parseInt(arrDate[1]);
      let year: number = parseInt(arrDate[2]);

      if (day < 10) {
        day = '0' + day;
      }
      if (month < 10) {
        month = '0' + month;
      }

      textValue = `${year}-${month}-${day}`;
    }

    let isInvalid: boolean = false;

    // Se verifica que el campo sea requerido
    if (required && textValue === '') {
      this.textError = 'El campo es requerido';
      isInvalid = true;
    } else if (required && textValue !== '') {
      this.textError = '';
      isInvalid = false
    }

    // Se verifica que el pattern tenga valores
    if (pattern !== null) {
      // Se tranforma a valores que se puedan tratar
      let dataValidate = new RegExp(pattern);
      // Se realiza la validación respecto al texto colocado
      if (!dataValidate.test(textValue)) {
        // Se ingresa el mensaje del error del formulario
        this.textError = this.textError !== '' ? this.textError : msgerror;
        isInvalid = true;
      }else{
        this.textError = this.textError !== '' ? this.textError : '';
        isInvalid = false;
      }
    }else {
      isInvalid = false;
    }

    if (!isInvalid) {
      this.dataValue.emit(textValue);
    }

    return isInvalid;
  }


}
