<script>
//alert('loaded')
function log(text) {
  console.log(text)
}

function docReady(fn) {
  //setTimeout(fn, 10000);
  //return
    // see if DOM is already available
    console.log("read?", document.readyState, document.readyState, $('[role=slider]').length)

    if (document.readyState === "complete" || document.readyState === "interactive" && $('[role=slider]').length) {
        // call on next available tick
       return setTimeout(fn, 200);
    } else {
       return setTimeout(function() {
         log("not ready")
         docReady(fn)
       }, 200);
       //document.addEventListener("DOMContentLoaded", fn);
    }
}

function setKeywordText($el, text) {
    // $el.val(text);
    // $el.html(text);
    // $el.click()
    $d = $(document)
    $el.trigger('focus')
    for (var i = 0; i < text.length; i++) {
      $d.trigger('keydown', {which: text.charCodeAt(0), key: 'A'.charCodeAt(0)})
      //
      $el.trigger('beforeinput', {which: 'A'.charCodeAt(0), key: 'A'.charCodeAt(0)})
      $d.trigger('keypress', {which: 'A'.charCodeAt(0), key: 'A'.charCodeAt(0)})
      $el.val($el.val() + 'A')
      $el.trigger('input', {which: 'A'.charCodeAt(0), key: 'A'.charCodeAt(0)})
      $el.trigger('change', {which: 'A'.charCodeAt(0), key: 'A'.charCodeAt(0)})
      $d.trigger('keyup', {which: 'A'.charCodeAt(0), key: 'A'.charCodeAt(0)})
    //
    }
    //$el.trigger('change')
    //$el.trigger('blur')

  return

    $el.trigger('keypress')

    $el.trigger('change')
}


window.getTotalQuantity = function () {
  log('getTotalQuantity')
  var $sliders = $('[role=slider]')
  var $input = $("input[aria-label=Cantidad]")
  var $textarea = $('textarea[data-hook=text-option-text-area]')

  var total = $sliders.reduce(function(i, n) {
    return n.getAttribute('aria-valuenow') * i
  }, quantity.val()) / 10000

  var rounded = Math.round( total * 10 ) / 10
  $input.val(rounded)

  var text = quantity.val()
         + " Baldosas adhesivas de "
         + $sliders[0].getAttribute('aria-valuenow')
         + "cm x "
         + $sliders[1].getAttribute('aria-valuenow')
         + "cm"

  setKeywordText($textarea, text);

  return rounded
}

document.body.onload = function() {
  quantity = $('[role=slider]').parent().parent().find('input')


  quantity.change( function() {
    log('quantity change')
    getTotalQuantity()
  })

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.type == "attributes") {
        log('slider change')
        console.log("attributes changed")
        getTotalQuantity()
      }
    });
  });
  $('[role=slider]').each( function(i, n) {
     observer.observe(n, {
       attributes: true //configure it to listen to attribute changes
     });
  })
}
</script>