var OKAdmin = function () {
  // initialize our multi-image uploader with an element and a template
  $(".group.image-list").each(function () {
    var parent = this;
    var uploader = new OKUpload();
    uploader.bind(this);
    uploader.add = function (media) {
      var url = media.url;
      var imageTemplate = $(".image-template", parent).html();
      var $el = $(imageTemplate);
      $el.find(".uri").val(media.url);
      $el.find(".image-width").val(media.width);
      $el.find(".image-height").val(media.height);
      $el.find("img").attr("src", media.url);
      $("ol", parent).prepend($el);
    };
  });
  // delete image from gallery
  $(document).on("mousedown", ".image-list .remove", function () {
    if (confirm("Remove this image?")) {
      $(this).parent().remove();
    }
  });

  // Add default date
  $(".date input").each(function (i, el) {
    var value = el.getAttribute("value");
    if (!value) {
      el.setAttribute("value", toDateInputValue(new Date()));
    }

    function toDateInputValue(date) {
      var local = new Date(date);
      local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
      return local.toJSON().slice(0, 10);
    }
  });

  // initialize our multimedia uploader with an element and a template
  $(".group.media-list").each(function () {
    var parent = this;
    var uploader = new OKUpload();
    uploader.bind(this);
    uploader.add = function (media) {
      var url = media.url;
      var imageTemplate = $(".image-template", parent).html();
      var $el = $(imageTemplate);
      $el.find(".uri").val(media.url);
      $el.find(".image-width").val(media.width);
      $el.find(".image-height").val(media.height);
      $el.find("img").attr("src", media.url);
      $("ol", parent).prepend($el);
    };
    uploader.addMedia = function (media) {
      switch (media.type) {
        case "youtube":
        case "vimeo":
        case "video":
          var videoTemplate = $(".video-template", parent).html();
          var $el = $(videoTemplate);
          $el.addClass("loaded");
          $el.find(".video-type").val(media.type);
          $el.find(".video-token").val(media.token);
          $el.find(".video-uri").val(media.uri);
          $el.find(".video-title").val(media.title);
          $el.find(".video-thumb").val(media.thumbnail);
          $el.find(".video-width").val(media.width);
          $el.find(".video-height").val(media.height);
          $el.find("img").attr("src", media.thumbnail);
          $("ol", parent).prepend($el);
          break;
        case "audio":
          var audioTemplate = $(".audio-template", parent).html();
          var $el = $(audioTemplate);
          $el.addClass("loaded");
          $el.find(".audio-type").val(media.type);
          $el.find(".audio-token").val(media.token);
          $el.find(".audio-uri").val(media.uri);
          $el.find(".audio-title").val(media.title);
          $el.find(".audio-thumb").val(media.thumbnail);
          $el.find(".audio-duration").val(media.duration);
          $el.find("img").attr("src", media.thumbnail);
          $("ol", parent).prepend($el);
          break;
        case "link":
          var linkTemplate = $(".link-template", parent).html();
          var $el = $(linkTemplate);
          $el.addClass("loaded");
          $el.find(".uri").val(media.url);
          $("ol", parent).prepend($el);
          break;
        default:
          alert("Unsupported link type!");
      }
    };
  });
  // delete image from gallery
  $(document).on("mousedown", ".media-list .remove", function () {
    if (confirm("Remove this media?")) {
      $(this).parent().remove();
    }
  });

  // initialize our single image uploader with existing DOM
  $(".group.image").each(function () {
    var $el = $(this);
    var uploader = new OKUpload();
    uploader.bind(this);
    uploader.add = function (media) {
      console.log(media);
      $el.find(".uri").val(media.url);
      $el.find(".caption").val("");
      $el.find(".image-width").val(media.width);
      $el.find(".image-height").val(media.height);
      $el.find("img").attr("src", media.url).show();
      $el.addClass("loaded");
    };
  });
  // delete image from single image entry
  $(document).on("mousedown", ".image .remove", function () {
    if (confirm("Remove this image?")) {
      var $el = $(this).closest(".image");
      $el.removeClass("loaded");
      $el.find(".uri").val("");
      $el.find(".image-width").val("");
      $el.find(".image-height").val("");
      $el.find(".caption").val("");
      $el.find("img").attr("src", "");
    }
  });

  // make the region sortable with drag-and-drop
  $(".media-list ol, .image-list ol, .link-list .links").sortable();
  $(".media-list ol, .image-list ol").disableSelection();
  $(document).on(
    "click",
    ".main.index .resource-category.active ol a",
    function (e) {
      e.preventDefault();
    }
  );

  // populate a video field with info from our url parser
  var last_url;
  $(".video .url").on("focus", function () {
    var $el = $(this);
    last_url = $el.val();
  });
  $(".video .url").on(
    "keydown blur",
    pressEnter(function () {
      var $el = $(this);
      var url = $el.val();
      if (url == last_url) {
        return;
      }
      Parser.parse(url, function (media) {
        console.log(url, media);
        $el.parent().addClass("loaded");
        $el.parent().find(".video-type").val(media.type);
        $el.parent().find(".video-token").val(media.token);
        $el.parent().find(".video-uri").val(media.url);
        $el.parent().find(".video-title").val(media.title);
        $el.parent().find(".video-thumb").val(media.thumbnail);
        $el.parent().find(".video-width").val(media.width);
        $el.parent().find(".video-height").val(media.height);
      });
    })
  );

  // Upload an arbitrary file like a PDF
  $(".group.file").each(function () {
    var $el = $(this);
    var uploader = new OKUpload();
    uploader.bind(this);
    uploader.addMedia = function (media) {
      console.log("file uploaded >>", media);
      $el.find(".uri").val(media.url);
      $el.find(".caption").val(media.url);
      $el.find("a").attr("href", media.url).show();
      $el.addClass("loaded");
    };
  });
  // delete file
  $(document).on("mousedown", ".file .remove", function () {
    if (confirm("Remove this file?")) {
      var $el = $(this).closest(".file");
      $el.removeClass("loaded");
      $el.find(".uri").val("");
      $el.find(".caption").val("");
      $el.find("a").attr("href", "");
    }
  });

  // Add a new link to the list
  $(".link-list").on("click", ".add-link-btn", function addNewLink(e) {
    e.preventDefault && e.preventDefault();
    e.stopPropagation && e.stopPropagation();
    var $delegate = $(e.delegateTarget);
    var $list = $delegate.find(".links");
    var linkCount = $list.find("li").length;

    var $linkText = $delegate.find(".link-input-new.link-text");
    var $linkURI = $delegate.find(".link-input-new.link-uri");

    var linkText = $linkText.val() || "Link Text";
    var linkURI = $linkURI.val();

    if (!linkURI) {
      alert("Please enter a link");
      return;
    }

    var template = $delegate.find(".link-template").html();
    template = template.replace(/\[\]/g, "[" + linkCount + "]");
    var $el = $(template);
    $el.find(".link-text").val(linkText);
    $el.find(".link-uri").val(linkURI);
    $list.append($el);
    $linkText.val("");
    $linkURI.val("");
  });

  // Remove a link from the list
  $(".link-list").on("mousedown touchstart", ".remove-link-btn", function (e) {
    e.preventDefault();
    e.stopPropagation();
    var $target = $(e.target);
    $target.closest("li").remove();
  });

  $(".link-list input").on("keydown", function (e) {
    if (e.keyCode == 13) {
      e.preventDefault();
      e.stopPropagation();
      if ($(this).hasClass("link-input-new")) {
        $(this).next(".add-link-btn").trigger("click");
      }
    }
  });

  // fix post indexing in list-driven inputs
  $(".main.resource form").submit(function (e) {
    var $id = $("[name=id]"),
      $title = $("[name=title]"),
      $menu = $("[name=menu]"),
      $section = $(".resource.main");
    var id = $section.data("id"),
      type = $section.data("type");

    if ($title.length && !$title.val()) {
      $title.focus();
      alert("Please enter a title");
      e.preventDefault();
      return;
    }

    if ($menu.length && !$menu.val()) {
      $menu.val($title.val());
    }

    // TODO: pass through whether this page is static
    if (type === "page" && (id == "contact" || id == "about")) {
    } else {
      var slug = slugify($title.val());
      $id.val(slug);
    }

    // Parse date input
    $(".property .date").each(function (i, el) {
      var name = $(el).parent(".property").data("name");
      var $input = $(el).find("input");
      var date = new Date($input.val());
      // Set to middle of day so it is the same date
      // for all locales
      date.setUTCHours(12);
      var dateString = date.toUTCString();
      var normalizedInput = document.createElement("input");
      $(normalizedInput).attr({
        name: name,
        type: "text",
        value: dateString,
      });
      $input.remove();
      $(el).append(normalizedInput);
    });

    // Modify flags checkboxes such that unchecked ones return "false"
    // instead of nothing
    $(".property input[type=checkbox]").each(function (i, el) {
      var checked = !!el.checked;
      if (!checked) {
        el.setAttribute("value", "false");
      }
      el.checked = true;
    });

    $(".link-list").each(function () {
      var $inputs = $(this).find(".link-input-new");
      if ($inputs.eq(0).val() && $inputs.eq(1).val()) {
        $(this).find(".add-link-btn").trigger("click");
      }
    });

    $("ol").each(function () {
      $("li", this).each(function (index) {
        $(this)
          .find("input,textarea")
          .each(function () {
            var field = $(this)
              .attr("name")
              .replace(/\[[0-9]*\]/, "[" + index + "]");
            $(this).attr("name", field);
          });
      });
    });
  });

  // delete individual records
  $("#delete_form").submit(function (e) {
    if (confirm("Are you sure you want to delete this record?")) {
      return;
    } else {
      e.preventDefault();
    }
  });

  // reorder items in categories
  $(".resource-category:not(.grouped)").on("click", ".edit-btn", function (e) {
    e.preventDefault();
    var $parent = $(e.delegateTarget);
    var $editBtn = $parent.find(".edit-btn");
    var $cancelBtn = $parent.find(".cancel-btn");
    var $saveBtn = $parent.find(".save-btn");
    var $ol = $parent.find("ol");
    var toggles = [$parent, $cancelBtn, $saveBtn, $editBtn];

    $ol.sortable();
    $ol.disableSelection();
    toggle();

    $cancelBtn.one("click", function (e) {
      $ol.sortable("cancel");
      $ol.enableSelection();
      toggle();
    });

    $saveBtn.one("click", function (e) {
      $ol.sortable();
      toggle();
    });

    function toggle() {
      toggles.forEach(function ($el) {
        $el.toggleClass("active");
      });
    }
  });

  // save new category order
  $(".resource-category.root").on("submit", "form", function (e) {
    var $parent = $(e.delegateTarget);
    var $resources = $parent.find(".resource-input");
    var isDescending = $parent.hasClass("descending");
    $resources.each(function (index) {
      var $input = $(this);
      var parsed = JSON.parse($input.val());
      if (isDescending) {
        parsed.__index = $resources.length - index;
      } else {
        parsed.__index = index;
      }
      $input.val(JSON.stringify(parsed));
    });
  });

  $(window).on("keydown", function (e) {
    if ((e.ctrlKey || e.altKey || e.metaKey) && e.keyCode == 83) {
      e.preventDefault();
      $("#resource_form").submit();
    }
  });
};

$(function () {
  window.app = new OKAdmin();
});

function slugify(s) {
  return (s || "")
    .toLowerCase()
    .replace(/\s/g, "-")
    .replace(/[^-_a-zA-Z0-9]/g, "-")
    .replace(/-+/g, "-");
}