import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormBuilder, AbstractControl } from '@angular/forms';

import { map, catchError, debounceTime } from 'rxjs/operators';
import { of } from 'rxjs';

import { constants } from '@monsantoit/md-grower-core';
import { MessageService } from '@monsantoit/pod-ui-utils-lib';

import { GrowerService } from '../../services/grower.service';
import { phoneNumberValidator } from '../../utils/sync-validators';
import { phoneNumberMask } from '../../utils/input-masks';


@Component({
  selector: 'md-grower-create-grower',
  templateUrl: './create-grower.component.html'
})
export class GrowerCreateComponent implements OnInit {
  constructor(
    private formBuilder: FormBuilder,
    private growerService: GrowerService,
    private messageService: MessageService
  ) {}

  createGrowerForm: FormGroup;
  documentTypes = Object.values(constants.DOCUMENT_TYPE);

  lang: string;

  phoneNumberMask = phoneNumberMask;

  get documentNumberMask() {
    const { documentType } = this.createGrowerForm.value.general;
    const mask =
      documentType === 'CPF'
        ? [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/]
        : [
            /\d/,
            /\d/,
            '.',
            /\d/,
            /\d/,
            /\d/,
            '.',
            /\d/,
            /\d/,
            /\d/,
            '/',
            /\d/,
            /\d/,
            /\d/,
            /\d/,
            '-',
            /\d/,
            /\d/
          ];

    return { mask };
  }

  addressValidator(g: FormGroup) {
    const commercial = g.get('commercial');
    return true;
  }

  onAddressFormReady(name: string, form: FormGroup) {
    this.createGrowerForm.setControl(name, form);
  }

  ngOnInit() {
    this.createForm();

    this.createGrowerForm.get('general.documentType').valueChanges.subscribe(val => {
      this.createGrowerForm.get('general.documentNumber').setValue('');
    });
  }

  createForm() {
    this.createGrowerForm = this.formBuilder.group({
      general: this.formBuilder.group({
        documentType: ['', Validators.required],
        documentNumber: [
          '',
          [
            Validators.required,
            Validators.pattern(
              /^([0-9]{3}\.?[0-9]{3}\.?[0-9]{3}\-?[0-9]{2}|[0-9]{2}\.?[0-9]{3}\.?[0-9]{3}\/?[0-9]{4}\-?[0-9]{2})$/
            )
          ],
          this.validateDuplicatedDocumentNumber.bind(this)
        ],
        name: ['', Validators.required],
        alias: [''],
        email: ['', [Validators.required, Validators.email]],
        phoneNumber: ['', [Validators.required, phoneNumberValidator.bind(this)]]
      })
    });
  }

  onCreateGrowerFormSubmit() {
    this.growerService.saveGrower(this.createGrowerForm.value).subscribe(response => {
      this.messageService.showSuccessSnackBar('Grower saved succesfully!');
    });
  }

  validateDuplicatedDocumentNumber(control: AbstractControl) {
    const cleanValue: string = (control.value || '').replace(/\D/g, '');
    if (cleanValue.length === 11 || cleanValue.length === 14) {
      return this.growerService.getById(control.value).pipe(
        debounceTime(800),
        map((data: string) => {
          return data.length === 0 ? null : { documentNumberDuplicated: true };
        }),
        catchError(() => {
          return of(null);
        })
      );
    } else {
      return of(null);
    }
  }

  onGrowerSelected(grower) {
    console.log('on grower selected', grower);
  }
}