"use strict";
(function($) {
  $(document).ready(function() {


  var $addRepoBtn = $('#add-repo-btn');


  var $addExampleBtn = $('#add-example-btn');
  var $exampleForm   = $('#add-example-form');
  var $exampleFormIn = $exampleForm.find('input');
  var $exampleSave   = $('#add-example-save');
  var $exampleCancel = $('#add-example-cancel');


  /**
   * Add new example
   */
  function addExample(e) {
    e.preventDefault();
    var repoSlug = $detailsRepo.data('slug');
    var title = $(this).find('input[name="title"]').val();
    rp.post('/' + repoSlug + '/examples', { title: title })
    .then(function(example) {
      clearAndCloseEditor();
      // $fileSelect.append(makeFileSelectOption(example));
      // $fileSelect.val(example.slug);
      
      // var $exMenuItem = $('<li><a href="/' + repoSlug + '/' + example.slug + '">' + example.title + '</a></li>')
      // .appendTo( $('#cat-' + example.category) );
      notify('success', "Exemple créé !");
      // navigateTo('/'+ repoSlug + '/' + example.slug);
    })
    .catch(errText => notify('error', 'Erreur: ' + errText));
  }

  function clearAndCloseEditor() {
    $exampleFormIn.val('');
    toggleEditor();
  }

  function toggleEditor() {
    $addExampleBtn.toggle();
    $exampleForm.toggleClass("hidden");
  }


  _ws.makeView('add-repo', {

    init: function() {
      this.$btn   = this.$elem.find('.add-btn');
      this.$form  = this.$elem.find('form');
      this.$input = this.$form.find('input[name="title"]');
      console.log('init add repo form', this)
    },

    render: function() {
      console.log('render form add repo', this);
      this.$btn.removeClass('in');
      this.$form.addClass('in');
      this.$input.focus();
    },

    events: {
      'click .add-btn': function() {
        this.render();
      },

      'click .icon-cross': function() {
        this.$form.removeClass('in');
        this.$btn.addClass('in');
      },

      'submit form': function(e) {
        e.preventDefault();
        var title = this.$input.val();
        rp.post('/collections', { title: title })
        .then(function(c) {
          _ws.notify('success', 'Collection créée: ' + c.title);
        })
        .catch(function(err) {
          console.error(err);
          _ws.notify('error', 'Impossible de créer la collection: ' + err.message);
        });
      } 
    },

    // $btn: $('#add-repo-btn')

  });

  console.log(_ws.ui);

  // _ws.ui.addRepoForm.$btn.click(_ws.ui.addRepoForm.render);


  console.log($addExampleBtn);
  $addExampleBtn.click(toggleEditor);
  $exampleCancel.click(clearAndCloseEditor);
  $exampleForm.submit(addExample);

  });
})(jQuery);