/*
 **
 ** Estrutura Html das tabs
 **
 ** <div class="flex js-tabs" id="tab-principal"></div> --- Pode ser posicionado em qualquer lugar
 ** <div data-tabs-id="tab-principal">
 **   <div class="hidden" data-tab="Título da Tab 1"></div>
 **   <div class="hidden" data-tab="Título da Tab 2"></div>
 **   <div class="hidden" data-tab="Título da Tab 3"></div>
 ** </div>
 **
 */

function isJson(stringValue) {
  var json;
  try {
    json = JSON.parse(stringValue);
  } catch (e) {
    return false;
  }
  return typeof json === 'object';
}

window.jqueryFuturaTabs = function() {
  var param = window.location.hash,
    setTabs = {};

  // Cria um objeto com os parametros da url
  if (param.length) {
    var str = param.substr(1, param.length);
    var json =
      '{"' +
      decodeURI(str)
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"')
        .replace(/\s/g, '') +
      '"}';

    if (isJson(json)) {
      setTabs = JSON.parse(json);
    }
  }

  $('.js-tabs').each(function(index, el) {
    var tabsId = $(this).attr('id'),
      tabs = '';

    if ($(this).find('.js-tab').length) {
      return;
    }
    // Monta e insere os controles das tabs
    $('[data-tabs-id="' + tabsId + '"] > [data-tab]').each(function(index, el) {
      tabs +=
        '<span data-tab-control="' +
        tabsId +
        '-' +
        index +
        '" class="text-small text-gray cursor-pointer horizontal-padding-medium vertical-padding-small tab js-tab">' +
        $(this).data('tab') +
        '</span>';
      $(this).attr('data-tab', tabsId + '-' + index);
    });
    $(this).append(tabs);
    // Mostra a tab ativa da url
    if (param.length) {
      $('#' + tabsId)
        .find('> .js-tab[data-tab-control="' + tabsId + '-' + setTabs[tabsId] + '"]')
        .addClass('active');
      $('[data-tab="' + tabsId + '-' + setTabs[tabsId] + '"]').removeClass('hidden');
    }
    // Mostra a primeira tab se não existir nenhuma ativa
    if (!$('#' + tabsId + ' > .js-tab').hasClass('active')) {
      $('#' + tabsId)
        .find(' > .js-tab:first-child')
        .addClass('active');
      $('[data-tab="' + tabsId + '-' + '0"]').removeClass('hidden');
    }
  });

  $('.js-tabs')
    .off('click', '.js-tab')
    .on('click', '.js-tab', function(event) {
      event.preventDefault();
      var tabsId = $(this)
        .closest('.js-tabs')
        .attr('id');
      // Oculta todas as tab
      $('#' + tabsId)
        .find('> .js-tab')
        .removeClass('active');
      $(this).addClass('active');
      // Mostra a tab clicada
      $('[data-tabs-id="' + tabsId + '"]')
        .find('> [data-tab]')
        .addClass('hidden');
      $('[data-tab="' + $(this).data('tab-control') + '"]').removeClass('hidden');
      // Adiciona o parametro na url da tab clicada
      setTabs[tabsId] = $(this).data('tab-control');
      setTabs[tabsId] = setTabs[tabsId].replace(tabsId + '-', '');
      history.replaceState(
        {},
        document.title,
        window.location.href.replace(window.location.hash, '') + '#' + $.param(setTabs)
      );
    });
};
$(document).ready(jqueryFuturaTabs);
