// Global Variables
let goal_state = {
	animated_value: 0,
  	value: 0,
  	goal: parseInt('{goal_goal}'),
  	percentage: ('{goal_show_percentage}' == 'true'),
  	type: '{goal_type}',
  	reach: ('{goal_enable_reach}' == 'true'),
  	reach_text: '{goal_reach_text}',
  	reached: false
}
let tl = gsap.timeline();
let currency;
let fd;
const AMOUNTS = ['tip-session', 'tip-week', 'tip-month', 'tip-total', 'tip-goal', 'follower-goal', 'subscriber-goal', 'cheer-session', 'cheer-week', 'cheer-month', 'cheer-total', 'cheer-goal'];

// On Widget Load
window.addEventListener('onWidgetLoad', function(obj) {
  	// Get Current Goal Value
  	if (AMOUNTS.indexOf(goal_state.type) > -1) {
    	goal_state.value = obj.detail.session.data[goal_state.type].amount;
    } else {
    	goal_state.value = obj.detail.session.data[goal_state.type].count;
    }
	
  	// Assign Currency
  	currency = obj.detail.currency;
  
  	// Assign Field Data
  	fd = obj.detail.fieldData;
  
  	// Update Goal
  	let data = calcData();
  	animate_goal(data.percentage, data.value);
});

// On Session Update
window.addEventListener('onSessionUpdate', function(obj) {
	// Get Current Goal Value
  	if (AMOUNTS.indexOf(goal_state.type) > -1) {
    	goal_state.value = obj.detail.session[goal_state.type].amount;
    } else {
    	goal_state.value = obj.detail.session[goal_state.type].count;
    }
  
  	// Update Goal
  	let data = calcData();
  	animate_goal(data.percentage, data.value);
});

// ----------------
// HELPER FUNCTIONS
// ----------------

// Animate Goal
function animate_goal(goal_percentage, value) {
	// Animate Goal Clip
    tl.to(['.fill', '.label.clip', '.state.clip'], {
        clipPath: `polygon(0% 0%, ${goal_percentage}% 0%, ${goal_percentage}% 100%, 0% 100%)`,
        duration: 2,
        ease: 'Power3.easeInOut'
    });

    tl.to(goal_state, {
        animated_value: value,
        duration: 2,
        ease: 'Power3.easeInOut',
        modifiers: {
            animated_value: roundPartial(2)
        },
        onUpdate: function() {
          	if (goal_state.reached) return;
            if (goal_state.percentage) {
                $('.state').text(goal_state.animated_value.toFixed(1) + '%');
            } else {
                if (goal_state.type.startsWith('tip-')) {
                    $('.state').text(currency.symbol + goal_state.animated_value.toFixed(2) + ' / ' + currency.symbol + goal_state.goal);
                } else {
                    $('.state').text(goal_state.animated_value.toFixed(0) + ' / ' + goal_state.goal);
                }
            }
        },
      	onComplete: function() {
        	if (goal_state.reach == true && goal_state.goal <= goal_state.value && goal_state.reached == false) {
            	goal_state.reached = true;
              	$('.state').fadeOut(1000, function() {
                	$('.state').text(goal_state.reach_text).fadeIn(1000);
                });
            }
        }
    }, '<');
}

// Round Partial
function roundPartial(places) {
  let p = Math.pow(10, places || 0);
  return function(value) {
    return Math.round(value * p) / p;
  }
}

// Calculate New Data
function calcData() {
	let obj = {
    	percentage: 0,
      	value: 0
    };
  	
  	obj.percentage = goal_state.value / goal_state.goal * 100;
  
  	if (goal_state.percentage) {
    	obj.value = obj.percentage;
    } else {
    	obj.value = goal_state.value
    }
  
  	return obj;
}