/* List view is already a component */

ListView = Vue.component('list-view', (
{
  data: function() {
    return { entrylist: this.$parent.entrylist } // BAD IDEA: see appdata below...
  },
  template: '<div class="two columns"><ul><list-item v-for="item in entrylist" :key="item.id" :idnum="item.id" :name="item.name"></list-item></ul></div>',
}
))


/* nice component */
Vue.component( 'list-item', (
  {
    props: [ 'idnum', 'name'],
    computed: {
      addr: function() {
        return "#/item/" + this.idnum;
      }
    },
    template: '<li><a :href="addr">{{name}}</a></li>'
  }
))

const Add = Vue.component('add-view', ({

  data: function() {
    return { entrylist: this.$parent.entrylist } // NOTE BAD IDEA HERE TOO: see below
  },
  methods: {
    addNew: function() {
        /*
        var reg = new RegExp("[.]+[@][a-z0-9]+[\.][a-z]+")
        if (this.NewName == "") {
            console.log("name empty")
        }
        if (!this.NewMail.match(reg)) {
            console.log("email incorrect")
        }
                             name:this.NewName, email:this.NewMail})
        */
        this.entrylist.push({id:this.entrylist.length, name:this.NewName, email:this.NewMail})
    }
  },
  template:
  `
  <div>
  <h2>Lisamine</h2>
  <form>
  <input type="text" id="name" placeholder="Name" v-model="NewName"/>
  <br/>
  <input type="text" id="email" placeholder="Email" v-model="NewMail"/>
  <br/>
  <input type="submit" @click="addNew"/>
  </form>
  </div>
  `
}
))

/*Detail view component*/
DetailView = Vue.component( 'detail-view', (
    {
        template:
  `
    <div>
        <h1>Details  {{$route.params.id}}</h1>
        <div>
            {{$route.params.name}}
            <br/>
            {{$route.params.email}}
        </div>
    </div>

  `
  }
))

/* APPLICATION STATE */

/*
NOTE: bad idea to use it for sharing data directly. We should
be sharing parts of it to components as needed and we should
be changing it using events since it will be a debugging hell
for anything non-trivial.
*/

const appstate =
    {
      entrylist: [
        { id:0, name:"asd", email:"xd@xd.dx"},
        { id:1, name:"dsa", email:"dx@xd.dx"}
      ]
    }


/* ROUTER ELEMENTS */
routes = [
  { path: '/list', component: ListView },
  { path: '/add', component: Add },
  { path: '/item/:id', component: DetailView } // change into a proper component
]

const router = new VueRouter(
  {routes, linkActiveClass: "button-primary"}
)

/* VUE APP */

var vm = new Vue(
{
  router,
  data: appstate
}
).$mount('#dogapp');