import {GetterTree, MutationTree, Module} from 'vuex';
import {TodosState, RootState} from '../types';
import {Todo} from '../types';

const state: TodosState = {
    todos: [
        {text: 'Buy milk', checked: false},
        {text: 'Learning', checked: true},
        {text: 'Algorithom', checked: false},
    ],
};

const getters: GetterTree<TodosState, RootState> = {
    todos: (state, getters, rootState) => state.todos.filter(t => !t.checked),
    dones: (state, getters, rootState) => state.todos.filter(t => t.checked)
};

const mutations: MutationTree<TodosState> = {
    addTodo(state, newTodo) {
        const copy = {
            ...newTodo
        };
        state.todos.push(copy);
    },
    toggleTodo(TodosState, todo) {
        todo.checked = !todo.checked;
    }
};

const actions: ActionTree<TodosState, RootState> = {
    addTodoAsync(context, id) {
        fetch('https://jsonplaceholder.typicode.com/posts/'+id)
            .then(data => data.json())
            .then(item => {
                const todo: Todo = {
                    checked: false,
                    text: context.rootState.login.user + ': ' + item.title
                }

                context.commit('addTodo', todo);
            })
    }
}

export const todos: Module<TodosState, RootState> = {
    actions,
    state,
    mutations,
    getters,
    namespaced: true
};

<template>
<section>
    <h4>Todos</h4>
    <ul>
      <li v-for="todo in todos">
        <input type="checkbox" :checked="todo.checked" @change="toggleTodo(todo)">
        {{ todo.text }}
      </li>
    </ul>
    <h4>Done</h4>
    <ul>
      <li v-for="todo in dones">
        <input type="checkbox" :checked="todo.checked" @change="toggleTodo(todo)">
        {{ todo.text }}
      </li>
    </ul>
    <p>
      <label for="">
        Add todo:
        <input type="text" v-model="newTodo.text" @keyup.enter="addTodo(newTodo)">
      </label>
      <label for="">
        Add todo async:
        <input type="text" v-model="id" @keyup.enter="addTodoAsync(id)">
      </label>

    </p>
</section>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import {Action, State, Getter, Mutation, namespace} from 'vuex-class';
import {TodosState, Todo} from '../types';

const TodoGetter = namespace('todos', Getter);
const TodoAction = namespace('todos', Action);
const TodoMutation = namespace('todos', Mutation);

@Component({
})
export default class Todos extends Vue {
    @TodoGetter todos: TodosState;
    @TodoGetter dones: TodosState;

    @TodoMutation addTodo;
    @TodoMutation toggleTodo;
    @TodoAction addTodoAsync;

    newTodo: Todo = {
      text: '',
      checked: false
    }

    id: string = '1';
}
</script>

const actions: ActionTree<TodosState, RootState> = {
    addTodoAsync(context, id) {
        fetch('https://jsonplaceholder.typicode.com/posts/'+id)
            .then(data => data.json())
            .then(item => {
                const todo: Todo = {
                    checked: false,
                    text: context.rootState.login.user + ': ' + item.title
                }

                context.commit('addTodo', todo);
                context.commit('login/login', null, {root: true}); // we have to say {root: true}, otherwise, it will look for the state under 'todos' namespace
            })
    }
}

const mutations: MutationTree<LoginState> = {
    login (state) {
        state.isLoggedIn = true;
        state.user =  'alice';
    }
}