var m = require('mithril');
var _dbs = require('./dbs');


//     __  __               __
//    / / / /__  ____ _____/ /__  _____
//   / /_/ / _ \/ __ `/ __  / _ \/ ___/
//  / __  /  __/ /_/ / /_/ /  __/ /
// /_/ /_/\___/\__,_/\__,_/\___/_/
module.exports = {
  view: function(vn){
    return m('header', [
      m('h1', 'Ethica'),
      m('nav', {'id':"menus"}, [
        m(_RouteMenu),
        m(_LangMenu)
      ])
    ]);
  }
}


var _RouteMenu = {
  view: function(){
    // create ul dom
    return m('ul', {id:"routes"}, [
      m('li', m('a', {'href':'#!/tree'}, "tree")),
      m('li', m('a', {'href':'#!/dots'}, "dots")),
    ]
    );
  }
}

//     __                      __  ___
//    / /   ____ _____  ____ _/  |/  /__  ____  __  __
//   / /   / __ `/ __ \/ __ `/ /|_/ / _ \/ __ \/ / / /
//  / /___/ /_/ / / / / /_/ / /  / /  __/ / / / /_/ /
// /_____/\__,_/_/ /_/\__, /_/  /_/\___/_/ /_/\__,_/
//                   /____/
var _LangMenu = {
  view: function(){
    // create ul dom
    return m('ul', {id:"languages"}, _dbs.langs.map(function(lang){
        // create li dom for each lank link
        return m('li',
          // create a dom
          m('a', {
            'lang':lang.lc,
            'href':'/?lang='+lang.lc,
            onclick:function(e){
              e.preventDefault();
              // console.log('click lang', e);
              var lang = e.target.getAttribute('lang');
              console.log(lang);
              if(lang != _dbs.lang){
                // change url variable
                // change db
                _dbs.lang = lang;
                // redraw UI
                // m.redraw();
              }
              return false;
            }
          }, lang.label)
        );
      })
    );
  }
}