Macro.add('exp', {
	skipArgs : false,
	handler  : function () {
		try {
			let output = '';

			const pc = State.variables.pc;
			const [skillId, expGain, showWidget] = this.args;
			if(!expGain)
				return;

			let expGained = pc.skillExperienceGain(skillId, expGain);

			if(!showWidget)
				return;

			var svg = setup.makeSVG('svg',{viewBox:"0 0 100 8",class:"skillGainDisplay"});
			
			let skillDisplayId = 'skillDisplay'+rand(0,100000000); // TODO: obvious (rand)
			let skillData = Skill.get(skillId);

			let skillLevelAtStartOfDay = pc.skillLevelAtStartOfDay(skillId);
			let currentSkillLevel = pc.skillLevelRaw(skillId);
			let currentExp = pc.skill(skillId).experience;

			
			/**
			 * Experience Points before the new ones were added.
			 * @type {number}
			 */
			let expFrom:number = currentExp - expGained;

			let nextSkillLevel = currentSkillLevel + 1;

			let levelsToBeDisplayed = [];
			for(let i=skillLevelAtStartOfDay; i <= nextSkillLevel; i += 1)
				levelsToBeDisplayed.push([i,pc.skill_lvl2exp(skillId,i)]);
			
			output = `<div class="experienceGain" id="${skillDisplayId}"><div class="title">${skillData.label}</div>`;


			let expMin = levelsToBeDisplayed.first()[1];
			let expMax = levelsToBeDisplayed.last()[1];
			const offsetLeft = 3;
			const offsetRight = 3;

			const spanBetweenMinAndMax = expMax - expMin;
			const totalWidth = 100 - offsetLeft - offsetRight;

			const existingExperience_xLeft = offsetLeft;
			const existingExperiencePercentage = (expFrom - expMin) / spanBetweenMinAndMax;
			const existingExperienceBar_xRight = existingExperiencePercentage  * (totalWidth) + existingExperience_xLeft;
			const existingExperienceBar_width = existingExperienceBar_xRight - existingExperience_xLeft;

			const gainedExperience_xLeft = existingExperienceBar_xRight;
			const gainedExperiencePercentage = (expGained) / spanBetweenMinAndMax;
			const gainedExperienceBar_xRight = gainedExperiencePercentage  * (totalWidth) + gainedExperience_xLeft;
			const gainedExperienceBar_width = gainedExperienceBar_xRight - gainedExperience_xLeft;




			svg.appendChild(setup.makeSVG('rect',{x:offsetLeft,y:1,width:existingExperienceBar_width,height:4,class:"expFrom"}));
			svg.appendChild(setup.makeSVG('rect',{x:gainedExperience_xLeft,y:1,width:gainedExperienceBar_width,height:4,class:"expGain"}));

			let xGainText = (gainedExperience_xLeft + gainedExperienceBar_xRight) / 2;

			let expGainedText = "+"+Math.round(expGained);
			if(expGain != expGained)
				expGainedText += " ("+expGain+")";
			
			let currentExperience = expFrom + expGained;
			svg.appendChild(setup.makeSVG('text',{x:gainedExperienceBar_xRight,y:6,class:"levelLabel"},currentExperience));
			

			

			for(const levelToBeDisplayed of levelsToBeDisplayed){
				let exp = levelToBeDisplayed[1];
				let expRel = (exp - expMin) / (expMax - expMin);
				let x = expRel * (100 - offsetLeft - offsetRight) + offsetLeft;
				let levelLabel = 'Level '+levelToBeDisplayed[0];

				svg.appendChild(setup.makeSVG('line',{x1:x,y1:1,x2:x,y2:5,class:"levelLine"}));
				svg.appendChild(setup.makeSVG('text',{x:x,y:7,class:"levelLabel"},levelLabel));
				svg.appendChild(setup.makeSVG('text',{x:x,y:8,class:"levelLabel"},levelToBeDisplayed[1]));
			}

			svg.appendChild(setup.makeSVG('text',{x:xGainText,y:3.75,class:"expGainText"},expGainedText));

			output += svg.outerHTML + '</div>';

			jQuery(this.output).wiki(output);
		}
		catch (ex) {
			return this.error('Error: ' + ex.message);
		}
	}
});