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 { NotifierService } from '../notifier.service';

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

var QRCode = require('easyqrcodejs');
var URLSafeBase64 = require('urlsafe-base64');
var Buffer = require('buffer/').Buffer;

@Component({
	selector: 'app-scan',
	templateUrl: './scan.component.html',
	styleUrls: ['./scan.component.css']
})

export class ScanComponent implements OnInit{
	address: string;
	total: number;
	session: string;
	codeString: string = '';
	pay: boolean = false;
	zcashUrl: SafeUrl;
	// -------------------------------------
	//
	// Language Support
	//
	vE = {
		scanScanqrCode : '',
		scanTextInfo : '',
		scanMemoSent : '',
		scanCloseBtn : '',
		scanUseThis : '',
		scanWalletLink : '',
		scanCopyAddress : '',
		scanCopyAmount : '',
		scanCopyMemo : '',
		scanNotservClose : '',
		scanNotservError : '',
		scanFuncNotavail : '',
		scanCopyError : '',
		scanFailPayment : '',
		scanCantScan : '',
		scanOrButton : ''
	}	
	//
	constructor(
		private languageService : LanguageService,
		private dialogRef: MatDialogRef<ScanComponent>,
		private sanitizer: DomSanitizer,
		@Inject(MAT_DIALOG_DATA) public data: { totalZec: number, addr: string, session: string, pay: boolean},
		private notifierService : NotifierService ) {
	
		this.address = data.addr;
		this.total = data.totalZec;
		this.session = data.session;
		this.pay = data.pay;
		if (this.pay) {
			this.codeString = `zcash:${this.address}?amount=${this.total.toFixed(8)}&memo=${URLSafeBase64.encode(Buffer.from('ZGOp::'.concat(this.session)))}`; 
		} else {
			this.codeString = `zcash:${this.address}?amount=${this.total.toFixed(8)}&memo=${URLSafeBase64.encode(Buffer.from('ZGO::'.concat(this.session)))}`; 
		}
		this.zcashUrl = this.sanitizer.bypassSecurityTrustUrl(this.codeString);
	}

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

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

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

	copyAddress() {
		if (!navigator.clipboard) {
			alert("Copy functionality not supported");
			this.notifierService
			    .showNotification( this.vE.scanFuncNotavail,
			     	this.vE.scanNotservClose,
			    	'error',
			    	this.vE.scanNotservError);
		}
		try {
			navigator.clipboard.writeText(this.address);
		} catch (err) {
			console.error("Error", err);
		}
	}

	copyAmount() {
		if (!navigator.clipboard) {
//			alert("Copy functionality not supported");
			this.notifierService
			    .showNotification( this.vE.scanFuncNotavail ,
			     	this.vE.scanNotservClose,
			    	'error',
			    	this.vE.scanNotservError);
		}
		try {
			navigator.clipboard.writeText(this.total.toString());
		} catch (err) {
			this.notifierService
			    .showNotification(this.vE.scanCopyError,
			     	this.vE.scanNotservClose,
			    	'error',
			    	this.vE.scanNotservError);
//			console.error("Error", err);
		}
	}

	copyMemo() {
		if (!navigator.clipboard) {
//			alert("Copy functionality not supported");
			this.notifierService
			    .showNotification(this.vE.scanFuncNotavail ,
			     	this.vE.scanNotservClose,
			    	'error',
			    	this.vE.scanNotservError);
		}
		try {
			if (this.pay) {
				navigator.clipboard.writeText("ZGOp::" + this.session);
			} else {
				navigator.clipboard.writeText("ZGO::" + this.session + " Reply-To:<your z-addr>");
			}
		} catch (err) {

			this.notifierService
			    .showNotification(this.vE.scanFailPayment,
			     	this.vE.scanNotservClose,
			    	'error',
			    	this.vE.scanNotservError);
//			console.error("Error", err);
		}
	}

	chgUILanguage(){
	  console.log('SCAN.chgUILanguage Called ');
	  this.languageService.getViewElements('scan').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.scanScanqrCode = response.data.scan_scanqr_code;
				this.vE.scanTextInfo = response.data.scan_text_info;
				this.vE.scanMemoSent = response.data.scan_memo_sent;
				this.vE.scanCloseBtn = response.data.scan_close_btn;
				this.vE.scanUseThis = response.data.scan_use_this;
				this.vE.scanWalletLink = response.data.scan_wallet_link;
				this.vE.scanCopyAddress = response.data.scan_copy_address;
				this.vE.scanCopyAmount = response.data.scan_copy_amount;
				this.vE.scanCopyMemo = response.data.scan_copy_memo;
				this.vE.scanNotservClose = response.data.scan_notserv_close;
				this.vE.scanNotservError = response.data.scan_notserv_error;
				this.vE.scanFuncNotavail = response.data.scan_func_notavail;
				this.vE.scanCantScan = response.data.scan_cant_scan;
				this.vE.scanOrButton = response.data.scan_or_button;

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

}