import {AfterViewInit, Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
import {FormGroup, Validators} from '@angular/forms';
import {FieldType, FormlyFieldConfig} from '@ngx-formly/core';
import {AllService} from '../../../all.service';
import {Subscription} from 'rxjs';

@Component({
  selector: 'jhi-step-organisme-mncap',
  templateUrl: './step-organisme-mncap.component.html',
  styleUrls: ['./step-organisme-mncap.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class StepOrganismeMncapComponent extends FieldType implements OnInit, OnDestroy, AfterViewInit {
  fieldRequired = true;
  submited = false;

  form = new FormGroup({});
  fields: FormlyFieldConfig[] = [
    {
      className: 'auto-fill-width',
      fieldGroup: [
        {
          key: 'name',
          type: 'input',
          templateOptions: {
            label: 'Nom / raison sociale de l\'organisme prêteur',
            change: (field) => {
              this.model['lender_name'] = this.form.controls['name'].value;
            }
          },
          expressionProperties: {
            'templateOptions.required': () => {
              return this.fieldRequired;
            }
          }
        },
        {
          key: 'address',
          type: 'input',
          templateOptions: {
            label: 'Adresse de l\'organisme prêteur',
            change: (field) => {
              this.model['lender_address'] = this.form.controls['address'].value;
            }
          },
          expressionProperties: {
            'templateOptions.required': () => {
              return this.fieldRequired;
            }
          }
        },
      ]
    },
    {
      className: 'auto-fill-width',
      fieldGroup: [{
        key: 'zipCode',
        type: 'input',
        templateOptions: {
          label: 'Code postal de l\'organisme prêteur',
          change: (field) => {
            this.model['lender_zipcode'] = this.form.controls['zipCode'].value;
          }
        },
        validators: {
          zipcode: {
            expression: (c) => !c.value || /^(?:[0-8]\d|9[0-8])\d{3}$/.test(c.value),
            message: (error, field) => `"${field.formControl.value}" n'est pas un code postal valide (Exemple: 75000)`
          }
        },
        expressionProperties: {
          'templateOptions.required': () => {
            return this.fieldRequired;
          }
        }
      },
        {
          key: 'city',
          type: 'input',
          templateOptions: {
            label: 'Ville de l\'organisme prêteur',
            change: (field) => {
              this.model['lender_city'] = this.form.controls['city'].value;
            }
          },
          expressionProperties: {
            'templateOptions.required': () => {
              return this.fieldRequired;
            }
          }
        },
      ]
    }
  ];

  private eventSubmitedSubscription: Subscription;

  constructor(public allService: AllService) {
    super();
  }

  ngOnInit(): void {
    this.fieldRequired = (this.allService.activeStep.requiredFields === null) ? this.fieldRequired : this.allService.activeStep.requiredFields;
    this.eventSubmitedSubscription = this.allService.getSubmitedStepAsObserVable().subscribe((submited) => {
      this.submited = submited;
    });
  }

  ngAfterViewInit(): void {
    this.fillData();
  }

  ngOnDestroy(): void {
    this.eventSubmitedSubscription.unsubscribe();
  }

  fillData(): void {
    this.form.controls['name'].setValue(this.model['lender_name']);
    this.form.controls['address'].setValue(this.model['lender_address']);
    this.form.controls['zipCode'].setValue(this.model['lender_zipcode']);
    this.form.controls['city'].setValue(this.model['lender_city']);
  }


}