// Angular Core
import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';

// RxJs
import { Subscription, throwError } from 'rxjs';
import { catchError } from "rxjs/operators";

// Services
import { AccountInfoService } from 'src/app/services/accountInfo/account-info.service';
import { SessionService } from 'src/app/services/session/session.service';
import { LocalStorageService } from 'src/app/services/localstorage/local-storage.service';

// Interfaces
import { SessionDataInterface } from 'src/app/interfaces/session-data-interface';

@Component({
  standalone: false,
  selector: 'app-questionnaire',
  templateUrl: './questionnaire.component.html',
  styleUrls: ['./questionnaire.component.scss']
})
export class QuestionnaireComponent implements OnInit, OnDestroy {

  session!: SessionDataInterface['data'];
  isBuyer!: boolean;
  renderMe!: boolean;
  regActiveStep: string = 'step2';
  submitted:boolean = false;
  questionnaireForm:any = FormGroup;
  qOneSourceSome:boolean = true;
  qOneSourceNoNegetive:boolean = true;
  qOneTypeNoNegetive:boolean = true;
  qOneTypeSome:boolean = true;
  authorized_signatures: string[] = [];
  newUserQuestionnaire:any = {
    walk_in: '',
    phone_fax_in: '',
    mail_order: '',
    internet: '',
    cash: '',
    insurance: '',
    qtwo: '',
    qthree: '',
    qfour: '',
    qfive: 'no',
    qsix: 'no',
    qseven: '',
    qeight: 'no',
    qnine: 'no',
    qten: 'no',
    qeleven: 'no',
    qtwelve: 'no',
    qthirteen: 'no',
    qfourteen: 'no',
    authorized_signatures: '',

    further_details: '',
    qnfive: 'qnfive',
    qnsix: 'qnsix',
    qnseven: 'qnseven',
    qneight: 'qneight',
    qnnine: 'qnnine',
    qnten: 'qnten',
    qneleven: 'qneleven',
    qntwelve: 'qntwelve',
    qnthirteen: 'qnthirteen',
    qnfourteen: 'qnfourteen',

    question_1_walk_in: '',
    question_1_phone_fax: '',
    question_1_mail_order: '',
    question_1_internet: '',
    question_1_cash: '',
    question_1_insurance: '',
    question_2: '',
    question_3: '',
    question_4: '',
    question_5: '',
    question_6: '',
    question_7: '',
    question_8: '',
    question_9: '',
    question_10: '',
    question_11: '',
    question_12: '',
    question_13: '',
    question_14: '',
  };
  yesQuestionArray = [
    { form_key:'question_5', new_form_key:'qnfive' },
    { form_key:'question_6', new_form_key:'qnsix' },
    { form_key:'question_8', new_form_key:'qneight' },
    { form_key:'question_9', new_form_key:'qnnine' },
    { form_key:'question_10', new_form_key:'qnten' },
    { form_key:'question_11', new_form_key:'qneleven' },
    { form_key:'question_12', new_form_key:'qntwelve' },
    { form_key:'question_13', new_form_key:'qnthirteen' },
    { form_key:'question_14', new_form_key:'qnfourteen' },
  ];

  constructor( 
    private formBuilder: FormBuilder,
    private router: Router, 
    private accountInfoService: AccountInfoService,  
    private sessionService: SessionService,
    private el: ElementRef,
    private localStorageService: LocalStorageService) { 
      this.questionnaireForm = this.formBuilder.group({});
    }

  ngOnInit(): void {
    this.session = this.sessionService.getSession();
    this.isBuyer = this.session.is_buyer;
    this.renderMe = this.session.logged_in && (this.session.reg_step >= 3) && (this.session.is_buyer === true);
    this.questionnaireForm = this.formBuilder.group({
      walk_in: ['', Validators.required],
			phone_fax_in: ['', Validators.required],
      mail_order: [''],
      internet : ['', Validators.required] ,
      cash : ['', Validators.required],
      insurance : ['', Validators.required],
      qtwo : ['', Validators.required],
      qthree : ['', Validators.required],
      qfour : ['', Validators.required],
      qfive : ['no', Validators.required],
      qnfive : [''],
      qsix : ['no', Validators.required],
      qnsix : [''],
      qseven : ['no', Validators.required],
      qnseven : [''],
      qeight : ['no', Validators.required],
      qneight : [''],
      qnine : ['no', Validators.required],
      qnnine : [''],
      qten : ['no', Validators.required],
      qnten : [''],
      qeleven : ['no', Validators.required],
      qneleven : [''],
      qtwelve : ['no', Validators.required],
      qntwelve : [''],
      qthirteen : ['no', Validators.required],
      qnthirteen : [''],
      qfourteen : ['no', Validators.required],
      qnfourteen : [''],
      authorized_signatures : [[]],
      signatures : [''],
    });
    this.formControlValueChanged();
    this.getQuestionnaireDetail()
    this.sessionService.getAuth().then((response)=>{
      this.session = this.sessionService.getSession()
   })
   this.localStorageService.removeItem("autoValidate");
  }

  

  get questionnaireFormData() { return this.questionnaireForm.controls; }
  
  formControlValueChanged(){
    const qnfive = this.questionnaireForm.get('qnfive');
    const qnsix = this.questionnaireForm.get('qnsix');
    const qnseven = this.questionnaireForm.get('qnseven');
    const qneight = this.questionnaireForm.get('qneight');
    const qnnine = this.questionnaireForm.get('qnnine');
    const qnten = this.questionnaireForm.get('qnten');
    const qneleven = this.questionnaireForm.get('qneleven');
    const qntwelve = this.questionnaireForm.get('qntwelve');
    const qnthirteen = this.questionnaireForm.get('qnthirteen');
    const qnfourteen = this.questionnaireForm.get('qnfourteen');
    this.questionnaireForm.get('qfive').valueChanges.subscribe(
      (val: string) => {
        if(val === 'yes'){
          qnfive.setValidators([Validators.required]);
        }else{
          qnfive.clearValidators();
        }
        qnfive.updateValueAndValidity();
    });
    this.questionnaireForm.get('qsix').valueChanges.subscribe(
      (val: string) => {
        if(val === 'yes'){
          qnsix.setValidators([Validators.required]);
        }else{
          qnsix.clearValidators();
        }
        qnsix.updateValueAndValidity();
    });
    this.questionnaireForm.get('qseven').valueChanges.subscribe(
      (val: string) => {
        if(val === 'yes'){
          qnseven.setValidators([Validators.required]);
        }else{
          qnseven.clearValidators();
        }
        qnseven.updateValueAndValidity();
    });
    this.questionnaireForm.get('qeight').valueChanges.subscribe(
      (val: string) => {
        if(val === 'yes'){
          qneight.setValidators([Validators.required]);
        }else{
          qneight.clearValidators();
        }
        qneight.updateValueAndValidity();
    });
    this.questionnaireForm.get('qnine').valueChanges.subscribe(
      (val: string) => {
        if(val === 'yes'){
          qnnine.setValidators([Validators.required]);
        }else{
          qnnine.clearValidators();
        }
        qnnine.updateValueAndValidity();
    });
    this.questionnaireForm.get('qten').valueChanges.subscribe(
      (val: string) => {
        if(val === 'yes'){
          qnten.setValidators([Validators.required]);
        }else{
          qnten.clearValidators();
        }
        qnten.updateValueAndValidity();
    });
    this.questionnaireForm.get('qeleven').valueChanges.subscribe(
      (val: string) => {
        if(val === 'yes'){
          qneleven.setValidators([Validators.required]);
        }else{
          qneleven.clearValidators();
        }
        qneleven.updateValueAndValidity();
    });
    this.questionnaireForm.get('qtwelve').valueChanges.subscribe(
      (val: string) => {
        if(val === 'yes'){
          qntwelve.setValidators([Validators.required]);
        }else{
          qntwelve.clearValidators();
        }
        qntwelve.updateValueAndValidity();
    });
    this.questionnaireForm.get('qthirteen').valueChanges.subscribe(
      (val: string) => {
        if(val === 'yes'){
          qnthirteen.setValidators([Validators.required]);
        }else{
          qnthirteen.clearValidators();
        }
        qnthirteen.updateValueAndValidity();
    });
    this.questionnaireForm.get('qfourteen').valueChanges.subscribe(
      (val: string) => {
        if(val === 'yes'){
          qnfourteen.setValidators([Validators.required]);
        }else{
          qnfourteen.clearValidators();
        }
        qnfourteen.updateValueAndValidity();
    });
  }

  private scrollToFirstInvalidControl() {
    const firstInvalidControl: HTMLElement = this.el.nativeElement.querySelector(
      "form .ng-invalid"
    );

    window.scroll({
      top: this.getTopOffset(firstInvalidControl),
      left: 0,
      behavior: "smooth"
    });
  }

  private getTopOffset(controlEl: HTMLElement): number {
    const labelOffset = 50;
    return controlEl.getBoundingClientRect().top + window.scrollY - labelOffset;
  }
  saveUserQuestionnaireSubscribe!:Subscription;
  getQuestionnaireSubscribe!:Subscription;
  saveUserQuestionnaire() {
    this.submitted = true;
    if (this.questionnaireForm.invalid) {
      this.scrollToFirstInvalidControl();
    } else {
      let questionnaire = this.questionnaireFormData ;
      if((questionnaire.walk_in.value < 0 || questionnaire.phone_fax_in.value < 0 || questionnaire.mail_order.value < 0 || questionnaire.internet.value < 0 )){
        this.qOneSourceNoNegetive = false
      }else{
        this.qOneSourceNoNegetive = true
      }
      if (questionnaire.cash.value < 0 || questionnaire.insurance.value < 0) {
        this.qOneTypeNoNegetive = false;
      }else{
        this.qOneTypeNoNegetive = true;
      }
      if ((questionnaire.walk_in.value + questionnaire.phone_fax_in.value + questionnaire.mail_order.value + questionnaire.internet.value) !== 100) {
        this.qOneSourceSome = false;
      }else{
        this.qOneSourceSome = true;
      }
      if ((questionnaire.cash.value + questionnaire.insurance.value) !== 100) {
        this.qOneTypeSome = false;
      }else{
        this.qOneTypeSome = true;
      }
      
      if(!this.qOneTypeSome || !this.qOneSourceSome){
        return;
      }
      if (questionnaire.signatures.value !== '') {
        questionnaire.authorized_signatures.value.push(questionnaire.signatures.value);
      }
      if (questionnaire.authorized_signatures.value.length === 0) {
        return;
      }
      if (questionnaire.qnseven.value === undefined || questionnaire.qseven.value === 'no') {
        questionnaire.qnseven.value = '';
      }
      this.setFurtherDetails();
      var questionnaireInfo = this.prepareQuestionnaireData();
      if (questionnaireInfo !== undefined) {
        this.saveUserQuestionnaireSubscribe = this.accountInfoService.saveUserQuestionnaire(questionnaireInfo)
          .subscribe({
            next: () => {
              this.sessionService.reCheckSession();
              this.router.navigate(['market/eSign']);
            },
            error: (err: HttpErrorResponse) => {
              this.accountInfoService.errorCallBack(err);
            },
            complete: () => { }
          });
      }
    }
  };

  prepareQuestionnaireData() {
    let questionnaire = this.questionnaireFormData ;
    var questionnaireInfo = {
      "question_1_walk_in": questionnaire.walk_in.value,
      "question_1_phone_fax": questionnaire.phone_fax_in.value,
      "question_1_mail_order": questionnaire.mail_order.value,
      "question_1_internet": questionnaire.internet.value,
      "question_1_cash": questionnaire.cash.value,
      "question_1_insurance": questionnaire.insurance.value,
      "question_2": questionnaire.qtwo.value,
      "question_3": questionnaire.qthree.value,
      "question_4": questionnaire.qfour.value,
      "question_5": questionnaire.qfive.value,
      "question_6": questionnaire.qsix.value,
      "question_7": questionnaire.qseven.value,
      "question_7_website": questionnaire.qnseven.value,
      "question_8": questionnaire.qeight.value,
      "question_9": questionnaire.qnine.value,
      "question_10": questionnaire.qten.value,
      "question_11": questionnaire.qeleven.value,
      "question_12": questionnaire.qtwelve.value,
      "question_13": questionnaire.qthirteen.value,
      "question_14": questionnaire.qfourteen.value,
      "further_details": questionnaire.further_details,
      "authorized_signatures": questionnaire.authorized_signatures.value,
    };
    return questionnaireInfo;
  };

  /**
   * Sets Further Details and also setting qn<questionno> default values to '' 
   * for questions which was selected as 'no' or undefined.
   * @returns {undefined}
   */
  setFurtherDetails() {
    let questionnaire = this.questionnaireFormData ;
    if (questionnaire.qnfive.value === undefined
      || questionnaire.qfive.value === 'no') {
        this.questionnaireFormData.qnfive.setValue('');
    }
    if (questionnaire.qnsix.value === undefined
      || questionnaire.qsix.value === 'no') {
        this.questionnaireFormData.qnsix.setValue('');
    }
    if (questionnaire.qnseven.value === undefined
      || questionnaire.qseven.value === 'no') {
        this.questionnaireFormData.qnseven.setValue('');
    }
    if (questionnaire.qneight.value === undefined
      || questionnaire.qeight.value === 'no') {
        this.questionnaireFormData.qneight.setValue('');
    }
    if (questionnaire.qnnine.value === undefined
      || questionnaire.qnine.value === 'no') {
        this.questionnaireFormData.qnnine.setValue('');
    }
    if (questionnaire.qnten.value === undefined
      || questionnaire.qten.value === 'no') {
        this.questionnaireFormData.qnten.setValue('');
    }
    if (questionnaire.qneleven.value === undefined
      || questionnaire.qeleven.value === 'no') {
        this.questionnaireFormData.qneleven.setValue('');
    }
    if (questionnaire.qntwelve.value === undefined
      || questionnaire.qtwelve.value === 'no') {
        this.questionnaireFormData.qntwelve.setValue('');
    }
    if (questionnaire.qnthirteen.value === undefined
      || questionnaire.qthirteen.value === 'no') {
        this.questionnaireFormData.qnthirteen.setValue('');
    }
    if (questionnaire.qnfourteen.value === undefined
      || questionnaire.qfourteen.value === 'no') {
        this.questionnaireFormData.qnfourteen.setValue('');
    }
    questionnaire.further_details = this.prepareFurtherDetails();
  };

  /**
   * Gets all the information of Questions which were selected as 'yes'.
   * and prepares Further Details String.
   * @returns {String}
   */
  prepareFurtherDetails() {
    var furtherDetails = '';
    let questionnaire = this.questionnaireFormData ;
    furtherDetails = this.getDelimiterAddedStr(questionnaire.qnfive.value) +
      this.getDelimiterAddedStr(questionnaire.qnsix.value) +
      this.getDelimiterAddedStr(questionnaire.qneight.value) +
      this.getDelimiterAddedStr(questionnaire.qnnine.value) +
      this.getDelimiterAddedStr(questionnaire.qnten.value) +
      this.getDelimiterAddedStr(questionnaire.qneleven.value) +
      this.getDelimiterAddedStr(questionnaire.qntwelve.value) +
      this.getDelimiterAddedStr(questionnaire.qnthirteen.value) +
      this.getDelimiterAddedStr(questionnaire.qnfourteen.value);
    return furtherDetails;
  };

  /**
   * If Parameter value is not empty then it will return the String with Delimiter added.
   * @param {String} value
   * @returns {String}
   */
  getDelimiterAddedStr(value: string) {
    if (value !== '' && value !== null && value !== undefined) {
      return value + '|**|';
    }
    return '';
  };

  getQuestionnaireDetail() {

    this.getQuestionnaireSubscribe = this.accountInfoService.getQuestionnaire()
      .pipe(
        catchError(() => {
          return throwError(() => new Error('ups sommething happend'));
        })
      )
      .subscribe({
        next: (res: any) => {
          let result = res;
          let resultLength = Object.keys(result.data).length;
          if (result.data !== null && resultLength > 1) {
            let questionnaire = this.questionnaireFormData ;
            let newUserQuestionnaire = result.data;
            questionnaire.walk_in.setValue(newUserQuestionnaire.question_1_walk_in);
            questionnaire.phone_fax_in.setValue(newUserQuestionnaire.question_1_phone_fax);
            questionnaire.mail_order.setValue(newUserQuestionnaire.question_1_mail_order);
            questionnaire.internet.setValue(newUserQuestionnaire.question_1_internet);
            questionnaire.cash.setValue(newUserQuestionnaire.question_1_cash);
            questionnaire.insurance.setValue(newUserQuestionnaire.question_1_insurance);
            questionnaire.qtwo.setValue(newUserQuestionnaire.question_2);
            questionnaire.qthree.setValue(newUserQuestionnaire.question_3);
            questionnaire.qfour.setValue(newUserQuestionnaire.question_4);
            questionnaire.qfive.setValue(newUserQuestionnaire.question_5);
            questionnaire.qsix.setValue(newUserQuestionnaire.question_6);
            questionnaire.qseven.setValue(newUserQuestionnaire.question_7);
            questionnaire.qeight.setValue(newUserQuestionnaire.question_8);
            questionnaire.qnine.setValue(newUserQuestionnaire.question_9);
            questionnaire.qten.setValue(newUserQuestionnaire.question_10);
            questionnaire.qeleven.setValue(newUserQuestionnaire.question_11);
            questionnaire.qtwelve.setValue(newUserQuestionnaire.question_12);
            questionnaire.qthirteen.setValue(newUserQuestionnaire.question_13);
            questionnaire.qfourteen.setValue(newUserQuestionnaire.question_14);
            questionnaire.authorized_signatures.setValue(newUserQuestionnaire.authorized_signatures);
            if (newUserQuestionnaire.question_7 === 'yes') {
                questionnaire.qnseven.setValue(newUserQuestionnaire.question_7_website);
            }
            if (newUserQuestionnaire.further_details !== ''
              && newUserQuestionnaire.further_details !== null
              && newUserQuestionnaire.further_details !== undefined) {
              var furtherDetails = newUserQuestionnaire.further_details.split('|**|');
              this.yesQuestionArray.forEach((value,key) => {
                if (newUserQuestionnaire[value.form_key] === 'yes' ) { // ------------------------- TODO: Check for the value
                  questionnaire[value.new_form_key].setValue(furtherDetails[key]) // ------------------------- TODO: Check for the value
                }
              });
            }
          }

        },
        error: (err: HttpErrorResponse) => {
          this.accountInfoService.errorCallBack(err);
        },
        complete: () => { }
      });
  }
  addSignatures() {
    this.questionnaireFormData.authorized_signatures.value.push(this.questionnaireFormData.signatures.value);
    this.questionnaireFormData.signatures.setValue('');
  };

  deleteSignatures(index: number) {
      this.questionnaireFormData.authorized_signatures.value.splice(index, 1);
  };

  redirectToPreviousStep() {
    this.router.navigate(['/market/storeInfo'])
  };

  // Trackby function for track looping items
  trackByFn(index:number, item: string){
    return item
  }

  ngOnDestroy(){
    this.saveUserQuestionnaireSubscribe?.unsubscribe();
    this.getQuestionnaireSubscribe?.unsubscribe();
  }

}