//Espera a que la variable data este definida, la primera variable;
function waitData(fn) {
  return function (data) {
    var _args = arguments;
    var _this = this;
    var wait = setInterval(function () {
      if (data) {
        clearInterval(wait);
        fn.apply(_this, _args);
      }
    }, 500);
  };
}

// Función para representar la gráfica de sunburst1
var renderSunburstLegend = waitData(function (data, container, graph) {
  function filaClick(id) {
    return function () {
      graph.logger.trigger("zoom", id);
    };
  }
  // Preparo un contenedor
  container = $(container);
  var wrapper = $("<div class='legend-wrapper'></div>");
  // Extraigo datos de la gráfica
  //var childrens = grafica.graph.data.children
  var childrens = data.children;
  if (childrens) {
    // Itera sobre los children generando filas
    for (var key in childrens) {
      var code = childrens[key].code;
      // console.log('Hijos:');
      // console.log(childrens[key]);
      var color = childrens[key].color;
      var text = childrens[key].name;
      var value = shortFormat(childrens[key].size);
      var fila = $("<li class='legend-entry' style='cursor:pointer'>");
      fila.on("click", filaClick(childrens[key].code));
      fila.append(
        $(
          "<span class='legend-color' style='width:1rem;height:1rem;background-color:" +
          color +
          ";'></span>"
        )
      );
      fila.append(
        $("<span class='legend-text' title=\"" + text + '">' + text + "</span>")
      );
      fila.append($("<span class='legend-value'>" + value + "</span>"));
      wrapper.append(fila);
    }
  } else if (typeof data.code === "undefined") {
    var color = grafica.graph.color(data.code);
    var text = data.name;
    var value = shortFormat(data.size);
    var fila = $("<li class='legend-entry' style='cursor:pointer'>");
    fila.on("click", filaClick(data.code));
    fila.append(
      $(
        "<span class='legend-color' style='width:1rem;height:1rem;background-color:" +
        color +
        ";'></span>"
      )
    );
    fila.append(
      $("<span class='legend-text' title=\"" + text + '">' + text + "</span>")
    );
    fila.append($("<span class='legend-value'>" + value + "</span>"));
    wrapper.append(fila);
  }
  // Inserta la gráfica
  container.html(wrapper);
});

function renderTreemapLegend(data, container, graph) {
  // Preparo un contenedor

  function filaClick(id) {
    return function () {
      graph.logger.trigger("zoomTo", id);
    };
  }

  container = $(container);
  var wrapper = $("<div class='legend-wrapper'></div>");
  // Extraigo datos de la gráfica
  //var childrens = grafica.graph.data.children
  if (data) {
    var childrens = data.children;
    if (childrens) {
      // Itera sobre los children generando filas
      for (var key in childrens) {
        var code = childrens[key].code;
        // console.log('Hijos:');
        // console.log(childrens[key]);
        var color = childrens[key].color;
        var text = childrens[key].name;
        var value = shortFormat(childrens[key].size);
        var fila = $("<li class='legend-entry' style='cursor:pointer'>");
        fila.on("click", filaClick(code));
        fila.append(
          $(
            "<span class='legend-color' style='width:1rem;height:1rem;background-color:" +
            color +
            ";'></span>"
          )
        );
        fila.append(
          $(
            "<span class='legend-text' title=\"" +
            text +
            '">' +
            text +
            "</span>"
          )
        );
        fila.append($("<span class='legend-value'>" + value + "</span>"));
        wrapper.append(fila);
      }
    } else {
      var color = data.color;
      var text = data.name;
      var code = data.code;
      var value = shortFormat(data.size);
      var fila = $("<li class='legend-entry' style='cursor:pointer'>");
      fila.on("click", filaClick(code));
      fila.append(
        $(
          "<span class='legend-color' style='width:1rem;height:1rem;background-color:" +
          color +
          ";'></span>"
        )
      );
      fila.append(
        $("<span class='legend-text' title=\"" + text + '">' + text + "</span>")
      );
      fila.append($("<span class='legend-value'>" + value + "</span>"));
      wrapper.append(fila);
    }
    // Inserta la gráfica
    container.html(wrapper);
  }
}

// Función para representar la gráfica de 'ejecucion'
function renderLineLegend(data, element, graph) {
  function filaClick(id) {
    return function () {
      graph.logger.trigger("select", id);
    };
  }
  // Selecciono los elementos
  var container = $(element);
  // Preparo un contenedor
  var wrapper = $("<div class='legend-wrapper'></div>");
  // Itera sobre los datos generando filas en la leyenda
  if (data && data[0] && Array.isArray(data[0].values)) {
    for (key in data) {
      var name = data[key].name;
      var color = data[key].color;
      var fila = $("<li class='legend-entry' style='cursor:pointer'></li>");
      fila.on("click", filaClick(name));
      fila.append(
        $(
          "<span class='legend-color' style='width:1rem;height:1rem;background-color:" +
          color +
          ";'></span>"
        )
      );
      fila.append(
        $("<span class='legend-text' title=\"" + name + '">' + name + "</span>")
      );
      wrapper.append(fila);
    }
    container.html(wrapper);
  } else if (data) {
    data.forEach(function (item) {
      var name = item.name;
      var color = item.color;
      var value = item.marker && item.marker.value;
      var fila = $("<li class='legend-entry' style='cursor:pointer'></li>");
      fila.on("click", filaClick(name));
      fila.append(
        $(
          "<span class='legend-color' style='width:1rem;height:1rem;background-color:" +
          color +
          ";'></span>"
        )
      );
      fila.append(
        $("<span class='legend-text' title=\"" + name + '">' + name + "</span>")
      );
      if (value >= 0)
        fila.append(
          $("<span class='legend-value'>" + shortFormat(value) + "</span>")
        );
      wrapper.append(fila);
    });
    container.html(wrapper);
  }
  // Inserta la gráfica
}

// Función para representar la gráfica de 'gastosx'
function renderCircularLegend(data, element, graph) {
  function filaClick(id) {
    return function () {
      graph.logger.trigger("select", id);
    };
  }
  // Selecciono los elementos
  var container = $(element);
  // Preparo un contenedor
  var wrapper = $("<div class='legend-wrapper'></div>");
  // Extraigo datos de la gráfica

  // Preparo los datos
  for (index in data) {
    var name = data[index].name;
    var color = data[index].color;
    var value = data[index].size;
    value = shortFormat(value);
    var fila = $(
      "<li class='legend-entry' style='cursor:pointer' style='cursor:pointer'></li>"
    );
    fila.append(
      $(
        "<span class='legend-color' style='width:1rem;height:1rem;background-color:" +
        color +
        ";'></span>"
      )
    );
    fila.append(
      $("<span class='legend-text' title=\"" + name + '">' + name + "</span>")
    );
    fila.append($("<span class='legend-value'>" + value + "</span>"));
    fila.on("click", filaClick(name));
    wrapper.append(fila);
  }
  // Inserta la gráfica
  container.html(wrapper);
}

function renderLegend(data, element, graph) {
  // Selecciono los elementos
  var container = $(element);
  // Preparo un contenedor
  var wrapper = $("<div class='legend-wrapper'></div>");
  // Extraigo datos de la gráfica

  // Preparo los datos
  for (index in data) {
    var name = data[index].name;
    var color = data[index].color;
    var value = data[index].size;
    value = shortFormat(value);
    var fila = $("<li class='legend-entry'></li>");
    fila.append(
      $(
        "<span class='legend-color' style='width:1rem;height:1rem;background-color:" +
        color +
        ";'></span>"
      )
    );
    fila.append(
      $("<span class='legend-text' title=\"" + name + '">' + name + "</span>")
    );
    fila.append($("<span class='legend-value'>" + value + "</span>"));
    wrapper.append(fila);
  }
  // Inserta la gráfica
  container.html(wrapper);
}

function renderMapLegend(data, element, graph) {
  // Selecciono los elementos
  var container = $(element);
  // Preparo un contenedor
  var wrapper = $("<div class='legend-wrapper'></div>");
  // Extraigo datos de la gráfica

  // Preparo los datos
  if (graph) {
    var colors = graph.color.range();
    var intervals = graph.color.quantiles();
    for (let index = 0; index < colors.length; index++) {
      var color = colors[index];
      var name =
        index == 0
          ? "<" + numberFormat(intervals[0])
          : ">=" + numberFormat(intervals[index - 1]);
      var fila = $("<li class='legend-entry'></li>");
      fila.append(
        $(
          "<span class='legend-color' style='width:1rem;height:1rem;background-color:" +
          color +
          ";'></span>"
        )
      );
      fila.append(
        $("<span class='legend-text' title=\"" + name + '">' + name + "</span>")
      );
      wrapper.append(fila);
    }
  }
  // Inserta la gráfica
  container.html(wrapper);
}

function renderMapDataLegend(data, element, graph) {
  var wait;
  var call = function () {
    if (
      graph.data &&
      graph.data.length > 0 &&
      graph.data[0].properties &&
      typeof graph.data[0].properties.size !== "undefined"
    ) {
      clearInterval(wait);
      _renderMapDataLegend(graph.data, element, graph);
    } else if (!wait) {
      wait = setInterval(call, 500);
    }
  };
  call();
}

function diacritics(string) {
  var substitutions = [
    [/[áà]/gi, "a"],
    [/[éè]/gi, "e"],
    [/[íì]/gi, "i"],
    [/[óò]/gi, "o"],
    [/[úù]/gi, "u"]
  ];
  substitutions.forEach(function (sub) {
    string = string.replace(sub[0], sub[1]);
  });
  return string;
}

function _renderMapDataLegend(data, element, graph) {
  // Selecciono los elementos
  var container = $(element);
  container.html("");
  data = data.sort(function (a, b) {
    var textA = a.properties.nombre.toLowerCase();
    var textB = b.properties.nombre.toLowerCase();
    if (textA < textB) return -1;
    if (textA > textB) return 1;
    return 0;
  });
  // Preparo un contenedor
  var wrapper = $("<ul class='legend-wrapper'></ul>");
  var search = $(
    "<div class='ui icon fluid input' style='margin-bottom:.5em'><input type='text'><i class='search icon'></i></div>"
  );
  var input = search.find("input");
  var searchFunc = _.debounce(function (event) {
    var text = event.target.value;
    if (text.length) {
      text = diacritics(event.target.value);
      var regexp = new RegExp(".*" + text + ".*", "i");
      var found = data.filter(function (entry) {
        regexp.lastIndex = 0;
        return regexp.test(diacritics(entry.properties.nombre));
      });
      draw(found);
    } else {
      draw(data);
    }
  }, 600);

  input.on("input", searchFunc);
  container.append(search);
  container.append(wrapper);
  // Extraigo datos de la gráfica

  var active = false;
  var keys = data.map(function (entry) {
    return entry.properties[graph.code];
  });
  function select(id) {
    keys.forEach(function (key) {
      return graph.logger.trigger("select", key, false);
    });
    wrapper.find(".legend-entry").removeClass("selected");
    if (active != id) {
      graph.logger.trigger("select", id, true);
      wrapper
        .find(".legend-entry[data-code='" + id + "']")
        .addClass("selected");
      active = id;
    } else {
      active = false;
    }
  }
  graph.logger.subscribe("click", function (data) {
    //Evitar interferencias con la funcion de set normal
    wrapper.find(".legend-entry").removeClass("selected");
    hasRemove = false;
    if (active == data[graph.code]) {
      hasRemove = true;
    }
    if (active != data[graph.code]) {
      active = data[graph.code];
      var elem = wrapper.find(".legend-entry[data-code='" + active + "']");
      if (elem.length) {
        wrapper.scrollTop(elem.position().top + wrapper.scrollTop());
        elem.addClass("selected");
      }
    }
    keys.forEach(function (key) {
      if (key != active) {
        graph.logger.trigger("select", key, false);
      }
    });
    if (hasRemove) {
      active = false;
    }
  });
  function filaClick(id) {
    return function () {
      select(id);
    };
  }

  function draw(data) {
    wrapper.html("");
    if (data) {
      /*     var colors = graph.color.range();
    var intervals = graph.color.quantiles(); */
      var filter = [];
      for (let index = 0; index < data.length; index++) {
        var entry = data[index];
        var code = entry.properties[graph.code];
        if (filter.indexOf(code) < 0) {
          filter.push(code);
          /* var color = colors[index]; */
          var name = entry.properties.nombre;
          var value = entry.properties.size;
          value = value !== undefined ? shortFormat(value) : "";
          var fila = $(
            "<li class='legend-entry' data-code='" + code + "'></li>"
          );
          fila.on("click", filaClick(code));
          fila.append(
            $(
              "<span class='legend-text' title=\"" +
              name +
              '">' +
              name +
              "</span>"
            )
          );
          fila.append($("<span class='legend-value'>" + value + "</span>"));
          wrapper.append(fila);
        }
      }
    }
    // Inserta leyenda
  }
  draw(data);
}