const fadeUp = {
  distance: '30%',
  interval: 50,
  origin: 'bottom'
};

ScrollReveal().reveal('h1', fadeUp);
ScrollReveal().reveal('h2', fadeUp);
ScrollReveal().reveal('#SliderUI', fadeUp);
ScrollReveal().reveal('.Knobs-Knob', fadeUp);


/* Starting with each of the possible content states because content is king. */

const states = [
  {
    headline: "Eliminate Processing Costs",
    knob_1_credit: 0,
    knob_2_debit: 0,
    knob_3_typed: 0,
    knob_4_flat: 0,
    knob_5_monthly: 0,
    knob_6_equipment: "All",
    description: "With our “Cash Discount” Program merchants display a sign reading that all indicated prices have a percentage- based cash discount already applied. Clients lose that cash discount when they pay with a card and our equipment can automatically add that lost cash discount as a line item on the receipt.",
    position: 0,
    knob_1_position: 0,
    knob_2_position: 0,
    knob_3_position: 0,
    knob_4_position: 0,
    knob_5_position: 0,
    knob_6_position: 3
  },
  {
    headline: "Credit, Rewards, & Corporate Cards",
    knob_1_credit: 1.09,
    knob_2_debit: 1.09,
    knob_3_typed: 2.39,
    knob_4_flat: .2,
    knob_5_monthly: 10,
    knob_6_equipment: "All Except: 2 in 1 & Virtual Terminal",
    description: "Merchants benefitting most from this plan swipe or insert almost all customer cards face to face, have a higher average transaction, don’t see many debit cards, and see a lot of rewards and/or corporate cards.",
    position: 1,
    knob_1_position: 1,
    knob_2_position: 2,
    knob_3_position: 1,
    knob_4_position: 1,
    knob_5_position: 1,
    knob_6_position: 2
  },
  {
    headline: "Mostly Debit / Check Cards",
    knob_1_credit: 1.58,
    knob_2_debit: .55,
    knob_3_typed: 2.88,
    knob_4_flat: .2,
    knob_5_monthly: 10,
    knob_6_equipment: "All Except: 2 in 1 & Virtual Terminal",
    description: "Best for merchants whose clients use debit cards most of the time, even without a PIN. A sandwich shop near a university would be a good example.",
    position: 2,
    knob_1_position: 2,
    knob_2_position: 1,
    knob_3_position: 3,
    knob_4_position: 1,
    knob_5_position: 1,
    knob_6_position: 2
  },
  {
    headline: "Each Average Sale < $20",
    knob_1_credit: 1.69,
    knob_2_debit: 1.69,
    knob_3_typed: 2.69,
    knob_4_flat: 0,
    knob_5_monthly: 10,
    knob_6_equipment: "All Except: 2 in 1 & Virtual Terminal",
    description: "If you’re a cafe selling $1 cups of coffee, wouldn’t you happily pay a half percent more to rid the $0.20 flat transaction fee? This plan is meant for merchants with typically small average transactions.",
    position: 3,
    knob_1_position: 3,
    knob_2_position: 3,
    knob_3_position: 2,
    knob_4_position: 0,
    knob_5_position: 1,
    knob_6_position: 2
  },
  {
    headline: "Simplicity & Startups",
    knob_1_credit: 2.69,
    knob_2_debit: 2.69,
    knob_3_typed: 3.69,
    knob_4_flat: 0,
    knob_5_monthly: 0,
    knob_6_equipment: "2 in 1 Bluetooth Reader",
    description: "Our ‘Pay-As-You- Go’ plan for those just getting their feet wet. If you aren’t sure what demand you’ll have, escaping any monthly fee with this plan is the way to go!",
    position: 4,
    knob_1_position: 4,
    knob_2_position: 4,
    knob_3_position: 4,
    knob_4_position: 0,
    knob_5_position: 0,
    knob_6_position: 1
  },
  {
    headline: "No Face to Face Transactions",
    knob_1_credit: -1,
    knob_2_debit: -1,
    knob_3_typed: 1.64,
    knob_4_flat: .25,
    knob_5_monthly: 15,
    knob_6_equipment: "Online Methods",
    description: "This is for merchants who either key every card number in themselves or their clients do it directly. It can integrate independently into your website, a shopping cart you already have, emailed invoices, virtual terminals, and more.",
    position: 5,
    knob_1_position: 0,
    knob_2_position: 0,
    knob_3_position: 0,
    knob_4_position: 0,
    knob_5_position: 0,
    knob_6_position: 0
  }
];

/* Using data above, use slider to set state. */

const Slider = document.getElementById('Slider');
const Knob = document.querySelector('.Knob');

const updateSliderAndKnobs = function (newValues) {
  document.getElementById('SliderUI-Needle').style.left = (newValues.position * 57) +'px';
  document.getElementById('SliderUI-Headline').innerHTML = newValues.headline;
  document.querySelector('.Knob-Selection')
  /* Loop through newValues. */
  Object.keys(newValues).forEach(function (value) {
    /* Select each knob component & pass value. */
  });
  const Knob1 = document.getElementById('Knobs-1');
  const Knob2 = document.getElementById('Knobs-2');
  const Knob3 = document.getElementById('Knobs-3');
  const Knob4 = document.getElementById('Knobs-4');
  const Knob5 = document.getElementById('Knobs-5');
  const Knob6 = document.getElementById('Knobs-6');

  /* Update red values above each knob. */
  interpolate_number(Knob1.querySelector('.interpolate'), newValues.knob_1_credit.toFixed(2));
  interpolate_number(Knob2.querySelector('.interpolate'), newValues.knob_2_debit.toFixed(2));
  interpolate_number(Knob3.querySelector('.interpolate'), newValues.knob_3_typed.toFixed(2));
  interpolate_number(Knob4.querySelector('.interpolate'), newValues.knob_4_flat.toFixed(2));
  interpolate_number(Knob5.querySelector('.interpolate'), newValues.knob_5_monthly.toFixed(2));
  Knob6.querySelector('.Knob-Value').innerHTML = newValues.knob_6_equipment;

  /* Update white selection dot on each knob. */
  Knob1.querySelector('.Knob-Selection').style.transform = 'rotate('+ (newValues.knob_1_position * 45) +'deg)';
  Knob2.querySelector('.Knob-Selection').style.transform = 'rotate('+ (newValues.knob_2_position * 45) +'deg)';
  Knob3.querySelector('.Knob-Selection').style.transform = 'rotate('+ (newValues.knob_3_position * 45) +'deg)';
  Knob4.querySelector('.Knob-Selection').style.transform = 'rotate('+ (newValues.knob_4_position * 45) +'deg)';
  Knob5.querySelector('.Knob-Selection').style.transform = 'rotate('+ (newValues.knob_5_position * 45) +'deg)';
  Knob6.querySelector('.Knob-Selection').style.transform = 'rotate('+ (newValues.knob_6_position * 45) +'deg)';
};

function interpolate_number (selector, value) {
  // for n/a values
  if (value < 0) { selector.textContent = 'N/A '; }
  
  // for all other numerical values
  else {
    if (selector.textContent === 'N/A ') {
      selector.textContent = '0.00';
    }

    d3.select(selector)
      .transition()
      .duration(400)
      .tween('interpolate_number', function () {
        var current =+ this.textContent;
        var interpolator = d3.interpolateNumber(current, value);
        return function (t) {
          this.textContent = interpolator(t).toFixed(2);
        };
      });
  }
}

// $.getJSON('data.js', function (data) {
//   states = data;
//   Slider.max = states.length - 1;
//   updateSliderAndKnobs(states[0]);
// });
Slider.max = states.length - 1;
updateSliderAndKnobs(states[0]);
Slider.oninput = function () {
  // console.log('Slider.oninput', Slider.value);
  updateSliderAndKnobs(states[Slider.value]);
}

document.onkeydown = function (e) {
  if (e.which === 37) {
    Slider.stepDown();
    Slider.oninput();
  }
  if (e.which === 39) {
    Slider.stepUp();
    Slider.oninput();
  }
};
document.getElementById('SliderUI-Prev').onclick = function (e) {
  Slider.stepDown();
  Slider.oninput();
}
document.getElementById('SliderUI-Next').onclick = function (e) {
  Slider.stepUp();
  Slider.oninput();
}

console.log('%c ███ Hi Kyle! 👋🏼', 'color: #06f');