import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { CommonService } from '../../shared/services/common/common.service';
import { GlobalService } from '../../shared/services/common/global.service';
import { LeadService } from '../../shared/services/loanService/lead.service';
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import { environment } from '../../../../environments/environment';
import { Leads } from '../../entities/leads';
import { Cities } from '../../entities/cities';
import { Meta, Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { isPlatformBrowser } from '@angular/common';
import Swal from 'sweetalert2';
import { NgxSpinnerService } from 'ngx-spinner';
import { LinkService } from '../../shared/services/link.service';
import { EmploymentType } from '../../entities/employmenttype';
import { DocumentMasters } from '../../entities/documentMasters';
declare let $: any;

@Component({
  selector: 'app-credit-card',
  templateUrl: './credit-card.component.html',
  styleUrls: ['./credit-card.component.scss']
})
export class CreditCardComponent implements OnInit {
  // public isVerifyOtp: boolean = true;
  // public isPersonalDetailForm: boolean = false;
  // public isOtpInput: boolean = false;
  // public otp: any;
  // public selectedTab: string = "Overview"
  // //public isShow: boolean = true;
  // public serviceId: number
  // public contactForm: FormGroup;
  // public basicDetailForm: FormGroup;
  // public leads = new Leads();
  // public cities: Cities[] = new Array<Cities>();
  // public selectedCity: any :any = [] :any = [];
  // public professionTypes :any = [];
  // public reCaptchaVerifier: any;
  // public verify: any;
  // public isAgreed: boolean = false;
  // public agreedmsg: string = '';
  // public faqs = [
  //   {
  //     que: "Why should you have a credit card?",
  //     ans: "To apply, register on our website/app. Follow the on-screen instructions to apply. Wait for 24 hours for your loan to get approved. And that's it!",
  //     isCollapsed: false
  //   },
  //   {
  //     que: "  Benefits of A Credit Card",
  //     ans: "You can find the list of documents here. (Add the link to the page).",
  //     isCollapsed: true
  //   },
  //   {
  //     que: " Types of Credit Cards",
  //     ans: "After approval, the cash is immediately transferred to the bank account of the user.",
  //     isCollapsed: true
  //   },
  //   {
  //     que: "  Eligibility and Documents Required for a Credit Card",
  //     ans: "After approval, the cash is immediately transferred to the bank account of the user. ",
  //     isCollapsed: true
  //   },
  // ];
  // public city: string = "";
  // public _title:string;

  public leads = new Leads();
  public basicDetailForm: FormGroup;
  public selectedCity: any;
  public cities: Cities[] = [];
  public serviceId: number = 0;
  public selectedEmployeeType: string = '';
  public employmentTypes: EmploymentType[] = new Array<EmploymentType>();
  public city: string = "";
  public _title: string = '';
  public isNavToggle: boolean = false;
  public documentMasters: DocumentMasters[] = new Array<DocumentMasters>();
  public customFieldForm!: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private commonService: CommonService,
    private toastrService: ToastrService,
    private leadService: LeadService,
    private globalService: GlobalService,
    private meta: Meta,
    private title: Title,
    private route: ActivatedRoute,
    @Inject(PLATFORM_ID) public platformId: object,
    private spinnerService: NgxSpinnerService,
    private linkService: LinkService
  ) {
    this.linkService.createLinkForCanonicalURL();
    let sub = this.route.params.subscribe(async (params) => {
      this.city = params['city'] ? params['city'] : '';
      if (this.city) {
        if (isPlatformBrowser(this.platformId))
          sessionStorage.setItem("selectedCity", this.city);
      }
    });
    let cityList;
    if (isPlatformBrowser(this.platformId))
      cityList = sessionStorage.getItem("cityList");
    let isCityAvailable = false;
    if (cityList) {
      let cityArray = JSON.parse(cityList) as string[];
      isCityAvailable = cityArray.findIndex(c => c == this.city.toLowerCase()) > -1;
    }

    this._title = `Apply for credit card in ` + this.city + `, pay any utility bills or buy any appliances. Manage your daily expenses easily.`
    this.route.snapshot.data['title'] = this._title;
    this.title.setTitle(this.route.snapshot.data['title']);
    this.meta.updateTag({
      name: 'description', content: `How to apply for credit card in easy and quick way. We offer you with credit card apply online feature. Ssubmit your credit card application in just few steps. Enjoy secure transactions, anytime and anywhere in ` + this.city
    });
    this.meta.updateTag({
      name: 'author', content: `Credit`
    });
    this.meta.updateTag({
      name: 'og:locale', property: "og:locale", content: `en_US`
    });
    this.meta.updateTag({
      name: 'og:title', property: "og:title", content: `Apply for credit card in ` + this.city + `, pay any utility bills or buy any appliances. Manage your daily expenses easily.`
    });
    this.meta.updateTag({
      name: 'og:description', property: "og:description", content: `How to apply for credit card in easy and quick way. We offer you with credit card apply online feature. Ssubmit your credit card application in just few steps. Enjoy secure transactions, anytime and anywhere in ` + this.city
    });
    this.meta.updateTag({
      name: 'og:url', property: "og:url", content: `https://credit.nsserver.in`
    });
    this.meta.updateTag({
      name: 'og:site_name', property: "og:site_name", content: `Credit`
    });
    this.meta.updateTag({
      name: 'og:type', property: "og:type", content: `Website`
    });
    this.meta.updateTag({
      name: 'og:image', property: "og:image", content: `https://credit.nsserver.in/assets/img/logo/logo.webp`
    });
    this.meta.updateTag({
      'http-equiv': "X-UA-Compatible", content: "IE=edge"
    });
    this.meta.updateTag({
      name: 'copyright', content: `Copyright 2022, Credit`
    });
    this.meta.updateTag({
      name: 'robots', content: `index, follow`
    });
    this.meta.updateTag({
      name: 'Googlebot', content: `Index, Follow`
    });
    this.meta.updateTag({
      name: 'rating', content: `Safe For Kids`
    });
    this.meta.updateTag({
      name: 'tweeter:card', content: `compare & apply for business loan`
    });
    this.meta.updateTag({
      name: 'tweeter:title', content: `compare & apply for business loan`
    });
    this.meta.updateTag({
      name: 'tweeter:description', content: `How to apply for credit card in easy and quick way. We offer you with credit card apply online feature. Ssubmit your credit card application in just few steps. Enjoy secure transactions, anytime and anywhere in ` + this.city
    });
    this.meta.updateTag({
      name: 'tweeter:site', content: `Credit`
    });
    this.meta.updateTag({
      name: 'tweeter:image', content: `https://credit.nsserver.in/assets/img/logo/logo.webp`
    });

    this.basicDetailForm = formBuilder.group({
      'contactNo': [null, [Validators.required, Validators.minLength(10)]],
      'customerFullName': [null, [Validators.required]],
      'pincode': [null, [Validators.required, Validators.minLength(6)]],
      'cityName': [null, [Validators.required]],
      'employmentTypeId': [null, [Validators.required]],
      'income': [null, [Validators.required]],
      'panCardNo': [null, [Validators.required, Validators.pattern('[A-Z]{5}[0-9]{4}[A-Z]{1}')]],
    })
  }

  async ngOnInit() {
    // setTimeout(() => {
    //   this.isShow = false;
    // }, 1000);

    // this.cities = await this.commonService.getCitites();
    // this.selectedCity = [...this.cities];
    this.serviceId = this.commonService.getServiceId("Credit Card");
    // firebase.initializeApp(environment.firebase)
    // await this.getProfessionType();
    // this.setStep(0, 'initial')
    await this.getEmploymentType();
    await this.getDocumentMaster();
    if (this.documentMasters && this.documentMasters.length > 0) {
      this.customFieldForm = this.formBuilder.group({})
      for (let index = 0; index < this.documentMasters.length; index++) {
        if (this.documentMasters[index].allowDocumentField) {
          this.customFieldForm.addControl(this.documentMasters[index].documentFieldName, this.formBuilder.control(''));
        }
      }
    }
  }

  public async getDocumentMaster() {
    try {
      let res = await this.globalService.getDocumentMaster();
      if (res && res.status == 200) {
        this.documentMasters = res.recordList;
      }
    } catch (error: any) {
      this.toastrService.error(error)
    }
  }
  // public async getProfessionType() {
  //   try {
  //     let res = await this.globalService.getProfessionTypes();
  //     if (res && res.status == 200) {
  //       this.professionTypes = res.recordList;
  //     }
  //   } catch (error: any) {
  //     this.toastrService.error(error);
  //   }
  // }

  // //region getOtp
  // public getOtp() {
  //   this.isOtpInput = true;
  //   this.spinnerService.show();
  //   // this.basicDetailForm.controls['contactNo'].setValue(this.contactForm.value.contactNo);
  //   // this.isVerifyOtp = false;
  //   // this.isPersonalDetailForm = true;
  //   // this.isOtpInput = true;
  //   this.reCaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', { size: 'invisible' })
  //   firebase.auth().signInWithPhoneNumber('+91' + this.contactForm.value.contactNo, this.reCaptchaVerifier).then((confirmationResult) => {
  //     if (confirmationResult && confirmationResult.verificationId) {
  //       this.verify = JSON.parse(JSON.stringify(confirmationResult.verificationId));
  //       this.isOtpInput = true;
  //       this.spinnerService.hide();
  //     }
  //   }).catch((error) => {
  //     //alert(error.message);
  //     this.spinnerService.hide();
  //     this.toastrService.error(error.message, "Firebase");
  //     setTimeout(() => {
  //       window.location.reload();
  //     }, 5000);
  //   });
  // }

  // public onOtpChange(otpCode: any) {
  //   this.otp = otpCode;
  // }

  // public handleClick() {
  //   this.isVerifyOtp = false;
  //   this.spinnerService.show();
  //   // this.basicDetailForm.controls['contactNo'].setValue(this.contactForm.value.contactNo);
  //   // this.isVerifyOtp = false;
  //   // this.isPersonalDetailForm = true;
  //   // this.getLeadsByContactNo();
  //   var credential = firebase.auth.PhoneAuthProvider.credential(this.verify, this.otp);
  //   firebase.auth().signInWithCredential(credential)
  //     .then((response) => {
  //       this.isVerifyOtp = false;
  //       //this.isShow = true;
  //       this.spinnerService.hide();
  //       this.getLeadsByContactNo();
  //       //this.isShow = false;
  //       this.isPersonalDetailForm = true;
  //       this.basicDetailForm.controls['contactNo'].setValue(this.contactForm.value.contactNo);
  //     }).catch((error) => {
  //       this.spinnerService.hide();
  //       //alert(error.message);
  //       this.commonService.showWarning();
  //     });
  // }
  // //#endregion

  // public onKey(value) {
  //   this.selectedCity = this.search(value);
  // }

  // public search(value: string) {
  //   let filter = this.cities.filter(item =>
  //     item.name.toLowerCase().includes(value.toLowerCase())
  //   );
  //   return [...filter];
  // }

  // public async getLeadsByContactNo() {
  //   try {
  //     this.leads = new Leads();
  //     let res = await this.globalService.getLeadsByContactNo(this.contactForm.value.contactNo, this.serviceId);
  //     if (res && res.status == 200) {
  //       if (res.recordList && res.recordList.length > 0) {
  //         this.leads = res.recordList[0];
  //         if (res.recordList[0].pincode) {
  //           let data = await this.getCityByPincode(res.recordList[0].pincode);
  //         }
  //         this.basicDetailForm.setValue(
  //           {
  //             "contactNo": this.leads.contactNo,
  //             "loanAmount": this.leads.loanAmount ? this.leads.loanAmount : null,
  //             "customerFullName": this.leads.customerFullName,
  //             "pincode": this.leads.pincode ? this.leads.pincode : null,
  //             "cityName": this.cities.find((c:any) => c.id == this.leads.cityId),
  //             "professionTypeId": this.leads.professionTypeId ? this.leads.professionTypeId : null,
  //             "monthlyIncome": this.leads.monthlyIncome,
  //             "email": this.leads.email ? this.leads.email : null,
  //           }
  //         )
  //         // let id = this.employmentTypes.find((c:any) => c.name == "Self Employee")?.id
  //       }
  //     }
  //   } catch (error: any) {
  //     //this.isShow = false;
  //     let err = error;
  //     if (error && error.error && error.error.message) {
  //       err = error.error.message
  //     }
  //     this.toastrService.error(err, "Error");
  //   }
  // }

  // public async generateLead() {
  //  if(this.isAgreed){
  //   try {
  //     //this.isShow = true;
  //     if (this.leads.id) {

  //       let id = this.leads.id
  //       this.leads = this.basicDetailForm.value;
  //       this.leads.contactNo = this.contactForm.value.contactNo
  //       this.leads.serviceId = this.serviceId;
  //       this.leads.cityId = this.basicDetailForm.value.cityName.id;
  //       this.leads.id = id;
  //       this.leads.countryCode = "+91";
  //       let res = await this.leadService.updateLeads(this.leads);
  //       if (res && res.status == 200) {
  //         this.sucessReponse();
  //       }
  //     }
  //     else {

  //       this.leads = this.basicDetailForm.value;
  //       this.leads.contactNo = this.contactForm.value.contactNo
  //       this.leads.serviceId = this.serviceId;
  //       this.leads.cityId = this.basicDetailForm.value.cityName.id;
  //       let res = await this.leadService.insertLeads(this.leads);
  //       if (res && res.status == 200) {
  //         if (res.recordList && res.recordList.length > 0) {
  //           this.leads.id = res.recordList[0].id
  //           this.sucessReponse();
  //         }
  //       }
  //     }
  //     //this.isShow = false;
  //   } catch (error: any) {
  //     //this.isShow = false;
  //     let err = error;
  //     if (error && error.error && error.error.message) {
  //       err = error.error.message
  //     }
  //     this.toastrService.error(err, "Error");
  //   }
  // }
  // else {
  //   this.agreedmsg = "Please agree to our terms & Condition";
  // }
  // }

  // public setStep(n: any, initial?: string) {
  //   if (initial) {
  //     this.faqs[0].isCollapsed = false;
  //   }
  //   else {
  //     if (this.faqs[n].isCollapsed == false) {
  //       this.faqs[n].isCollapsed = true;
  //     }
  //     else {
  //       for (let index = 0; index < this.faqs.length; index++) {
  //         if (this.faqs[index].isCollapsed == false) {
  //           this.faqs[index].isCollapsed = true;
  //         }
  //       }
  //       this.faqs[n].isCollapsed = false;
  //     }
  //   }
  // }

  public applyNow() {
    window.scroll({
      top: 0,
      left: 0,
      behavior: 'smooth'
    })
  }

  public async getEmploymentType() {
    try {
      let res = await this.globalService.getEmploymentType();
      if (res && res.status == 200) {
        this.employmentTypes = res.recordList;
      }
    } catch (error: any) {
      this.toastrService.error(error)
    }
  }


  public async detailForm() {
    if (this.basicDetailForm.valid) {
      try {
        this.spinnerService.show();
        this.leads = this.basicDetailForm.value;
        this.leads.serviceId = this.serviceId;
        this.leads.cityId = this.basicDetailForm.value.cityName.id;
        this.leads.countryCode = "+91";

        this.leads.employmentTypeId = this.basicDetailForm.value.employmentTypeId.id;
        if (this.basicDetailForm.value.employmentTypeId == "Self Employee") {
          this.leads.employmentTypeId = 2;
          this.leads.annualIncome = this.basicDetailForm.value.income
        }
        else if (this.basicDetailForm.value.employmentTypeId == "Salaried") {
          this.leads.monthlyIncome = this.basicDetailForm.value.income
          this.leads.employmentTypeId = 1;
        }
        if (this.documentMasters && this.documentMasters.length > 0) {
          for (let index = 0; index < this.documentMasters.length; index++) {
            if (this.documentMasters[index].allowDocumentField)
              this.documentMasters[index].documentData = this.customFieldForm.get(this.documentMasters[index].documentFieldName)?.value
          }
          this.leads.customfields = this.documentMasters;
        }
        let res = await this.leadService.insertLeads(this.leads);
        if (res && res.status == 200) {
          this.sucessReponse();
        }

        this.spinnerService.hide();
      } catch (error: any) {
        this.spinnerService.hide();
        let err = error;
        if (error && error.error && error.error.message) {
          err = error.error.message
        }
        this.toastrService.error(err, "Error");
      }
    }
    else {
      Object.keys(this.basicDetailForm.controls).forEach(key => {
        this.basicDetailForm.controls[key].markAsTouched();
      });
    }
  }

  public selectEmployeeType() {
    this.selectedEmployeeType = this.basicDetailForm.value.employmentTypeId.name
  }

  public sucessReponse() {
    //this.commonService.showSuccess();
    Swal.fire({
      icon: 'success',
      text: 'Your Credit Card inquiry is submitted successfully.',
      confirmButtonColor: '#0162e8'
    })
    this.leads = new Leads();
    this.basicDetailForm.reset();
    this.customFieldForm.reset();
  }

  public async getCityByPincode(event: KeyboardEvent) {
    this.cities = [];
    const value = (event.target as HTMLInputElement)!.value;
    if (value && value.length == 6) {
      try {
        let res = await this.globalService.getCityByPincode(value);
        if (res && res.recordList.length > 0) {
          this.cities = res.recordList;
          this.selectedCity = [...this.cities]
          if (this.selectedCity && this.selectedCity.length > 0)
            this.basicDetailForm.get('cityName')?.setValue(this.selectedCity[0])
        }
      } catch (error: any) {
        let err = '';
        if (error && error.error.message) {
          err = error.error.message
        }
        else if (error && error.message) {
          err = error.message
        }
        this.toastrService.error(error);
      }

    }
  }

  public keyPressAlphanumeric(event: KeyboardEvent) {
    var inp = String.fromCharCode(event.keyCode);
    if (/[a-zA-Z0-9 ]/.test(inp)) {
      // only alphabet a-z A-Z
      return true;
    } else {
      event.preventDefault();
      return false;
    }
  }

}