# View

<template>
    <div class="TodoView__container">
        <ThePage :class-name="'TodoView'"
                 :title="'TODO__TITLE'">
            <template slot="left-action">
                <!--BACK-->
                <BaseNavigationButton :icon="'icon-left'"
                                      @click="back()" />
            </template>
            <template slot="right-action">
                <!--CLEAN COMPLETED-->
                <BaseNavigationButton :label="'TODO__CLEAN_COMPLETED'"
                                      :icon="'icon-cw'"
                                      @click="removeCompleted()" />

            </template>
            <div class="TodoView__body">
                <TodoItem v-for="(item, index) in items"
                          :key="item.id"
                          :title="item.title"
                          :done="item.done"
                          @markAsDone="markAsDone(index)" />
                <TodoCreate  />
            </div>
        </ThePage>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import ThePage from '../components/common/ThePage.vue';
    import BaseNavigationButton from '../components/common/BaseNavigationButton.vue';
    import TodoItem from '../components/todo/TodoItem.vue';
    import TodoCreate from '../components/todo/TodoCreate.vue';

    export default {
        name: 'TodoView',
        components: {
            ThePage,
            BaseNavigationButton,
            TodoItem,
            TodoCreate
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.getItems();
            });
        },
        computed: {
            ...mapState({
                items: s => s.todo.items
            })
        },
        methods: {
            ...mapActions({
                getItems: 'todo/getItems',
                back: 'todo/back',
                removeCompleted: 'todo/removeCompleted',
                markAsDone: 'todo/markAsDone'
            })
        }
    };
</script>

<style>
    .TodoView__container {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .TodoView__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        max-width: 500px;
        margin: 16px auto;
        padding: 8px;
        border-radius: 2px;
        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
        background-color: #fff;
    }
</style>