const STORED_LIST = 'vue-todo-list-fCb8AKPOwQ'
const STORED_ID = 'vue-todo-id-ZkPjMLQCI8'

let storedTodoList = JSON.parse(window.localStorage.getItem(STORED_LIST))
let storedId = window.localStorage.getItem(STORED_ID)

let startArray = [
  {text: 'Add Todo Items with the + Button', color: 'ice',
  checked: false, starred: false, id: 1},
  {text: 'Star Items for Priority', color: 'jewel',
   checked: true, starred: true, id: 2 },
  {text: 'Filter Items by Color or Star', color: 'tang',
   checked: false, starred: true, id: 3 },
   {text: 'All Saved in Local Browser Storage', color: 'ice', checked: true, starred: false, id: 4}
]

let app = {
  props: ['stored-id', 'stored-data'],
  template: `  
      <div>
        <tab-bar @filter="onFilter" :colors="colors"></tab-bar>
        <ul>
          <item v-for="item in todoList.filter((x) => filter === 'all' ? x : filter === 'starred' ? x.starred : filter === x.color)"
                :key="item.id" :data="item" :colors="colors" :filter="filter"
                @check="onCheck(item.id)" @color-change="onColorChange(item.id)" @new-color="onNewColor"
                @star-change="onStarChange(item.id)" @remove="onRemove(item.id)"></item>
        </ul>
        <add-form @add-item="addItem"></add-form>
      </div>`,
  data: function(){
    return {
      colors: ['all', 'ice', 'tang', 'jewel', 'rose'],
      newId: this.storedId || 5,
      todoList: this.storedData || startArray,
      filter: 'all',
      recentColor: 'ice'
    }
  },
  watch: {
    todoList: {
      handler: function(){ this.$emit('update-list', this.todoList)},
      deep: true
    }
  },
  methods: {
    onFilter: function(filter){
      this.filter = filter
      if(filter !== 'all' && filter !== 'starred'){
        this.recentColor = filter
      }
    },
    onCheck: function(id){
      let el = this.todoList.find((x) => x.id === id)
      el.checked = !el.checked
    },
    onColorChange: function(id){
      let el = this.todoList.find((x) => x.id === id)
      el.color = this.recentColor
    },
    onNewColor: function(color){
      this.recentColor = color
    },
    onStarChange: function(id){
      let el = this.todoList.find((x) => x.id === id)
      el.starred = !el.starred
    },
    onRemove: function(id){
      let el = this.todoList.find((x) => x.id === id)
      let idx = this.todoList.indexOf(el)
      this.todoList.splice(idx, 1)
    },
    addItem: function(text){
      this.todoList.push({
        text: text,
        color: this.recentColor,
        checked: false,
        starred: false,
        id: this.newId
      })
      this.newId++
      this.$emit('update-id', this.newId)
    }
  }
}

let tabBar = {
  props: ['colors'],
  template: `
    <div class="row">
      <div class="col s12">
        <ul class="tabs">
          <li class="col s1"></li>
          <li v-for="(color, index) in colors"
              :class="[tabClass, index === activeTab ? 'active' : '']"
              :id="index" @click="activate(index)">
            <p :class="'color ' + color"></p>
          </li>
          <li :class="[tabClass, 'star', 5 === activeTab ? 'active' : '']"
              :id="5" @click="activate(5)">
            <p id="star">
              <span class="lg-i material-icons sun">grade</span>
            </p>
          </li>
          <li class="col s1"></li>
        </ul>
      </div>
    </div>`,
  data: function(){
    return {
      activeTab: 0,
      tabClass: 'tab col s1 ',
    }
  },
  methods: {
    activate: function(i){
      this.activeTab = i;
      let filter = i === 0 ? 'all'
                  : i === 5 ? 'starred'
                  : this.colors[i]
      this.$emit('filter', filter)
    }
  }
}
let item = {
  props: ['colors', 'data'],
  template: `
    <li style="position:relative;">
      <div :class="['collapsible-header', this.data.color + '-bd']">
        <span :class="['material-icons', 'check', this.data.color + '-txt']"
              @click="onCheck">
              {{ data.checked ? 'check_box' : 'check_box_outline_blank' }}
        </span>
        <p class="limit">
          <span :class="['h-txt', this.data.color + '-txt']">
            {{ data.text }}
          </span>
        </p>
        <span class="material-icons right head-info dropdown-button"
              :data-activates="menuId" @click="toggleActive">
              more_vert
        </span>
        <span v-if="data.starred"
              class="material-icons right sun-txt head-info">
              grade
        </span>
        <item-menu :data-id="data.id" :active="active" :starred="data.starred" :colors="colors"
                   @mouseleave="onMouseLeave" @new-color="onNewColor" 
                   @color-change="onColorChange" @star-change="onStarChange" @remove="onRemove">
        </item-menu>
      </div>
    </li>`,
  data: function(){
    return {
      active: false,
      menuId: 'menu' + this.data.id
    }
  },
  methods: {
    onCheck: function(){
      this.$emit('check')
    },
    onColorChange: function(){
      this.$emit('color-change')
    },
    onMouseLeave: function(){
      this.active = false
    },
    onNewColor: function(color){
      this.$emit('new-color', color)
    },
    onStarChange: function(){
      this.$emit('star-change')
    },
    onRemove: function(){
      this.$emit('remove')
    },
    toggleActive: function(){
      this.active = !this.active
    }
  }
}
let itemMenu = {
  props: ['active', 'colors', 'data-id', 'starred'],
  template: `
   <ul class="dropdown-content" :id="'menu'+dataId" :style="active ? activeStyle : '' " @mouseleave="onMouseLeave">
    <li>
      <p v-for="color in colors.slice(1)"
         :class="['color-sm', color]" :id="color"
         @click="onColorChange"></p>
    </li>
    <li class="h-txt sun-txt star-btn"
        @click="onStarChange">{{ starred ? 'unstar' : 'star'}}</li>
    <li class="h-txt rose-txt remove-btn"
        @click="onRemove">remove</li>
   </ul>`,
  data: function(){
    return {
      activeStyle: {
        width: '26.25px',
        position: 'absolute',
        top: '0',
        right: '3em',
        opacity: 1,
        display: 'block'
      }
    }
  },
  methods: {
    emitColor: function(e){
      this.$emit('new-color', e.target.id)
    },
    onColorChange: function(e){
      this.emitColor(e)
      this.$emit('color-change')
    },
    onStarChange: function(){
      this.$emit('star-change')
    },
    onMouseLeave: function(){
      this.$emit('mouseleave')
    },
    onRemove: function(){
      this.$emit('remove')
    }
  }
}

let addForm = {
  template: `
    <p v-if="!showForm" class=" center new-todo limit">
      <span class="material-icons" id="add"
            @click="toggleForm">
            add_circle_outline
      </span>
    </p>
    <p v-else class="center new-todo limit">
      <input type="text"  id="new-input" v-model="inputValue" 
             @keyup.esc="toggleForm" @keyup.enter="handleAdd">
      <button type="submit" class="btn"
              @click="handleAdd">Add</button>
    </p>`,
  data: function(){
    return {
      showForm: false,
      inputValue: ''
    }
  },
  methods: {
    toggleForm: function(){
      this.showForm = !this.showForm
    },
    handleAdd: function(){
      this.$emit('add-item', this.inputValue)
      this.inputValue = ''
      this.toggleForm()
    }
  }
}

let main = {
  el: '#app',
  data: {
    storedId: storedId,
    storedData: storedTodoList
  },
  methods: {
    updateId: function(id){
      window.localStorage.setItem(STORED_ID, id)
    },
    updateList: function(list){
      window.localStorage.setItem(STORED_LIST, JSON.stringify(list))
    }
  }
}
Vue.component('item-menu', itemMenu)
Vue.component('item', item)
Vue.component('tab-bar', tabBar)
Vue.component('add-form', addForm)
Vue.component('app', app)
new Vue(main)