/**
 * Descrição do componente owl-carousel
 *
 */
define('owl-carousel-atracoes', ['Component'], function () {
  // Declarações
  var self = new Component('owl-carousel-atracoes')
  self.install = install
  self.elements = {
    // 'element': { event: function }
  }

  self.options = {};

  // Processamento
  self.bootstrap()
  return self;


  // Funções
  function install(base) {
    let form = document.querySelector('#options-form');
    let rangeAltura = document.getElementById('rangeAltura');
    let tooltip = document.getElementById('tooltipAltura');
    let itemCheckedInput = document.getElementById('itemChecked');

    //tooltip
    function obterValorCorrespondente(valorAtual) {
      switch (valorAtual) {
        case '1':
          return "Livre";
        case '2':
          return "80cm";
        case '3':
          return "90cm";
        case '4':
          return "1,10cm";
        case '5':
          return "1,20cm";
        case '6':
          return "1,30cm";
        default:
          return "Livre";
      }
      //emocoes da api

    }

    // para a req do pjax
    function obterValorParaRequisicaoPJAX(valorAtual) {
      switch (valorAtual) {
        case '1':
          return "-1";
        case '2':
          return "1-80";
        case '3':
          return "1-90";
        case '4':
          return "1-110";
        case '5':
          return "1-120";
        case '6':
          return "1-130";
        default:
          return "-1";

      }
    }

    // up posicao do tooltipsss
    function atualizarTooltip(value) {
      let valorCorrespondente = obterValorCorrespondente(value);
      tooltip.textContent = valorCorrespondente;

      var percent = (value - rangeAltura.min) / (rangeAltura.max - rangeAltura.min) * 100;
      var baseOffset = -17; // offset
      var additionalOffset = (value - 1) * -6; // Decrementa par ao range
      tooltip.style.left = `calc(${percent}% + ${baseOffset + additionalOffset}px)`;
    }

    // mudancas sliderr
    if (rangeAltura) {
      rangeAltura.addEventListener('input', function () {
        //bg do range
        var value = (this.value - this.min) / (this.max - this.min) * 100;
        this.style.background = 'linear-gradient(to right, #A9272D 0%, #A9272D ' + value + '%, white ' + value + '%, white 100%)';
        atualizarTooltip(this.value);
        let valorParaRequisicao = obterValorParaRequisicaoPJAX(this.value);
        itemCheckedInput.value = valorParaRequisicao;
      });
      atualizarTooltip(rangeAltura.value);
    }

    function setActualToActive(){
      let items = document.querySelectorAll('.owl-item');
        items.forEach(e => {
          let activeitem = e.classList.contains('active')
          if (activeitem) {
            e.children[0].classList.add('checked')
            e.children[0].children[1].checked = true;
          } else {
            e.children[0].classList.remove('checked');
            e.children[0].children[1].checked = false;
          }
        })
    }

    // init tool
    $('.owl-atracoes')
      .owlCarousel({
        loop: false,
        nav: true,
        items: 5,
        margin: 0,
        mouseDrag: false,
        navText: [
          '<div class="navmob-emocoes" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="21" viewBox="0 0 12 21" fill="none"><path d="M10 2L2 10.5L10 19" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg></div>',
          '<div class="navmob-emocoes" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="21" viewBox="0 0 12 21" fill="none"><path d="M2 19L10 10.5L2 2" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg></div>'
        ],
        autoplay: false,
        dots: false,
        responsive: {
          0: {
            items: 1
          },
          767: {
            items: 3
          },
          1200: {
            items: 5,
            dots: true
          }
        }
      })
      .on('dragged.owl.carousel', () => {
        setActualToActive();
        form.dispatchEvent(new Event('change', {bubbles: true, cancelable: false}));
      })
      .on('changed.owl.carousel', () => {
        window.setTimeout(() => {
          setActualToActive();
          form.dispatchEvent(new Event('change', {bubbles: true, cancelable: false}));
        }, 0);
      })

    var $this = $(this);
    var attr_options = $this.data('options');
    var options = null;

    if (attr_options) options = attr_options;
    if (typeof attr_options == 'string') options = self.options[attr_options];
    if (!options) options = self.options.default;
    $('.owl-carousel', $this).owlCarousel(options);
  }

})