<template>
    <div id="left-menu">
        <div class="dropup left-menu-item">
            <button class="btn btn-success text-light bottom-menu-item" type="button"
                    id="create-dropdown-menu" data-bs-toggle="dropdown" aria-expanded="false" title="Neu">
                <i class="fas fa-plus"></i>
            </button>
            <ul class="dropdown-menu" aria-labelledby="create-dropdown-menu">
                <li>
                    <button class="btn btn-light dropdown-menu-button" type="button"
                            @click="createTracker()">Tracker
                    </button>
                </li>
                <li>
                    <button class="btn btn-light dropdown-menu-button" type="button"
                            @click="createTimeBox()">Timebox
                    </button>
                </li>
            </ul>
        </div>
        <div class="left-menu-item">
            <router-link to="/"
                         type="button"
                         class="btn btn-dark text-light bottom-menu-item"
                         data-bs-placement="left"
                         title="Home">
                <i class="fas fa-home"></i>
            </router-link>
        </div>
        <div class="left-menu-item" v-if="$store.state.trackers.length > 0">
            <router-link to="/trackers"
                         type="button"
                         class="btn btn-primary text-light bottom-menu-item"
                         data-bs-placement="left"
                         title="Alle Tracker">
                <i class="fas fa-clock"></i>
            </router-link>
        </div>
        <div class="left-menu-item" v-if="$store.state.archive.length > 0">
            <router-link to="/archive"
                         type="button"
                         class="btn btn-warning bottom-menu-item"
                         data-bs-placement="left"
                         title="Archivierte Tracker">
                <i class="fas fa-archive"></i>
            </router-link>
        </div>
        <div class="left-menu-item" v-if="($store.state.trackers.length + $store.state.archive.length) > 0">
            <a type="button"
               class="btn btn-info text-light bottom-menu-item"
               data-bs-toggle="offcanvas"
               data-bs-target="#pastDaysModal"
               data-bs-placement="top"
               title="Buchungsverlauf">
                <i class="fas fa-history"></i>
            </a>
        </div>
        <div class="left-menu-item">
            <router-link to="/settings"
                         type="button"
                         class="btn btn-dark text-light bottom-menu-item"
                         data-bs-placement="left"
                         title="Einstellungen">
                <i class="fas fa-sliders-h"></i>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    name: "Menu",
    props: {
        archive: Array
    },
    methods: {
        createTracker() {
            this.$store.commit('createTracker');
            this.$store.commit('saveTrackers');
        },
        createTimeBox() {
            this.$store.commit('createTimebox');
            this.$store.commit('saveTrackers');
        },
    }
}
</script>

<style scoped>
.dropdown-menu {
    background: transparent;
    border: none;
    box-shadow: none;
}

.dropdown-menu-button {
    width: 10em;
    margin-bottom: 1em;
}

</style>