import { Inject, Component, OnInit, ViewEncapsulation} from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

import { LanguageService } from '../language.service';
import { LanguageData } from '../language.model';

var QRCode = require('easyqrcodejs');

@Component({
  selector: 'app-receipt-qr',
  templateUrl: './receipt-qr.component.html',
  styleUrls: ['./receipt-qr.component.css']
})
export class ReceiptQRComponent implements OnInit {
	receiptUrl: SafeUrl;
	codeString: string = '';
  // -------------------------------------
  //
  // Language Support
  //
  vE = {
		receiptqrScanReceipt : '',
		receiptqrCloseBtn : ''
	}	
  //
	constructor(
		private languageService : LanguageService,
		private dialogRef: MatDialogRef<ReceiptQRComponent>,
		private sanitizer: DomSanitizer,
		@Inject(MAT_DIALOG_DATA) public data: { order: string}
	) {
		this.codeString = `https://zgo.cash/receipt/${data.order}`;
		this.receiptUrl = this.sanitizer.bypassSecurityTrustUrl(this.codeString);
	}

  ngOnInit(): void {
		var qrcode = new QRCode(document.getElementById("receipt-qr"), {
			text: this.codeString,
			logo: "/assets/zgo-prp.png",
			logoWidth: 80,
			logoHeight: 80
		});
		this.chgUILanguage();
  }

  close() {
	  this.dialogRef.close(true);
  }

  chgUILanguage(){
      console.log('RECEIPTQR.chgUILanguage Called ');
      this.languageService.getViewElements('receiptqr').subscribe(
        		response => { 
              console.log('Received >> ', response );
              console.log('Language Code : ', response.language);
              console.log('Component Name : ',response.component);
              console.log('Language data : ',response.data);
 
							this.vE.receiptqrScanReceipt = response.data.receiptqr_scan_receipt;
							this.vE.receiptqrCloseBtn = response.data.receiptqr_close_btn;

          	},
              error  => { console.log('Error >> ',error); }
        );
  }  

}