<style>
    @import './assets/styles/fonts.css';

    .button-min-width-auto {
        min-width: auto !important;
    }
</style>

<template>
    <v-app>
        <vue-headful
                :title="getTitle"
        />
        <v-navigation-drawer
            class="sidebar-wrapper" persistent v-model="drawer" enable-resize-watcher fixed app
            :src="require('./assets/bg-navi.jpg')"
        >
            <div id="nav-header">
                <img :src="require('./assets/logo.svg')" />
                <v-toolbar-title>{{ printername !== "" ? printername : hostname }}</v-toolbar-title>
            </div>
            <ul class="navi" :expand="$vuetify.breakpoint.mdAndUp">
                <li v-for="(category, index) in routes" :key="index" :prepend-icon="category.icon"
                    :class="[category.path !== '/' && currentPage.includes(category.path) ? 'active' : '', 'nav-item']"
                    :value="true"
                    >
                    <router-link
                        slot="activator" class="nav-link" exact :to="category.path" @click.prevent
                        v-if="
                            (category.title === 'Webcam' && boolNaviWebcam) ||
                            (category.title === 'Heightmap' && boolNaviHeightmap) ||
                            (
                                category.title !== 'Webcam' &&
                                category.title !== 'Heightmap' &&
                                (klippy_state !== 'error' || category.alwaysShow)
                            )
                        ">
                        <v-icon>mdi-{{ category.icon }}</v-icon>
                        <span class="nav-title">{{ category.title }}</span>
                        <v-icon class="nav-arrow" v-if="category.children && category.children.length > 0">mdi-chevron-down</v-icon>
                    </router-link>

                    <ul class="child">
                        <li v-for="(page, pageIndex) in category.children" class="nav-item" v-bind:key="`${index}-${pageIndex}`">
                            <router-link :to="page.path" class="nav-link" @click.prevent v-if="klippy_state !== 'error' || page.alwaysShow">
                                <v-icon>mdi-{{ page.icon }}</v-icon>
                                <span class="nav-title">{{ page.title }}</span>
                            </router-link>
                        </li>
                    </ul>
                </li>
            </ul>
        </v-navigation-drawer>

        <v-app-bar app elevate-on-scroll>
            <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
            <v-spacer></v-spacer>
            <v-btn color="primary" class="mr-5 d-none d-sm-flex" v-if="isConnected && save_config_pending" :loading="loadingConfigChanged" @click="clickSaveConfig">SAVE CONFIG</v-btn>
            <v-btn color="error" class="button-min-width-auto px-3" v-if="isConnected" :loading="loadingEmergencyStop" @click="clickEmergencyStop"><v-icon class="mr-sm-2">mdi-alert-circle-outline</v-icon><span class="d-none d-sm-flex">Emergency Stop</span></v-btn>
            <v-menu bottom left :offset-y="true">
                <template v-slot:activator="{ on, attrs }">
                    <v-btn dark icon v-bind="attrs" v-on="on">
                        <v-icon>mdi-dots-vertical</v-icon>
                    </v-btn>
                </template>

                <v-list dense>
                    <v-list-item link @click="doRestart()">
                        <v-list-item-title><v-icon class="mr-3">mdi-sync</v-icon>Restart</v-list-item-title>
                    </v-list-item>
                    <v-list-item link @click="doFirmwareRestart()">
                        <v-list-item-title><v-icon class="mr-3">mdi-sync</v-icon>FW Restart</v-list-item-title>
                    </v-list-item>
                    <v-divider></v-divider>
                    <v-list-item link @click="doHostReboot()">
                        <v-list-item-title><v-icon class="mr-3">mdi-power</v-icon>Reboot Host</v-list-item-title>
                    </v-list-item>
                    <v-list-item link @click="doHostShutdown()">
                        <v-list-item-title><v-icon class="mr-3">mdi-power</v-icon>Shutdown Host</v-list-item-title>
                    </v-list-item>
                </v-list>
            </v-menu>
        </v-app-bar>

        <v-main id="content">
            <v-scroll-y-transition>
                <v-container fluid id="page-container" class="container">
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </v-container>
            </v-scroll-y-transition>
        </v-main>

        <v-dialog v-model="overlayDisconnect" persistent width="300">
            <v-card color="primary" dark >
                <v-card-text class="pt-2">
                    Connecting...
                    <v-progress-linear indeterminate color="white" class="mb-0"></v-progress-linear>
                </v-card-text>
            </v-card>
        </v-dialog>

        <v-footer app class="d-block">
            <span>v{{ getVersion }}</span>
            <span v-if="version" class="d-none d-sm-inline"> - {{ version }}</span>
            <span class="float-right">Made with <img src="/img/heart.png" height="15" title="love" alt="heard" /> by <a href="http://www.vorondesign.com/" target="_blank"><img src="/img/voron.png" height="15" title="VoronDesign" alt="Logo - VoronDesign" /></a></span>
        </v-footer>
    </v-app>
</template>

<script>
    import routes from './routes';
    import { mapState, mapGetters } from 'vuex';

export default {
    props: {
        source: String,
    },
    components: {

    },
    data: () => ({
        overlayDisconnect: true,
        drawer: null,
        activeClass: 'active',
        routes: routes,
        //is_ready: false,
        boolNaviHeightmap: false,
        loadingEmergencyStop: false,
        loadingConfigChanged: false,
    }),
    created () {
        this.$vuetify.theme.dark = true;
        this.boolNaviHeightmap = (typeof(this.config.bed_mesh) !== "undefined");
    },
    computed: {
        currentPage: function() {
          return this.$route.fullPath;
        },
        ...mapState({
            isConnected: state => state.socket.isConnected,
            hostname: state => state.printer.hostname,
            version: state => state.printer.software_version,
            klippy_state: state => state.server.klippy_state,

            toolhead: state => state.printer.toolhead,
            printername: state => state.gui.general.printername,
            virtual_sdcard: state => state.printer.virtual_sdcard,
            current_file: state => state.printer.print_stats.filename,
            current_file_position: state => state.printer.virtual_sdcard.file_position,
            boolNaviWebcam: state => state.gui.webcam.bool,
            config: state => state.printer.configfile.config,
            save_config_pending: state => state.printer.configfile.save_config_pending,
        }),
        ...mapGetters([
            'getTitle',
            'getVersion'
        ]),
        print_percent: {
            get() {
                return this.$store.getters["printer/getPrintPercent"];
            }
        }
    },
    methods: {
        clickEmergencyStop: function() {
            // TODO loading emergency stop
            //this.$store.commit('setLoading', { name: 'btnEmergencyStop' });
            this.$socket.sendObj('printer.emergency_stop', {});
        },
        clickSaveConfig: function() {
            this.$store.commit('server/addEvent', "SAVE_CONFIG");
            // TODO loading save_config button
            //this.$store.commit('setLoading', { name: 'btnSaveConfig' });
            this.$socket.sendObj('printer.gcode.script', { script: "SAVE_CONFIG" });
        },
        doRestart: function() {
            this.$store.commit('server/addEvent', "RESTART");
            this.$socket.sendObj('printer.gcode.script', { script: "RESTART" });
        },
        doFirmwareRestart: function() {
            this.$store.commit('server/addEvent', "FIRMWARE_RESTART");
            this.$socket.sendObj('printer.gcode.script', { script: "FIRMWARE_RESTART" });
        },
        doHostReboot: function() {
            this.$socket.sendObj('machine.reboot', { });
        },
        doHostShutdown: function() {
            this.$socket.sendObj('machine.shutdown', { });
        },
        drawFavicon(val) {
            let favicon16 = document.querySelector("link[rel*='icon'][sizes='16x16']");
            let favicon32 = document.querySelector("link[rel*='icon'][sizes='32x32']");
            if (val > 0 && val < 100) {
                let faviconSize = 64;

                let canvas = document.createElement('canvas');
                canvas.width = faviconSize;
                canvas.height = faviconSize;
                let context = canvas.getContext('2d');
                let centerX = canvas.width / 2;
                let centerY = canvas.height / 2;
                let radius = 32;
                let percent = val * 100;

                /* draw the grey circle */
                context.beginPath();
                context.moveTo(centerX, centerY);
                context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                context.closePath();
                context.fillStyle = "#ddd";
                context.fill();
                context.strokeStyle = "rgba(200, 208, 218, 0.66)";
                context.stroke();

                /* draw the green circle based on percentage */
                let startAngle = 1.5 * Math.PI;
                let endAngle = 0;
                let unitValue = (Math.PI - 0.5 * Math.PI) / 25;
                if (percent >= 0 && percent <= 25) endAngle = startAngle + (percent * unitValue);
                else if (percent > 25 && percent <= 50) endAngle = startAngle + (percent * unitValue);
                else if (percent > 50 && percent <= 75) endAngle = startAngle + (percent * unitValue);
                else if (percent > 75 && percent <= 100) endAngle = startAngle + (percent * unitValue);

                context.beginPath();
                context.moveTo(centerX, centerY);
                context.arc(centerX, centerY, radius, startAngle, endAngle, false);
                context.closePath();
                context.fillStyle = "#e41313";
                context.fill();

                favicon16.href = canvas.toDataURL('image/png');
                favicon32.href = canvas.toDataURL('image/png');
            } else {
                favicon16.href = "/img/icons/favicon-16x16.png"
                favicon32.href = "/img/icons/favicon-32x32.png"
            }
        }
    },
    watch: {
        current_file_position() {
            this.drawFavicon(this.print_percent);
        },
        current_file: {
            handler: function(newVal) {
                this.$socket.sendObj("server.files.metadata", { filename: newVal }, "files/getMetadataCurrentFile");
            }
        },
        config() {
            this.boolNaviHeightmap = (typeof(this.config.bed_mesh) !== "undefined");
        },
        isConnected(newVal) {
            this.overlayDisconnect = !newVal;
        }
    },
}
</script>

<style>
    .sidebar-wrapper:before {
        position: absolute;
        content: ' ';
        top: 0; right: 0; bottom: 0; left: 0;
        background: #000;
        opacity: .7;
    }

    #nav-header {
        text-align: center;
        border-bottom: 1px solid #ffffff40;
        margin-bottom: 1em;
        padding: .75em 0 .75em 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #nav-header img {
        height: 40px;
        margin-right: 1em;
    }

    #nav-header .v-toolbar__title {
        font-size: 24px;
        vertical-align: middle;
    }

    .v-navigation-drawer__content {
        z-index: 10;
    }

    nav ul.navi {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    nav ul.navi li.nav-item {
        padding: 0;
        margin: 0;
    }

    nav ul.navi a.nav-link {
        display: block;
        color: white;
        border-radius: .5em;
        line-height: 30px;
        font-size: 14px;
        font-weight: 600;
        padding: 10px 15px;
        opacity: .85;
        transition: all .15s ease-in;
        text-decoration: none;
        margin: 0.5em 1em;
    }

    nav ul.navi a.nav-link:hover,
    nav ul.navi li.active>a.nav-link,
    nav ul.navi a.nav-link.router-link-active {
        background: rgba(255,255,255,.3);
        opacity: 1;
    }

    nav ul.navi li.active>a.nav-link i.nav-arrow ,
    nav ul.navi a.nav-link.router-link-active i.nav-arrow {
        transform: rotate(0);
    }

    nav ul.navi a.nav-link>i.v-icon {
        color: white;
        font-size: 1.7em;
        margin-right: .5em;
    }

    nav ul.navi a.nav-link>span.nav-title {
        line-height: 30px;
        font-weight: 600;
        text-transform: uppercase;
        white-space: nowrap;
        letter-spacing: 1px;
    }

    nav ul.navi a.nav-link>i.nav-arrow {
        float: right;
        margin-top: 5px;
        margin-right: 0;
        transform: rotate(90deg);
    }

    nav ul.navi>li>ul.child {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    nav ul.navi>li>a.router-link-active+ul.child,
    nav ul.navi>li.active>ul.child {
        display: block;
    }

    nav ul.navi>li>ul.child a.nav-link {
        padding: 5px 15px 5px 15px;
    }

    nav ul.navi>li>ul.child a.nav-link:hover,
    nav ul.navi>li>ul.child a.nav-link.router-link-active {
        background: rgba(255,255,255,.2);
    }

    nav ul.navi>li>ul.child a.nav-link>span.nav-title {
        text-transform: capitalize;
        font-weight: 400;
        font-size: 14px;
    }

    .v-btn--absolute.v-btn--bottom, .v-btn--fixed.v-btn--bottom {
        bottom: 52px;
    }


</style>
