import "./object-property-text.html";
import { stageitemUpdateItemdata, stageitemUpdateItemstyle } from "../../../api/api.js";

Template.ObjectPropertyText.viewmodel({
	share:"stage", // shares all common stage properties from the Editor component
	// these are defalut properties for text style buttons.
	textStyleBold:false,
	textStyleItalic:false,
	textStyleUnderline:false,
	textStyleStrikethrough:false,
	textStyleLineover:false,
	textFontFill:"",
	textStroke:"",
	textStrokeWidth:0,

	selectedFont(){
	    // Return currently selected font of the selected text element on stage
		return this.selectedStageItemObj().style.fontFamily
	},
	textData(){
	    // Return current Text data for the selected text element on stage
		return this.selectedStageItemObj().itemData;
	},
	allTextFonts(){
	    // Get all fonts list and values and return them as an object to bind with ui state.
		const fontsArray = [{fontName:"Arial", fontVal:"Arial"}],
			fontNames = this.parent().parent().allWebFontsNames.value,
			fontVals = this.parent().parent().allWebFontsVals.value;
			_.each(fontNames, function(f,i){
				fontsArray.push({fontName:f, fontVal:fontVals[i]})
			});
		return fontsArray;
	},
	onRendered(){
	    // Set spectrum color picker default config.
		let spectrumDefaults = {
			preferredFormat: "hex",
			showInput: true,
			showPalette: true,
			showSelectionPalette: true,
			palette: [ ],
			localStorageKey: "spectrum.explainee.studio",
			clickoutFiresChange: true,
			showInitial: true,
			allowEmpty:true
		};
		// Initiate tabs, and color picker
		$("#textItemProperties").tabs();
		$("#textStyleFontColor").spectrum(spectrumDefaults);
		$("#textStroke").spectrum(spectrumDefaults);
	},
	events:{
		"click .tab"(e){
			e.preventDefault();
		},
		"click #textStyleTextUpdateBtn"(e,t){
			const newText = $("#textStyleTextVal").val(),
				id = this.selectedStageItemObj.value._id;
			stageitemUpdateItemdata(id, newText, () => {
				Meteor.setTimeout(() => {
					$("#"+id).trigger("click");
				},10);
			});
		},
		"keypress #textStyleTextVal"(e,t){
			if(e.which == 13) {
				const newText = $("#textStyleTextVal").val(),
				id = this.selectedStageItemObj.value._id;
				stageitemUpdateItemdata(id, newText, () => {
					Meteor.setTimeout(() => {
						$("#"+id).trigger("click");
					},10);
				});
			}
		},
		"change #textStyleFontFamily"(e,t){
			const newFontFamily = e.currentTarget.value,
			id = this.selectedStageItemObj.value._id;
			stageitemUpdateItemstyle(id, `fontFamily::${newFontFamily}`,() => {
				Meteor.setTimeout(() => {
					$("#"+id).trigger("click");
				},10);
			});
		},
		"click #textStyleBold"(e,t){
			const id = this.selectedStageItemObj.value._id;
			let fontWeight = this.selectedStageItemObj.value.style.fontWeight;
			if(fontWeight == "bold"){
				fontWeight = "normal";
			}
			else fontWeight = "bold";
			stageitemUpdateItemstyle(id, `fontWeight::${fontWeight}`, () => {
				Meteor.setTimeout(() => {
					$("#"+id).trigger("click");
				},10);
			});
		},
		"click #textStyleItalic"(e,t){
			const id = this.selectedStageItemObj.value._id;
			let fontStyle = this.selectedStageItemObj.value.style.fontStyle;
			(fontStyle == "italic") ? fontStyle = "normal" : fontStyle = "italic";
			stageitemUpdateItemstyle(id, `fontStyle::${fontStyle}`, () => {
				Meteor.setTimeout(() => {
					$("#"+id).trigger("click");
				},10);
			});
		},
		"click #textStyleUnderline"(e,t){
			const id = this.selectedStageItemObj.value._id;
			let textDecoration = this.selectedStageItemObj.value.style.textDecoration;
			(textDecoration == "underline") ? textDecoration = "none" : textDecoration = "underline" ;
			stageitemUpdateItemstyle(id, `textDecoration::${textDecoration}`, () => {
				Meteor.setTimeout(() => {
					$("#"+id).trigger("click");
				},10);
			});
		},
		"click #textStyleStrikethrough"(e,t){
			const id = this.selectedStageItemObj.value._id;
			let textDecoration = this.selectedStageItemObj.value.style.textDecoration;
			(textDecoration == "line-through") ? textDecoration = "none" : textDecoration = "line-through";
			stageitemUpdateItemstyle(id, `textDecoration::${textDecoration}`, () => {
				Meteor.setTimeout(() => {
					$("#"+id).trigger("click");
				},10);
			});
		},
		"click #textStyleOverline"(e,t){
			const id = this.selectedStageItemObj.value._id;
			let textDecoration = this.selectedStageItemObj.value.style.textDecoration;
			(textDecoration == "overline") ? textDecoration = "none" : textDecoration = "overline";
			stageitemUpdateItemstyle(id, `textDecoration::${textDecoration}`, () => {
				Meteor.setTimeout(() => {
					$("#"+id).trigger("click");
				},10);
			});
		},
		"change #textStyleFontColor"(e,t){
			let newColor = $("#textStyleFontColor").spectrum("get");
			const id = this.selectedStageItemObj.value._id;
			if(newColor){
				newColor =newColor.toHexString();
			}
			stageitemUpdateItemstyle(id, "fill::"+newColor);
		},

		"change #textStroke"(e,t){
			let newColor = $("#textStroke").spectrum("get");
			const id = this.selectedStageItemObj.value._id;
			if(newColor){
				newColor =newColor.toHexString();
			}
			stageitemUpdateItemstyle(id, `stroke::${newColor}`, () => {
				Meteor.setTimeout(() => {
					$("#"+id).trigger("click");
				},10);
			});
		},
		"mouseup #textStrokeWidth"(e,t){
			const strokeWidth = this.textStrokeWidth.value,
				id = this.selectedStageItemObj.value._id;
			stageitemUpdateItemstyle(id, `strokeWidth::${strokeWidth}`);
		}

	},
	autorun(){
	    // Autoruns on every change and updates the state to the text Element sidebar
		const selectedItemObj = this.selectedStageItemObj(),
			selectedFonObj = selectedItemObj.style;
		this.selectedFont(selectedFonObj.fontFamily);
		$("select").material_select();
		(selectedFonObj.fontWeight == "bold") ? this.textStyleBold(true) : this.textStyleBold(false);
		(selectedFonObj.fontStyle == "italic") ? this.textStyleItalic(true) : this.textStyleItalic(false);
        (selectedFonObj.textDecoration == "underline") ? this.textStyleUnderline(true) : this.textStyleUnderline(false);
        (selectedFonObj.textDecoration == "line-through") ? this.textStyleStrikethrough(true) : this.textStyleStrikethrough(false);
		(selectedFonObj.textDecoration == "overline") ? this.textStyleLineover(true) : this.textStyleLineover(false);
		this.textFontFill(selectedFonObj.fill);
		this.textStroke(selectedFonObj.stroke);
		$("#textStyleFontColor").spectrum("set",selectedFonObj.fill);
		$("#textStroke").spectrum("set",selectedFonObj.stroke);
		this.textStrokeWidth(selectedFonObj.strokeWidth);
	}
});