import dti from 'dom-to-image';
import './Label.html';
import PDF from 'jspdf';
import { saveAs } from 'file-saver';
import swal from 'sweetalert2';
import dragula from 'dragula';
//import JsBarcode from 'JsBarcode';
import QRCode from '/imports/util/qrcode/qrcode';
//let QRCode = require('/imports/util/qrcode/qrcode.js');

import './PrintLabel.js';

console.log(QRCode);

//let {qrcode, svg2url} = require('pure-svg-code');
//let QRCode = require('qrcode-svg');

//******************************************************************
//** Creates printable labels for a roll style printer.
//******************************************************************

let PREFIX = "LabelMaker_";
let PX_PER_MM = 300 / 25.4;
let SCREEN_PX_PER_MM = 96 / 25.4;

//let formats = {
//	"8oz Label": {logo: true, text: true, barcode: true, width: 76.2, height: 50.8, labelClass: '8oz'},
//	"Barcode Only": {logo: false, text: false, barcode: true, width: 25, height: 25, labelClass: 'barcode'}
//};

Template.LabelMaker.onCreated(function() {
	this.labelWidth = new ReactiveVar(76);
	this.labelHeight = new ReactiveVar(50);
	
	this.title1 = new ReactiveVar("Strawberry");
	this.title2 = new ReactiveVar("w/ Espelette");
	this.ingredients = new ReactiveVar("*strawberry, sugar, *espelette");
	
	this.date = new ReactiveVar(19001);
	this.format = new ReactiveVar("oz8");
});
Template.LabelMaker.onRendered(function() {
	let template = this;
	
	//new QRCode(document.getElementById("qrcode"), {text: "1234567890", width: 60, height: 60});
});
Template.LabelMaker.onDestroyed(function() {
});
Template.LabelMaker.events({
	//'change .labelWidth': function(e, t) {
	//	let x = $(e.target).val();
	//
	//	t.labelWidth.set(!Number.isNaN(x) && x > 0 ? parseFloat(x) : 76);
	//},
	//'change .labelHeight': function(event, template) {
	//	let x = $(event.target).val();
	//
	//	t.labelHeight.set(!Number.isNaN(x) && x > 0 ? parseFloat(x) : 50);
	//},
	
	'change input[name="labelType"]': function(e, t) {
		t.format.set($(e.target).val());
	},
	
	'change .title1': function(e, t) {t.title1.set($(e.target).val());},
	'change .title1Font': function(e, t) {t.title1Font.set($(e.target).val());},
	'change .title1YOffset': function(e, t) {t.title1YOffset.set(parseInt($(e.target).val()));},
	
	'change .title2': function(e, t) {t.title2.set($(e.target).val());},
	'change .title2Font': function(e, t) {t.title2Font.set($(e.target).val());},
	'change .title2YOffset': function(e, t) {t.title2YOffset.set(parseInt($(e.target).val()));},
	
	'change .ingredients': function(e, t) {t.ingredients.set($(e.target).val());},
	'change .ingredientsFont': function(e, t) {t.ingredientsFont.set($(e.target).val());},
	'change .ingredientsYOffset': function(e, t) {t.ingredientsYOffset.set(parseInt($(e.target).val()));},
	
	'change .date': function(e, t) {t.date.set(parseInt($(e.target).val()));},
	'click .preview': function(event, template) {
		let _this = template;
		let format = _this.format.get();
		let title1 =_this.title1.get();
		let title2 =_this.title2.get();
		let ingredients =_this.ingredients.get();
		let date =_this.date.get();
		let params = {format, title1, title2, ingredients, date};
		
		window.open('/PrintLabel?' + $.param(params));
	},
	'click .print': function(event, template) {
		let _this = template;
		let format = _this.format.get();
		let title1 =_this.title1.get();
		let title2 =_this.title2.get();
		let ingredients =_this.ingredients.get();
		let date =_this.date.get();
		
		//console.log("Calling print with: " + JSON.stringify({format, title1, title2, ingredients, date}));
		
		Meteor.call('printLabels', format, title1, title2, ingredients, date, (error, result) => {
			if(error) {
				console.log(error);
			}
			else {
				const blob = new Blob([result], {type: 'application/pdf'});
				const link = document.createElement('a');
				link.href = window.URL.createObjectURL(blob);
				link.download = "labels.pdf";
				link.click();
			}
		});
		
	}
});
Template.LabelMaker.helpers({
	printLabelVars: function() {  //Called to pass the values for rendering a sample label on the client.  This mimics the same call to the same view when going to 'print' the label to PDF later.
		let t = Template.instance();
		
		return {
			format: t.format.get(),
			title1: t.title1.get(),
			title2: t.title2.get(),
			ingredients: t.ingredients.get(),
			date: t.date.get()
		}
	},
	title1: function() {return Template.instance().title1.get();},
	title2: function() {return Template.instance().title2.get();},
	ingredients: function() {return Template.instance().ingredients.get();},
	date: function() {return Template.instance().date.get();},
	labelWidth: function() {return Template.instance().labelWidth.get();},
	labelHeight: function() {return Template.instance().labelHeight.get();},
	
	labels: function() {
		return Session.get(PREFIX + "generatedLabels");
	},
	labelPxWidth: function() {
		return Math.floor(Template.instance().labelWidth.get() * PX_PER_MM);
	},
	labelPxHeight: function() {
		return Math.floor(Template.instance().labelHeight.get() * PX_PER_MM);
	},
	labelPxWidthActual: function() {
		return Math.floor(Template.instance().labelWidth.get() * SCREEN_PX_PER_MM);
	},
	labelPxHeightActual: function() {
		return Math.floor(Template.instance().labelHeight.get() * SCREEN_PX_PER_MM);
	}
});