$(document).ready(function() {
  var $editor        = $('#editor');
  var $editorJs      = $('#editor-javascript');
  var $editorHtml    = $('#editor-html');
  var $htmlContent   = $('#html-content');
  var $selectorNav   = $('#selector');
  var $fileSelect    = $('#file-select');
  var $addExampleBtn = $('#add-example-btn');
  var $exampleForm   = $('#add-example-form');
  var $exampleSave   = $('#add-example-save');
  var $exampleCancel = $('#add-example-cancel');
  var $notification  = $('#notification');

  var activeTab = 'show-html';

  var editor;

  function initEditor(mode) {
    editor = ace.edit("editor");
    editor.setTheme("ace/theme/eclipse");
    editor.getSession().setMode("ace/mode/" + mode);
    editor.getSession().setUseWrapMode(true);
  }
  // editor.getSession().on('change', function() {
  //   console.log(arguments)
  // });

  function setActiveTab(which) {
    var elementId = 'show-' + which;
    $('#' + activeTab).removeClass('active');
    activeTab = elementId;
    $('#' + elementId).addClass('active');
    var ed = $('#editor-' + which);
    initEditor(which);
    editor.getSession().setValue(ed[0].innerHTML);
  }

  $('#tabs button').click(function() {
    var which = $(this).prop('id').substr(5);
    setActiveTab(which);
  })

  function loadExample() {
    var exampleName = $(this).val();
    var serverPath = 'exemples/' + exampleName + '/';
    $.get(serverPath + 'script.js', function(javascript) {
      $editorJs.html(javascript);
    }, 'text');
    $.get(serverPath + '/contenu.html', function(html) {
      $editorHtml.html(html);
      $htmlContent.html(html);
      setActiveTab('html');
      loadJS(serverPath + 'script.js');
    }, 'text');
  }

  function addFileSelectItem(item) {
    $fileSelect.append(
      '<option value="' + item.slug + '">' +
        item.title +
      '</option>'
    );
  }

  function loadExampleList() {
    $.get('exemples/liste.json', function(liste) {
      liste.forEach(addFileSelectItem);
    }, 'json');
  }

  function notify(type, text) {
    $notification
    .addClass(type)
    .addClass('active');
    $notification.html(text);
    setTimeout(function() {
      $notification.removeClass('active');
    }, 2000);
    setTimeout(function() {
      $notification.removeClass(type);
    }, 3000);
  }

  function toggleEditor() {
    $addExampleBtn.toggle();
    $selectorNav.toggle();
    $exampleForm.toggle();
  }

  // function ajaxPost(url, data, success, error) {}

  function saveExample(e) {
    e.preventDefault();
    var title = $(this).find('input[name="title"]').val();
    $.ajax({
      type: 'POST',
      url: '/examples',
      data: JSON.stringify({ title }),
      success: function(newExample) {
        clearAndCloseEditor();
        addFileSelectItem(newExample);
        notify('success', "Exemple sauvegardé !");
      },
      error: function(jqXHR, textStatus, errorThrown ) {
        console.log(jqXHR, textStatus, errorThrown);
        notify('error', 'Erreur: ' + jqXHR.responseText);
      },
      contentType: 'application/json',
      dataType: 'json'
    });
  }

  function clearAndCloseEditor() {
    $exampleForm.find('input').val('');
    toggleEditor();
  }

  $fileSelect.change(loadExample);
  $addExampleBtn.click(toggleEditor);
  $exampleCancel.click(clearAndCloseEditor);
  $exampleForm.submit(saveExample);
  loadExampleList();
  // setActiveTab('html');
});