import Note from './Note.js';
import {
    new_note_handler, 
    search_term_change_handler, 
    sorting_change_handler, 
    load_notes, 
    new_bin_handler, 
    bin_name_change_handler, 
    bin_name_editing_toggle_button_handler, 
    bin_name_commit_handler,
    login_request_handler,
    logout_request_handler,
    username_change_handler,
    password_change_handler
    } from './handlers/App.js';


function App(vnode_init){
  const {state, dispatch} = vnode_init.attrs;
  const o = function(handler){ return handler.bind(null, state, dispatch); }
  //load_notes(state, dispatch);
  return {
    view: function(vnode){
      const s = vnode.attrs.state;
      return m('.app', {key: 'app'}, [
        m('.top', {key: 'top'}, [
          m('.top-left', {key: 'top-left'}, [
            m('button', {key: 'button', onclick: o(new_note_handler)}, 'New Note...'),
            m('input.search', {key: 'search', value: s.search_term, onkeyup: o(search_term_change_handler)}),
            m('select.sorting', {key: 'sorting', value: s.sorting, onchange: o(sorting_change_handler)}, [
              m('option', {key: 'new->old', value: 'new->old'}, 'Newest -> Oldest'),
              m('option', {key: 'old->new', value: 'old->new'}, 'Oldest -> Newest')
              ])
            ]),
          m('.top-right', {key: 'top-right'}, [
            (s.login.is_logged_in
              ? m('.login-info', {key:'login-info'}, [
                  m('.text', 'Logged in as '+s.login.user.username),
                  m('button', {onclick: o(logout_request_handler)}, 'Logout')
                  ])
              : m('.login-form', {key:'login-form'}, [
                  m('input.username', {key:'username', value: s.login.username, onchange: o(username_change_handler)}),
                  m('input.password[type=password]', {key:'password', value: s.login.password, onchange: o(password_change_handler)}),
                  m('button', {key:'login-button', onclick: o(login_request_handler)}, 'Login/Auto-Register')
                  ])
              ),
            m('.buttons', {key:'buttons'}, [
              (s.is_editing_bin_name
                ? m('input.bin-name-textbox', {key: 'bin-name-textbox', value: s.temp_bin_name, onchange: o(bin_name_change_handler)})
                : m('.bin-name', {key: 'bin-name'}, s.bin.name)
                ),
              m('button', {key: 'new-bin-button', onclick: o(new_bin_handler)}, 'New Bin...'),
              (s.is_editing_bin_name
                ? m('button', {key:'save-bin-name-button', onclick: o(bin_name_commit_handler)}, 'Save')
                : m('button', {key:'rename-bin-button', onclick: o(bin_name_editing_toggle_button_handler)}, 'Rename')
                )
              ])
            ])
          ]),
        m('.main', {key: 'main'}, [
          m('.notes', s.notes.map(note_state =>
            m(Note, {state, note_state, dispatch, key: note_state.note.id})
            ))
          ])
        ]);
      }
    };  
}

export default App;