var Overlay = require("./overlay");


function MediaSelector($markitup_container) {
  this.$markitup_container = $markitup_container;
  this.$el = $('<div class="mod-media-selector" />');
  this.set_elements();

  // settings
  this.settings = {
    selected_class: "selected",
    selected_data: "SELF",
    editor: {}
  };

  this.gather_editor_settings();

  // data
  this.selected_ids = [];
  this.last_rendered_data = [];

  // exec
  this.collect_data_and_render();
  this.bind_events();
  this.save_cursor_position();
}


MediaSelector.prototype.set_elements = function() {
  this.$textarea = this.$markitup_container.find("textarea");
};


MediaSelector.prototype.gather_editor_settings = function() {
  var attr = this.$textarea.get(0).attributes;
  attr = Array.prototype.slice.call(attr, 0);

  for (var i=0, j=attr.length; i<j; ++i) {
    var name = attr[i].name;
    var value = attr[i].value;

    if (name.match(/^editor\-/)) {
      name = name.replace(/^editor\-/, "").replace(/\-/g, "_");
      value = (value && value.toString().length > 0 ? value : true);
      value = (value === "1" ? true : (value === "0" ? false : value));

      this.settings.editor[name] = value;
    }
  }
};



//
//  Data & Render
//
MediaSelector.prototype.collect_data_and_render = function() {
  var data;

  // fetch arguments
  switch (this.settings.selected_data) {
    case "SELF":
      data = this.collect_data_from_self();
      break;

    case "ALL":
      data = [];
      break;
  }

  // render
  this.render(data);

  // versions
  if (!this.settings.editor.disable_versions_option) {
    this.setup_version_option();
  }
};


MediaSelector.prototype.collect_data_from_self = function() {
  var data = [];

  $("x-files[accept*=\"image\"]").each(function() {
    var $xfiles = $(this);
    var versions;

    versions = $xfiles.find(".meta-versions .version").map(function() {
      return $(this).attr("data-name");
    }).toArray();

    $xfiles.find("x-file[data-src-original]").each(function() {
      var $xfile = $(this);

      data.push({
        id: $xfile.find("[name$=\"[id]\"]").attr("value"),
        thumb_url: $xfile.attr("data-src-original").replace(/original$/, "thumb"),
        versions: versions
      });
    });
  });

  return data;
};


MediaSelector.prototype.render = function(data) {
  var html, assets;

  // store data
  this.last_rendered_data = data;

  // assets
  assets = "";

  for (var i=0, j=data.length; i<j; ++i) {
    var asset = data[i];
    assets = assets + '<div class="asset" rel="' + asset.id + '">' +
      '<div class="image" style="background-image: url(\'' + asset.thumb_url + '\');"></div>' +
    '</div>';
  }

  // compose
  html = this.templates.main;
  html = html.replace("{{ASSETS}}", assets);

  // add to dom
  this.$el.html(html);
};



//
//  Templates
//
MediaSelector.prototype.templates = {

  main: (function() {
    return [
      '<header>',
        '<div class="data-selection">Insert image</div>',
        '<a class="close">✕</a>',
      '</header>',

      '<section>',
        '<div class="asset-container">{{ASSETS}}</div>',
      '</section>',

      '<aside>',
        '<div class="actions">',
          '<a class="button large commit">Add media to post</a>',
          '<a class="button large cancel close">Cancel</a>',
        '</div>',

        '<div class="options">',
          '<div class="options-title">Options</div>',
          '<div class="version"></div>',
        '</div>',
      '</aside>'
    ].join('');
  })()

};



//
//  Events
//
MediaSelector.prototype.bind_events = function() {
  this.$el.on("click", ".asset", $.proxy(this.asset_click_handler, this));
  this.$el.on("click", ".actions .commit", $.proxy(this.commit_click_handler, this));
};


MediaSelector.prototype.asset_click_handler = function(e) {
  var $asset = $(e.currentTarget);

  if ($asset.hasClass(this.settings.selected_class)) {
    this.unselect_asset($asset);
  } else {
    this.select_asset($asset);
  }
};


MediaSelector.prototype.commit_click_handler = function(e) {
  this.add_selected_to_editor_textarea();
};



//
//  Selecting assets
//
MediaSelector.prototype.select_asset = function($asset) {
  var id = $asset.attr("rel");

  // add to 'selected' array
  this.selected_ids.push(id);

  // visual
  $asset.addClass(this.settings.selected_class);
};


MediaSelector.prototype.unselect_asset = function($asset) {
  var id = $asset.attr("rel");
  var index = this.selected_ids.indexOf(id);

  // remove from 'selected' array
  if (index !== -1) {
    this.selected_ids.splice(index, 1);
  }

  // visual
  $asset.removeClass(this.settings.selected_class);
};


MediaSelector.prototype.add_selected_to_editor_textarea = function() {
  var selected = this.selected_ids;
  var version = this.$el.find(".options .version select option:selected").val();
  var markdown = "";

  var old_textarea_text, new_textarea_text;

  // build markdown text
  for (var i=0, j=selected.length; i<j; ++i) {
    markdown = markdown + "![](asset://" + selected[i];
    if (version) markdown = markdown + "/" + version;
    markdown = markdown + ")";
  }

  // add to textarea
  old_textarea_text = this.$textarea.val();

  new_textarea_text =
    old_textarea_text.substring(0, this.textarea_cursor_position) +
    markdown +
    old_textarea_text.substr(this.textarea_cursor_position);

  this.$textarea.val(new_textarea_text);

  // hide overlay
  Overlay.get_instance().hide();
};


MediaSelector.prototype.save_cursor_position = function() {
  var textarea, position, selection_range, text_range, text_range_duplicate;

  // elements
  textarea = this.$textarea.get(0);

  // find position
  if (textarea.selectionStart != null) {
    position = textarea.selectionStart;

  } else if (document.selection) {
    selection_range = document.selection.createRange();

    if (selection_range == null) {
      position = false;

    } else {
      text_range = textarea.createTextRange();
      text_range_duplicate = text_range.duplicate();

      text_range.moveToBookmark(selection_range.getBookmark());
      text_range_duplicate.setEndPoint("EndToStart", text_range);
      position = text_range_duplicate.text.length;

    }

  } else {
    position = false;

  }

  // if no position found
  if (position === false || position == null) {
    position = this.$textarea.val().length;
  }

  // set
  this.textarea_cursor_position = position;
};



//
//  Options
//
MediaSelector.prototype.setup_version_option = function() {
  var versions = [];
  var excludes = [];
  var select_element;

  // collect all versions
  for (var i=0, j=this.last_rendered_data.length; i<j; ++i) {
    var data_piece = this.last_rendered_data[i];

    for (var k=0, l=data_piece.versions.length; k<l; ++k) {
      var version = data_piece.versions[k];
      if (excludes.indexOf(version) == -1 && versions.indexOf(version) === -1) {
        versions.push(version);
      }
    }
  }

  // sort versions
  versions = versions.sort();

  // make option element
  select_element = document.createElement("select");
  select_element.innerHTML = $.map(versions, function(v) {
    return "<option value=\"" + v + "\">" + v + "</option>";
  }).join("");

  // add to dom & apply chosen
  this.$el.find(".options .version")
    .empty()
    .append(select_element)
    .children("select")
    .chosen({ width: "100%" });
};



//
//  -> EXPORT
//
module.exports = MediaSelector;