console.log('Futurize loaded ..')
global.FuturizeComponent = {    
  init: function (css_selector) {
    var obj = document.querySelectorAll(css_selector);
    for (var i in obj) {
      if (obj.hasOwnProperty(i)) {
        //console.log(obj[i].getAttribute('data-futurize-component'));
        this.load_component(obj[i])
      }
    }
  },

  reload: function(css_selector) {
    document.querySelectorAll(css_selector).forEach(function(o) {
      o.innerHTML = ""
    })
  },

  load_component: function (obj) {
    var component_name = obj.getAttribute('data-futurize-component'),
        component_params = obj.getAttribute('data-futurize-params');

    if (obj.innerHTML.trim().length <= 0) {
      obj.innerHTML = 'Loading....';
    }

    var AUTH_TOKEN = document.querySelector('meta[name=csrf-token]').getAttribute('content');
    fetch('/home/loadComponent', {
      mode: 'same-origin',
      method: 'POST',
      dataType: 'json',
      body : JSON.stringify({ component_to_load: component_name, component_params: component_params }),
      headers:  {
        'Content-Type': 'application/json',
        'X-CSRF-Token' : AUTH_TOKEN,
      },
    })
    .then(response => response.json())
    .then(data => {
      obj.innerHTML = data.html
      obj.querySelectorAll("script").forEach(function(o) {
        eval(o.innerHTML)
      })
    }).catch((error) => {
      console.error('Error:', error);
    });
  }
}
document.addEventListener('DOMContentLoaded', function () {
  FuturizeComponent.init('[data-futurize-component]');
})