library main;

// START:imports
import 'dart:html';
import 'dart:convert';
// END:imports

// START:main
main() {
  var list_el = document.query('#comics-list');
  var req = new HttpRequest();
  req.open('get', '/comics');
  req.onLoad.listen((req) {
    var list = JSON.decode(req.target.responseText);
    list_el.innerHtml = graphic_novels_template(list);
  });
  req.send();
}
// END:main

// START:template
graphic_novels_template(list) {
  var html = '';
  list.forEach((graphic_novel) {
    html += graphic_novel_template(graphic_novel);
  });
  return html;
}
graphic_novel_template(graphic_novel) {
  return '''
    <li id="${graphic_novel['id']}">
      ${graphic_novel['title']}
      <a href="#" class="delete">[delete]</a>
    </li>''';
}
// END:template

/***
 * This is not included in the book.
 *
 * Can use the following to handle deletes. Update the req.onLoad() handler
 * like the following to enable:
 *    req.onLoad.listen((res) {
 *      var list = JSON.decode(req.responseText);
 *      list_el.innerHtml = graphic_novels_template(list);
 *    });
 *
 */
attach_delete_handlers(parent) {
  parent.queryAll('.delete').forEach((el) {
    el.onClick.listen((event) {
      delete(event.target.parent.id, callback:() {
        print("[delete] ${event.target.parent.id}");
        event.target.parent.remove();
      });
      event.preventDefault();
    });
  });
}

delete(id, {callback}) {
  var req = new HttpRequest(),
      default_callback = (){};

  req.onLoad.listen((res) {
    (callback != null ? callback : default_callback)();
  });

  req.open('delete', '/comics/$id', async: true);
  req.send();
}