var request = new XMLHttpRequest();

function cargarEstilos() {
  var api = '/cgi/api/styles';
  request.open("GET", api, true);
  request.send();
}

function listarEstilos(id, estilos, def) {
  var select = document.getElementById(id);
  
  for (var i=0; i < estilos.length; i++) {
    var opt = document.createElement('option');
    opt.value = estilos[i];
    opt.textContent = estilos[i];
    if (i == def) {
      opt.selected = true;
    }
    select.appendChild(opt);
  }
}

request.onreadystatechange = function() {
  if (request.readyState == 4) {
    var json = JSON.parse(request.responseText);
    if (json.state == "success") {
      listarEstilos('stylebbs', json.bbs_styles, json.bbs_styles_default);
      listarEstilos('styleib', json.ib_styles, json.ib_styles_default);
    }
  }
};

function cambiarModo(e) {
  var iframe = document.getElementById('examplebbs');
  var estilo = document.getElementById('stylebbs').value;

  if (this.dataset.view == '1') {
    iframe.addEventListener('load', mostrarEstilo);
    iframe.src = '/static/example/bbs2.html';
    this.value = 'Previsualizar board';
    this.dataset.view = '2';
  } else {
    iframe.src = '/static/example/bbs1.html';
    this.value = 'Previsualizar respuesta';
    this.dataset.view = '1';
  }
}

function mostrarEstilo(e) {
  var tipo = e.target.dataset.type;
  if (e.target.tagName.toLowerCase() == 'iframe') {
    var estilo = document.getElementById(('style'+tipo)).value;
    var iframe = e.target;
  } else {
    var estilo = e.target.value;
    var id = "example" + tipo;
    var iframe = document.getElementById(id);
  }

  var css = iframe.contentDocument.getElementById('css');
  var loc = "/static/css/";
  if (tipo == 'bbs') {
    loc += 'txt/';
  }

  css.href = loc + estilo.toLowerCase() + ".css";
  
  var key = 'weabot_style_' + tipo;
  var estilo = document.getElementById(('style'+tipo)).value;
  localStorage.setItem(key, estilo);
}

function cargariframe(tipo) {
  var iframe = document.createElement('iframe');
  iframe.id = 'example' + tipo;
  iframe.dataset.type = tipo;
  iframe.addEventListener('load', cargarDatos);
  iframe.src = '/static/example/' + tipo + '1.html';
  var div = document.getElementById("desc" + tipo);
  div.appendChild(iframe);
}

function cargarDatos(e) {
  var tipo = this.dataset.type;
  var key = 'weabot_style_' + tipo;
  if (localStorage.hasOwnProperty(key)) {
    var estilo = localStorage.getItem(key);
    document.getElementById(('style'+tipo)).value = estilo;
    mostrarEstilo(e);
    this.tabIndex = -1;
  }
  this.removeEventListener('load', cargarDatos);
}

function init(tipo) {
  cargariframe(tipo);
  document.getElementById('style'+tipo).addEventListener('change', mostrarEstilo);
}

function checkboxes() {
  var chk = document.getElementsByClassName("weabot-obj");
	for (var i=0; i < chk.length; i++) {
    chk[i].addEventListener("change", saveInput);
  }
}

function saveInput(e) {
  var key = e.target.id;
  weabot[key] = e.target.checked;
  localStorage.setItem("weabot", JSON.stringify(weabot));
}

function setInputs() {
  for (key in weabot) {
    var chk = document.getElementById(key);
    if (chk) {
      document.getElementById(key).checked = weabot[key];
    }
  }
}

function cargarFiltros() {
  var del = document.getElementsByClassName("f-remove");
  for (var i=0; i < del.length; i++) {
    del[i].addEventListener('click', quitarFiltro);
  }

  if (localStorage.hasOwnProperty("weabot-filtros")) {
    var lista = document.getElementById("filterlist");
    var filtros = JSON.parse(localStorage.getItem("weabot-filtros"));
    
    for (var i=0; i < filtros.length; i++) {
      nuevoFiltro(filtros[i].usar, filtros[i].patron, filtros[i].tipo);
    }
  } else {
    nuevoFiltro();
  }

  document.getElementById('newfilter').addEventListener('click', function(){ nuevoFiltro(); });
  document.getElementById('savefilters').addEventListener('click', guardarFiltros);
}

function nuevoFiltro(usar, patron, tipo) {
  if (arguments.length == 0) {
    var usar = true;
    var patron = '';
    var tipo = 0;
  } else {
    tipo = parseInt(tipo);
  }

  var lista = document.getElementById("filterlist");
  var fila = document.createElement("tr");
	var selected = ['', '', '', ''];
	selected[tipo] = ' selected="selected"';
  var html = '<td><input type="checkbox" name="f-enabled"'
    + (usar ? ' checked="checked"></td>' : '></td>');
  html += '<td><input type="text" name="f-pattern" value="' + patron + '"></td>';
  html += '<td><select class="f-type">'
  	+ '<option value="0"' + selected[0] + '>Mensaje</option>'
  	+ '<option value="1"' + selected[1] + '>ID</option>'
  	+ '<option value="2"' + selected[2] + '>Tripcode</option>'
  	+ '<option value="3"' + selected[3] + '>Nombre</option>'
  	+ '</select></td>';
	html += '<td><input type="button" name="f-remove" class="f-remove" value="x"></td>';
	fila.innerHTML = html;
  fila.children[3].firstChild.addEventListener('click', quitarFiltro);
  lista.appendChild(fila);
}

function quitarFiltro(e) {
  var lista = document.getElementById("filterlist");
  var delme = e.target.parentElement.parentElement;
  if (lista.children.length == 1) {
    nuevoFiltro();
  }
  delme.parentNode.removeChild(delme);
}

function guardarFiltros() {
  var f;
  var filtros = [];
  var tr = document.getElementById("filterlist").getElementsByTagName("tr");

  for (var i=0; i < tr.length; i++) {
    var pat = tr[i].children[1].firstChild.value.trim();
    if (pat != '') {
      f = {
        usar:   tr[i].children[0].firstChild.checked,
        patron: pat,
        tipo:   parseInt(tr[i].children[2].firstChild.value)
      }
      filtros.push(f);
    }
  }
  
  if (filtros.length > 0) {
    localStorage.setItem("weabot-filtros", JSON.stringify(filtros));
  } else {
    localStorage.removeItem("weabot-filtros");
  }
}

document.addEventListener("DOMContentLoaded", function() {
  if (localStorage.hasOwnProperty("weabot")) {
    weabot = JSON.parse(localStorage.getItem("weabot"));
  } else {
    weabot = { 
      localtime: false,
      qpreview: true,
      backlink: true,
      filters: false
    };
    localStorage.setItem("weabot", JSON.stringify(weabot));
  }
  setInputs();

  cargarEstilos();
  checkboxes();
  cargarFiltros();

  document.getElementById('switchview').addEventListener('click', cambiarModo);

  init('bbs');
  init('ib');
});