(function () {

  // CONFIG
  const EFFECTIVE_RATE = 3
  const SERVICE_FEE = 19.95
  const IDENTIFIER = "#savings-calc"

  // DOM
  const container = document.getElementById('savings-calc-container')

  // DATA
  const processingData = []

  // Build DOM
  function renderCalculator() {
    const headingHTML = `
      <div class="pricing-calc__header-container">
        <h4 class="pricing-calc__heading">Calculate Your Savings</h4>
        <p class="pricing-calc__subheading">How much can Cash Discount save your business in card processing fees? Slide the bar to the approximate amount of credit card volume you process each month. See your effective rate, monthly, and annual savings on the right. If you don't know how much you are paying for monthly processing fees leave the bar at zero.</p>
      </div>`

    const calculatorHTML = `
    <div id="savings-calc" class="pricing-calc-container">
      <div class="pricing-calc">
        <div class="calc-range">
          <span class="calc-range__title">Monthly Processing Volume</span>
          <div>
            <output for="volume">$17,000.00</output>
            <input type="range" name="volume" id="volume" value="17000" min="0" max="250000" step="500">
            <div class="calc-range__labels">
              <label id="priceStart" for="price">$0</label>
              <label id="priceEnd" for="price">$250,000</label>
            </div> 
          </div>
        </div>

        <div class="calc-range">
          <span class="calc-range__title">Monthly Processing Fees</span>
          <div>
            <output for="fees">0</output>
            <input type="range" name="fees" id="fees" value="0" min="0" max="8000" step="50">
            <div class="calc-range__labels">
              <label id="priceStart" for="price">$0</label>
              <label id="priceEnd" for="price">$8,000</label>
            </div>
            <div class="calc-helper-text">If you have a credit card processing statement enter your processing fees here.</div> 
            <div class="calc-footer">
              Powered by <a href="https://www.paystri.com/" target="_blank"><img src="https://www.paystri.com/hubfs/Paystri%20Logos/PaystriLogoCMYK-1.png" alt="Paystri Logo"></a>
            </div>
          </div>
        </div>
      </div>

      <div class="dashboard">
        <div>
          <div class="dashboard__label">Your Effective Rate</div>
          <div id="rate" class="dashboard__result">3.00%</div>
        </div>
        <div>
          <div class="dashboard__label">Monthly Savings</div>
          <div id="monthly" class="dashboard__result">$0</div>
        </div>
        <div>
          <div class="dashboard__label">Annual Savings</div>
          <div id="annual" class="dashboard__result">$0</div>
        </div>
          <a class="savings-calc__btn" href="https://insights.paystri.com/pos-guys-cash-discount" target="_blank">
            Start Saving
          </a>
      </div>
    </div>
    `

    container.insertAdjacentHTML('afterbegin', headingHTML)
    container.insertAdjacentHTML('beforeend', calculatorHTML)

    addRangeEventListeners()

    console.log('calculator built, v2')
  }

  function addRangeEventListeners() {
    const rangeSliderEls = document.querySelectorAll(`${IDENTIFIER} [type="range"]`);
    console.log('range sliders', rangeSliderEls)

    rangeSliderEls.forEach(range => {
      handleRangeChange(range)
      getProcessingData(range)
      renderDashboardResults()
    })
    
    rangeSliderEls.forEach(range => {
      range.addEventListener('input', (e) => {
        setRangeDisplay(e.target)
        getProcessingData(range)
        renderDashboardResults()
      })
    })
  }

  const handleRangeChange = (range) => {
    let isChanging = false;
    console.log(range , isChanging)

    const setCSSProperty = () => {
      const percent =
        ((range.value - range.min) /
        (range.max - range.min)) *
        100;
      range.style.setProperty("--webkitProgressPercent", `${percent}%`);
    }

    // Set event listeners
    const handleMove = () => {
      if (!isChanging) return;
      setCSSProperty();
    };

    const handleUpAndLeave = () => isChanging = false;
    const handleDown = () => isChanging = true;

    range.addEventListener("mousemove", handleMove);
    range.addEventListener("mousedown", handleDown);
    range.addEventListener("mouseup", handleUpAndLeave);
    range.addEventListener("mouseleave", handleUpAndLeave);
    range.addEventListener("click", setCSSProperty);

    // Init input
    setCSSProperty();
  }

  function getProcessingData(range) {
    pushToArray(processingData, {name: range.name, value: range.value})
  }

  function setRangeDisplay(range) {
    const id = range.id 
    let value = formatter.format(range.value)
    const output = document.querySelector(`output[for="${id}"]`)
    output.innerText = value
  }

  function renderDashboardResults() {
    const monthlyDisplay = document.querySelector(`${IDENTIFIER} .dashboard #monthly`);
    const annualDisplay = document.querySelector(`${IDENTIFIER} .dashboard #annual`);
    const effectiveRateDisplay = document.querySelector(`${IDENTIFIER} .dashboard #rate`);

    const monthlySavings = getMonthlySavings()
    const annualSavings = getMonthlySavings() * 12 // get annual savings
    const effectiveRate = getEffectiveRate()
    
    monthlyDisplay.innerText = formatter.format(monthlySavings)
    annualDisplay.innerText = formatter.format(annualSavings)
    effectiveRateDisplay.innerText = `${effectiveRate.toFixed(2)}%`
  }

  function getEffectiveRate() {
    let volume = getObjValue(processingData, 'volume')
    let fees = getObjValue(processingData, 'fees')
    return volume == 0 || fees == 0 ? EFFECTIVE_RATE : (fees / volume) * 100
  }

  function getMonthlySavings() {
    let monthlySavings = 0
    let volume = getObjValue(processingData, 'volume')
    monthlySavings = volume * (getEffectiveRate() / 100) - SERVICE_FEE
    return monthlySavings < 0 ? 0 : monthlySavings
  }

  // UTILITIES
  function getObjValue(obj, key) {
    let value = obj.find(({name}) => name === key)?.value
    value = typeof value == 'undefined' ? 0 : value // if slider hasn't been used, set value to 0
    return value
  }

  function pushToArray(arr, obj) {
    const index = arr.findIndex((e) => e.name === obj.name);

    if (index === -1) {
        arr.push(obj);
    } else {
        arr[index] = obj;
    }
  }

  /* format currency */
  const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  });


  // init
  function init() {
    console.log('init calc');
    renderCalculator()
  }

  window.addEventListener('DOMContentLoaded', () => { 
    init()
  })


})();