import {AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
import {FieldType, FormlyFieldConfig} from '@ngx-formly/core';
import {AbstractControl, FormGroup, NgForm, Validators} from '@angular/forms';
import {AllService} from '../../../all.service';
import {ActivatedRoute} from '@angular/router';
import IBAN from 'iban';

@Component({
  selector: 'jhi-step-sepa',
  templateUrl: './step-sepa.component.html',
  styleUrls: ['./step-sepa.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class StepSepaComponent extends FieldType implements OnInit, AfterViewInit {

  form = new FormGroup({});
  formReadMore = new FormGroup({});
  inputFieldOrigin = null;
  varSetted = false;
  modelReady = false;
  model2 = {};
  fieldsReadMore: FormlyFieldConfig[] = [
    {
      fieldGroup: [
        {
          'key': 'prelevement_sepa',
          'type': 'readMore',
          'templateOptions': {
            'label': 'En savoir plus',
            'autocomplete': false,
            'title': 'En savoir plus',
            'content': this.getContentPopup()
          }
        }
      ]
    }
  ];
  uploadInProgress = false;
  contractId = '';
  ibanInvalid = false;
  bankInvalid = false;
  requiredFields = null;
  fields: FormlyFieldConfig[] = [
    {
      fieldGroup: [
        {
          key: '5f00f00bc491764ec6c30b47',
          type: 'file',
          templateOptions: {
            label: '<p>Téléchargez votre RIB à votre nom</p>',
            change: (event, file) => {
              this.detectFiles(file);
            },
            required: false
          },
          expressionProperties: {
            'templateOptions.required': (model: any, formState: any, field: FormlyFieldConfig) => {
              if (this.inputFieldOrigin === null && !this.varSetted) {
                this.inputFieldOrigin = field.templateOptions.required;
                this.varSetted = true;
                return;
              }

              if (this.requiredFields && this.model['insured_sepa_path'] === null) {
                field.templateOptions.required = true;
              } else if (this.model['insured_sepa_path'] !== null) {
                field.templateOptions.required = false;
              } else {
                field.templateOptions.required = this.inputFieldOrigin;
              }
            }
          }
        },
      ]
    },
    {
      className: 'auto-fill-width',
      fieldGroup: [
        {
          key: 'insured_sepa_lastname',
          type: 'input',
          templateOptions: {
            label: 'Nom',
            required: true
          },
          expressionProperties: {
            'templateOptions.required': (model: any, formState: any, field: FormlyFieldConfig) => {
              return (this.requiredFields === null ? field.templateOptions.required : this.requiredFields);
            }
          }
        },
        {
          key: 'insured_sepa_firstname',
          type: 'input',
          templateOptions: {
            label: 'Prénom',
            required: true
          },
          expressionProperties: {
            'templateOptions.required': (model: any, formState: any, field: FormlyFieldConfig) => {
              return (this.requiredFields === null ? field.templateOptions.required : this.requiredFields);
            }
          }
        }
      ]
    },
    {
      className: 'auto-fill-width',
      fieldGroup: [
        {
          key: 'insured_sepa_address',
          type: 'input',
          templateOptions: {
            label: 'Adresse',
            required: true
          },
          expressionProperties: {
            'templateOptions.required': (model: any, formState: any, field: FormlyFieldConfig) => {
              return (this.requiredFields === null ? field.templateOptions.required : this.requiredFields);
            }
          }
        },
        {
          key: 'insured_sepa_zipcode',
          type: 'input',
          templateOptions: {
            type: 'text',
            label: 'Code postal',
            required: true
          },
          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': (model: any, formState: any, field: FormlyFieldConfig) => {
              return (this.requiredFields === null ? field.templateOptions.required : this.requiredFields);
            }
          }
        },
        {
          key: 'insured_sepa_city',
          type: 'input',
          templateOptions: {
            label: 'Ville',
            required: true
          },
          expressionProperties: {
            'templateOptions.required': (model: any, formState: any, field: FormlyFieldConfig) => {
              return (this.requiredFields === null ? field.templateOptions.required : this.requiredFields);
            }
          }
        }
      ]
    },
    {
      className: 'auto-fill-width',
      fieldGroup: [{
        key: 'insured_sepa_iban',
        type: 'input',
        templateOptions: {
          label: 'IBAN',
          change: (field) => {
            let cleanIban = this.model[field.key].replace(/ /g, '');
            cleanIban = cleanIban.replace('-', '');
            field.formControl.setValue(cleanIban);
            this.model[field.key] = cleanIban;
            this.model['insured_sepa_iban'] = cleanIban;
            this.validateAndGetBic(cleanIban);
          },
          required: true
        },
        expressionProperties: {
          'templateOptions.required': (model: any, formState: any, field: FormlyFieldConfig) => {
            return (this.requiredFields === null ? field.templateOptions.required : this.requiredFields);
          }
        }
      },
        {
          key: 'insured_sepa_bic',
          type: 'input',
          templateOptions: {
            label: 'BIC',
            change: (field) => {
              this.model['insured_sepa_bic'] = this.model[field.key];
            },
            required: true
          },
          expressionProperties: {
            'templateOptions.required': (model: any, formState: any, field: FormlyFieldConfig) => {
              return (this.requiredFields === null ? field.templateOptions.required : this.requiredFields);
            }
          }
        }
      ]
    },
    {
      className: 'auto-fill-width col-12',
      fieldGroup: [{
        type: 'textElement',
        templateOptions: {
          label: '<p class="error-red">Votre IBAN n\'est pas valide</p>'
        },
        hideExpression: () => {
          return !this.ibanInvalid;
        }
      }]
    }
  ];

  constructor(public allService: AllService,
              private route: ActivatedRoute) {
    super();
  }

  ngOnInit(): void {
    this.contractId = this.route.snapshot.paramMap.get('contractid');
    this.requiredFields = this.allService.activeStep.requiredFields;
    this.allService.currentStepCustomError = false;
  }

  detectFiles(event: any): void {
    if (event.target.files && event.target.files.length) {

      if (event.target.files[0].size > this.allService.configurationPreview.maxUploadSize) {
        this.model['insured_sepa_path'] = null;
        this.form.controls['5f00f00bc491764ec6c30b47'].setValue('');
        return;
      }

      this.uploadInProgress = true;
      let success = false;
      this.allService.currentStepCustomError = true;

      const data: FormData = new FormData();
      data.append('file', event.target.files[0]);

      this.allService.contractDocumentService.storeRIB(data, this.contractId).subscribe(scanResponse => {
          this.uploadInProgress = false;
          if (scanResponse.status === '0') {
            success = true;
            this.form.controls['insured_sepa_iban'].setValue(scanResponse.result.bankIdentification.iban);
            this.model['insured_sepa_iban'] = scanResponse.result.bankIdentification.iban;
            this.form.controls['insured_sepa_bic'].setValue(scanResponse.result.bankIdentification.bic);
            this.model['insured_sepa_bic'] = scanResponse.result.bankIdentification.bic;
            this.model['insured_sepa_path'] = scanResponse.path;
            this.allService.fileSepaRequiredSubject.next(false);
            if (this.form.status === 'VALID') {
              this.allService.currentStepCustomError = false;
            }

          } else if (scanResponse.status === '1') {
            success = true;
            this.model['insured_sepa_path'] = scanResponse.path;
            this.allService.fileSepaRequiredSubject.next(false);
            if (this.form.status === 'VALID') {
              this.allService.currentStepCustomError = false;
            }

          } else {
            this.form.controls['5f00f00bc491764ec6c30b47'].setValue('');
            this.model['insured_sepa_path'] = null;
            this.allService.fileSepaRequiredSubject.next(true);
          }
        },
        () => {
          this.uploadInProgress = false;
          this.model['insured_sepa_path'] = null;
          this.form.controls['5f00f00bc491764ec6c30b47'].setValue('');
          this.allService.fileSepaRequiredSubject.next(true);

          alert('Une erreur est survenue durant la récupération des informations');
        });
    }
  }

  validateAndGetBic(iban): void {
    if (!this.allService.configurationPreview.checkIban) {
      return;
    }

    this.ibanInvalid = false;
    this.bankInvalid = false;
    if (IBAN.isValid(iban)) {
      this.allService.contractDocumentService.checkIban(iban).toPromise().then((response) => {
        if (response.body && response.body.iban_checksum_check === 'passed' && response.body.bank_code_check === 'passed') {
          this.form.controls['insured_sepa_bic'].setValue(response.body.all_bic_candidates[0].bic);
          this.model['insured_sepa_bic'] = response.body.all_bic_candidates[0].bic;
          this.form.controls['insured_sepa_iban'].setErrors(null);
        } else {
          this.form.controls['insured_sepa_bic'].setValue('');
          this.model['insured_sepa_bic'] = '';
          this.bankInvalid = true;
        }
      });
    } else {
      this.ibanInvalid = true;
      this.form.controls['insured_sepa_iban'].setErrors({formatIban: true});
      this.form.controls['insured_sepa_bic'].setValue('');
      this.model['insured_sepa_bic'] = '';
    }
  }

  ngAfterViewInit() {
    this.form.valueChanges.subscribe(result => {
      if (this.form.status === 'VALID') {
        this.allService.currentStepCustomError = false;
      }
    });
    window.setTimeout(this.fillUserInformations.bind(this), 200);
  }

  fillUserInformations(): void {

    if (this.model['insured_sepa_path']) {
      this.allService.fileSepaRequiredSubject.next(false);
      this.fields[0].fieldGroup[0].templateOptions.required = false;
    }

    if (this.model['insured_sepa_iban']) {
      let cleanIban = '';
      cleanIban = this.model['insured_sepa_iban'].replace(/ /g, '');
      cleanIban = cleanIban.replace('-', '');
      this.model['insured_sepa_iban'] = cleanIban;
    }
    this.model['insured_sepa_city'] = this.model['insured_sepa_city'] || this.model['insured_identity_current_city'];
    this.model['insured_sepa_zipcode'] = this.model['insured_sepa_zipcode'] || this.model['insured_identity_current_zipcode'];
    this.model['insured_sepa_address'] = this.model['insured_sepa_address'] || this.model['insured_identity_current_address'];
    this.model['insured_sepa_lastname'] = this.model['insured_sepa_lastname'] || this.model['insured_identity_lastname'];
    this.model['insured_sepa_firstname'] = this.model['insured_sepa_firstname'] || this.model['insured_identity_firstname'];
    this.modelReady = true;
  }

  getContentPopup(): string {
    const text = `<p style="line-height: 18px;">L'espace unique de paiement en euros (ou SEPA - Single Euro Payment Area) vise à la mise à disposition de moyens de
    paiement en Euros communs au niveau européen, permettant aux consommateurs, aux entreprises, aux commerçants et aux
    administrations d'effectuer des paiements dans les mêmes conditions partout dans l'espace européen, aussi facilement
    que dans leur pays. SEPA a été mis en place afin de permettre à l'économie de la zone euro d'être en mesure de tirer
    pleinement parti des avantages de l'Union économique et monétaire.</p>`;

    return text;
  }
}