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.trim().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', cargarEstilo);
  iframe.src = '/static/example/' + tipo + '1.html';
  var div = document.getElementById("desc" + tipo);
  div.appendChild(iframe);
}

function cargarEstilo(e) {
  var tipo = this.dataset.type;
  var key = 'weabot_style_' + tipo;

  if (localStorage.hasOwnProperty(key)) {
    var estilo = localStorage.getItem(key).trim();

    if (estilo != '') {
      document.getElementById(('style'+tipo)).value = estilo;
    } else {
      localStorage.removeItem(key);
      return;
    }

    mostrarEstilo(e);
    this.tabIndex = -1;
  }

  this.removeEventListener('load', cargarEstilo);
}

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

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");
  }
}

function importar() {
  var url = location.href;
  if (url.includes('#import=')) {
    var data = location.href.split('#import=')[1];
    var conf = JSON.parse( decodeURIComponent(data) );
    for (var c in conf) {
      localStorage.setItem(c, conf[c]);
    }
  }
}

function exportar(e) {
  var keys = Object.keys(localStorage);
  var conf = {};
  for (var i=0; i < keys.length; i++) {
    var value = localStorage.getItem(keys[i]);
    if (value.trim() != '') {
      conf[keys[i]] = value;
    }
  }
  var data = encodeURIComponent( JSON.stringify(conf) );
  var box = document.getElementById('config-url');
  if (!box) {
    var box = document.createElement('input');
    box.id = 'config-url';
    box.type = 'text';
    box.readOnly = true;
    e.target.parentElement.appendChild(box);
    var div = document.createElement('div');
    div.textContent = 'Copia y pega el enlace generado en un navegador para importar tu configuración.';
    e.target.parentElement.appendChild(div);
  }
  box.value = location.href.split('#')[0] + '#import=' + data;
  box.focus();
  box.select();
}

document.addEventListener("DOMContentLoaded", function() {
  importar();

  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();

  checkboxes();
  cargarFiltros();

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

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