import {AfterViewInit, Component, Injectable, OnInit} from '@angular/core';
import {FieldType} from '@ngx-formly/material';
import {AllService} from '../../../all.service';
import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
import {filter} from 'rxjs/operators';
import {faUsers, faCalendar} from '@fortawesome/free-solid-svg-icons';
import {NgbDateAdapter, NgbDateParserFormatter, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';


/**
 * This Service handles how the date is represented in scripts i.e. ngModel.
 */
@Injectable()
export class CustomAdapter extends NgbDateAdapter<string> {

  readonly DELIMITER = '-';

  fromModel(value: string | null): NgbDateStruct | null {
    if (value) {
      const date = value.split(this.DELIMITER);
      return {
        day: parseInt(date[2], 10),
        month: parseInt(date[1], 10),
        year: parseInt(date[0], 10)
      };
    }
    return null;
  }

  toModel(date: NgbDateStruct | null): string | null {
    return date ? date.year + this.DELIMITER + this.formatedNumber(date.month) + this.DELIMITER + this.formatedNumber(date.day) : null;
  }

  formatedNumber(date: any): string {
    return date < 10 ? '0' + date : date;
  }
}

@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {

  readonly DELIMITER = '/';

  parse(value: string): NgbDateStruct | null {
    console.log('ICI');
    if (value) {
      const date = value.split(this.DELIMITER);
      return {
        day: parseInt(date[0], 10),
        month: parseInt(date[1], 10),
        year: parseInt(date[2], 10)
      };
    }
    return null;
  }

  format(date: NgbDateStruct | null): string {
    return date ? this.formatedNumber(date.day) + this.DELIMITER + this.formatedNumber(date.month) + this.DELIMITER + date.year : '';
  }

  formatedNumber(date: any): string {
    return date < 10 ? '0' + date : date;
  }
}

@Component({
  selector: 'jhi-step-beneficiary',
  templateUrl: './step-beneficiary.component.html',
  styleUrls: ['./step-beneficiary.component.scss'],
  providers: [
    {provide: NgbDateAdapter, useClass: CustomAdapter},
    {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}
  ]
})
export class StepBeneficiaryComponent extends FieldType implements OnInit, AfterViewInit {

  faUsers = faUsers;
  faCalendar = faCalendar;
  public boxForm: FormGroup;
  submited = false;
  centPercentBeneficiaryQuotity = false;
  maxDateBirthday = null;

  constructor(private formBuilder: FormBuilder, private allService: AllService) {
    super();
  }

  ngOnInit() {

    if (this.model['beneficiary_1_quotity']) {
      this.boxForm = this.formBuilder.group({
        items: this.formBuilder.array([])
      });
      this.loadBeneficiary();
    } else {
      this.boxForm = this.formBuilder.group({
        items: this.formBuilder.array([this.createBox()])
      });
    }

    this.boxForm.statusChanges
      .pipe(
        filter(() => this.boxForm.valid))
      .subscribe(() => this.onFormValid());

    this.allService.getSubmitedStepAsObserVable().subscribe((submited) => {
      this.submited = submited;
    });
  }

  ngAfterViewInit(): void {
    super.ngAfterViewInit();
    this.onFormValid();
    const currentDate = new Date();
    const maxDate = new Date(currentDate.setMonth(currentDate.getMonth() + 1));
    this.maxDateBirthday = {year: maxDate.getFullYear(), month: maxDate.getMonth(), day: maxDate.getDate()};
  }

  createBox(): FormGroup {
    return this.formBuilder.group({
      beneficiary_address: ['', [Validators.required]],
      beneficiary_birth_zipcode: ['', [Validators.required, Validators.pattern(/^(?:[0-8]\d|9[0-8])\d{3}$/)]],
      beneficiary_birthdate: ['', [Validators.required]],
      beneficiary_birthname: ['', []],
      beneficiary_city: ['', [Validators.required]],
      beneficiary_firstname: ['', [Validators.required]],
      beneficiary_gender: ['', [Validators.required]],
      beneficiary_lastname: ['', [Validators.required]],
      beneficiary_link: ['', [Validators.required]],
      beneficiary_mail: ['', []],
      beneficiary_phone: ['', []],
      beneficiary_quotity: ['', [Validators.required, Validators.min(1), Validators.max(100)]],
      beneficiary_zipcode: ['', [Validators.required, Validators.pattern(/^(?:[0-8]\d|9[0-8])\d{3}$/)]]
    });
  }

  get items(): FormArray {
    return this.boxForm.get('items') as FormArray;
  }

  get f() {
    return this.boxForm.get('items');
  }

  addItem(): void {
    this.items.push(this.createBox());
    this.allService.currentStepCustomError = true;
  }

  deleteItem(i) {
    const confirmationDelete = confirm('Voulez vous vraiment supprimer ce bénéficiaire ?');
    if (confirmationDelete) {
      this.items.removeAt(i);
      this.onFormValid();
    }
  }

  onFormValid(): void {
    this.calculQuotity();
    if (this.model['beneficiary_option'] === '1') {
      if (this.boxForm.valid && this.centPercentBeneficiaryQuotity) {
        this.resetValuesModel();
        this.setValuesModel();
        if (this.model['funeral_wish_one_person']) {
          this.allService.currentStepCustomError = false;
        } else {
          this.allService.currentStepCustomError = true;
        }
      } else {
        this.allService.currentStepCustomError = true;
      }
    } else {
      if (this.model['beneficiary_option'] === '0' && this.model['funeral_wish_one_person']) {
        this.allService.currentStepCustomError = false;
      } else {
        this.allService.currentStepCustomError = true;
      }
    }

  }

  checkCentPercent(): boolean {
    let max = 0;
    for (let i = 0; i < this.items.length; i++) {
      max += parseFloat(this.items.at(i).get('beneficiary_quotity').value);
    }
    return max === 100;
  }

  switchStatuForm(hasError): void {
    if (!hasError) {
      this.resetValuesModel();
    }
    this.onFormValid();
  }

  resetValuesModel(): void {
    for (let i = 1; i < 5; i++) {
      this.model['beneficiary_' + i + '_address'] = null;
      this.model['beneficiary_' + i + '_birth_zipcode'] = null;
      this.model['beneficiary_' + i + '_birthdate'] = null;
      this.model['beneficiary_' + i + '_birthname'] = null;
      this.model['beneficiary_' + i + '_city'] = null;
      this.model['beneficiary_' + i + '_firstname'] = null;
      this.model['beneficiary_' + i + '_gender'] = null;
      this.model['beneficiary_' + i + '_lastname'] = null;
      this.model['beneficiary_' + i + '_link'] = null;
      this.model['beneficiary_' + i + '_mail'] = null;
      this.model['beneficiary_' + i + '_phone'] = null;
      this.model['beneficiary_' + i + '_quotity'] = null;
      this.model['beneficiary_' + i + '_zipcode'] = null;
    }
  }

  setValuesModel(): void {
    for (let i = 0; i < this.items.length; i++) {
      this.model['beneficiary_' + (i + 1) + '_address'] = this.items.at(i).get('beneficiary_address').value;
      this.model['beneficiary_' + (i + 1) + '_birth_zipcode'] = this.items.at(i).get('beneficiary_birth_zipcode').value;
      this.model['beneficiary_' + (i + 1) + '_birthdate'] = this.items.at(i).get('beneficiary_birthdate').value;
      this.model['beneficiary_' + (i + 1) + '_birthname'] = this.items.at(i).get('beneficiary_birthname').value;
      this.model['beneficiary_' + (i + 1) + '_city'] = this.items.at(i).get('beneficiary_city').value;
      this.model['beneficiary_' + (i + 1) + '_firstname'] = this.items.at(i).get('beneficiary_firstname').value;
      this.model['beneficiary_' + (i + 1) + '_gender'] = this.items.at(i).get('beneficiary_gender').value;
      this.model['beneficiary_' + (i + 1) + '_lastname'] = this.items.at(i).get('beneficiary_lastname').value;
      this.model['beneficiary_' + (i + 1) + '_link'] = this.items.at(i).get('beneficiary_link').value;
      this.model['beneficiary_' + (i + 1) + '_mail'] = this.items.at(i).get('beneficiary_mail').value;
      this.model['beneficiary_' + (i + 1) + '_phone'] = this.items.at(i).get('beneficiary_phone').value;
      this.model['beneficiary_' + (i + 1) + '_quotity'] = this.items.at(i).get('beneficiary_quotity').value;
      this.model['beneficiary_' + (i + 1) + '_zipcode'] = this.items.at(i).get('beneficiary_zipcode').value;
    }
  }

  loadBeneficiary(): void {
    for (let i = 1; i < 5; i++) {
      if (this.model['beneficiary_' + i + '_quotity']) {
        this.items.push(this.formBuilder.group({
          beneficiary_address: [this.model['beneficiary_' + i + '_address'], []],
          beneficiary_birth_zipcode: [this.model['beneficiary_' + i + '_birth_zipcode'], [Validators.required]],
          beneficiary_birthdate: [this.model['beneficiary_' + i + '_birthdate'], [Validators.required]],
          beneficiary_birthname: [this.model['beneficiary_' + i + '_birthname'], []],
          beneficiary_city: [this.model['beneficiary_' + i + '_city'], []],
          beneficiary_firstname: [this.model['beneficiary_' + i + '_firstname'], [Validators.required]],
          beneficiary_gender: [this.model['beneficiary_' + i + '_gender'], [Validators.required]],
          beneficiary_lastname: [this.model['beneficiary_' + i + '_lastname'], [Validators.required]],
          beneficiary_link: [this.model['beneficiary_' + i + '_link'], [Validators.required]],
          beneficiary_mail: [this.model['beneficiary_' + i + '_mail'], []],
          beneficiary_phone: [this.model['beneficiary_' + i + '_phone'], []],
          beneficiary_quotity: [this.model['beneficiary_' + i + '_quotity'], [Validators.required, Validators.min(1), Validators.max(100)]],
          beneficiary_zipcode: [this.model['beneficiary_' + i + '_zipcode'], []]
        }));
      }
    }
  }

  formatDate(e: any): void {
    const keyCode = e.keyCode;
    const isShift = keyCode === 16;
    let currentValue = e.target.value;

    if (((keyCode >= 48 && keyCode <= 57) || keyCode === 8 || keyCode <= 37 || keyCode <= 39 || (keyCode >= 96 && keyCode <= 105)) && isShift === false) {
      if ((currentValue.length === 2 || currentValue.length === 5) && keyCode !== 8) {
        currentValue += '/';
        e.target.value = currentValue;
      }
    }
  }

  calculQuotity(){
    this.centPercentBeneficiaryQuotity = this.checkCentPercent();
  }
}