<template>
    <div
        v-if="visible"
        id="titleBar"
    >
        <div class="bar-container">
            <div class="bar-item left">
                <img
                    v-if="!showSideBar"
                    src="/resources/static/images/Hamburger.svg"
                    alt="menu"
                    class="menu"
                    @click="toggleSideBar"
                />
                <img
                    v-else
                    src="/resources/static/images/Close.svg"
                    alt="menu-exit"
                    class="menu"
                    @click="toggleSideBar"
                />
            </div>
            <div class="bar-item center">
                {{ labels.userLabel }}: {{ username }} - {{ labels.equipmentLabel }}: {{ cheid }}
            </div>
            <div class="bar-item right">
                <div class="clock-time">
                    {{ clockTime }}
                </div>
            </div>
        </div>

        <transition name="fade-in">
            <div
                v-if="showSideBar"
                class="sidebar-cover"
                @click="toggleSideBar"
            ></div>
        </transition>
        <transition name="slide-in-left">
            <div
                v-if="showSideBar"
                class="sidebar"
            >
                <div class="sidebar-text">
                    {{ username }}<br>_________________________<br>
                    <div
                        v-if="GlobalState.isSortAndFilterOptionDisplayed()"
                        class="sidebar-button"
                        @click="sortAndFilterClick(presenter)"
                    >
                        <img
                            src="/resources/static/images/JobList.svg"
                            alt="jobList"
                            class="sidebar-button-image"
                        />
                        <span class="sidebar-button-text">{{ labels.jobListSortAndFilter }}</span>
                    </div>
                    <div
                        class="sidebar-button"
                        @click="logoutClick(presenter)"
                    >
                        <img
                            src="/resources/static/images/Logout.svg"
                            alt="executeLogout"
                            class="sidebar-button-image"
                        />
                        <span class="sidebar-button-text">{{ labels.logOut }}</span>
                    </div>
                </div>
                <div class="toggle-switch">
                    <div class="toggleDiv">
                        <img
                            src="/resources/static/images/sun.svg"
                            class="sun"
                        >
                        <div
                            v-if="mode==='Day Mode'"
                            class="mode-div"
                        >
                            <input
                                id="switch"
                                type="checkbox"
                                @click="themeToggle(presenter);"
                            /><label for="switch"></label>
                            {{ labels.dayMode }}
                        </div>

                        <div
                            v-if="mode==='Night Mode'"
                            class="mode-div"
                        >
                            <input
                                id="switch"
                                type="checkbox"
                                checked
                                @click="themeToggle(presenter);"
                            /><label for="switch"></label>
                            {{ labels.nightMode }}
                        </div>
                        <img
                            src="/resources/static/images/moon.svg"
                            class="moon"
                        >
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import Localizations from '../../../utils/Localizations';
import GlobalState from '../../../state/GlobalState';
import {TitleBarPresenter} from '../../../presenters/TitleBarPresenter';

export default {
    name: 'TitleBar',
    props: {
        presenter: {
            type: TitleBarPresenter,
            required: true
        },
        sortAndFilterClick: {
            type: Function,
            required: false,
            default: () => {}
        },
        logoutClick: {
            type: Function,
            required: false,
            default: () => {}
        },
        themeToggle: {
            type: Function,
            required: false,
            default: () => {}
        }
    },
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data() {
        return {
            visible: false,
            showSideBar: false,
            labels: Localizations.getTranslatedLabels('titleBar'),
            GlobalState,
            username: '',
            cheid: '',
            clockTime: this.updateClockTime(),
            theme: 'theme-light',
            mode: 'Day Mode'
        };
    },
    /**
     * Created section of this UI component
     */
    created: function () {
        setInterval(() => {
            this.clockTime = this.updateClockTime();
        }, 1000);
    },
    methods: {
        /**
         * Setter for Title bar visible or not
         * @param {boolean} inIsVisible
         */
        setVisible: function(inIsVisible) {
            this.visible = inIsVisible;
        },
        /**
         * Function to toggle side bar
         */
        toggleSideBar: function() {
            this.showSideBar = !this.showSideBar;
        },
        /**
         * Setter for side bar visibility
         * @param {boolean} inIsVisible
         */
        setSideBarVisible: function(inIsVisible) {
            this.showSideBar = inIsVisible;
        },
        /**
         * Setter for Username
         * @param {string} inUsername
         */
        setUsername: function(inUsername) {
            this.username = inUsername;
        },
        /**
         * Setter for Che Id
         * @param {string} inCheId
         */
        setCheId: function(inCheId) {
            this.cheid = inCheId;
        },
        /**
         * Function to Update Clock time
         * @returns {string}
         */
        updateClockTime: function() {
            const date = new Date();
            let hour = this.getZeroPad(date.getHours());
            let minute = this.getZeroPad(date.getMinutes());
            let seconds = this.getZeroPad(date.getSeconds());
            return hour + ':' + minute + ':' + seconds;
        },
        /**
         * Getter for Zero padding
         * @param {string} inNum
         * @returns {string}
         */
        getZeroPad: function getZeroPad(inNum) {
            return (parseInt(inNum, 10) >= 10 ? '' : '0') + inNum;
        },
        /**
         * Function to change Toggle Text for toggle switch
         */
        changeToggleText: function changeToggleText(){
            this.mode=this.mode==='Day Mode'?this.mode='Night Mode':this.mode='Day Mode';
        }
    }
};
</script>

<style scoped>
    .bar-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .bar-item {
        text-align: center;
        color: var(--color-white);
    }
    .left {
        width: 40px;
    }
    .center {
        font-size: 20px;
        margin-top: 30px;
    }
    .right {
        width: 70px;
        padding-top: 30px;
        padding-right: 12px;
    }
    .right .clock-time {
        color: var(--color-white);
        font-size: 20px;
        font-family: "San Francisco", "Segoe UI", "Roboto", "Oxygen-Sans", "Fira Sans", "Droid Sans", "Ubuntu",
        "Cantarell", "Helvetica Neue", "Arial", "sans-serif";
    }
    .menu {
        margin-top: 33px;
        filter: var(--filter-white);
        cursor: pointer;
    }
    .sidebar {
        background-color: var(--color-secondary);
        height: 100%;
        width: 374px;
        position: fixed;
        top: 60px;
        left: 0;
    }
    .sidebar-text {
        color: var(--color-white);
        font-size: 12px;
        margin-left: 30px;
        margin-top: 30px;
    }
    .sidebar-button {
        margin-top: 16px;
        cursor: pointer;
    }
    .sidebar-button-image {
        display: inline;
        vertical-align: middle;
        margin-right: 10px;
        color: var(--color-white);
        filter: var(--filter-white);
    }
    .sidebar-button-text {
        vertical-align: middle;
        font-size: 16px;
    }
    .sidebar-cover {
        background-color: var(--color-secondary);
        height: 100%;
        width: 100%;
        position: fixed;
        top: 60px;
        opacity: 0.7;
    }
    /**
     * ----------------------------------------
     * animation scale-in-ver-top
     * ----------------------------------------
     */

    .slide-in-left-enter-active {
        -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    .slide-in-left-leave-active{
        -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
    }

    .fade-in-enter-active {
        -webkit-animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }
    .fade-in-leave-active {
        -webkit-animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both reverse;
        animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both reverse;
    }

    .toggle-switch { 
        padding-bottom: 0.5px;
        width: 100%;
        height: 25px;
        position: absolute;
        right: 0;
        bottom: 110px;
        color: var(--color-white);
    }

    .toggleDiv {
        border-top: 1px solid var(--color-white);
        display: flex;
        flex-direction: row;
    }

    .mode-div {
        width: 33px;
    }

    .sun {
        padding-bottom: 18px;
        padding-right: 5px;
        padding-left: 10px;
    }

    .moon {
        padding-bottom: 18px;
        padding-left: 5px;
        
    }

    /* ----------------------------------------------
 * Generated by Animista on 2019-9-11 15:34:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

    /**
     * ----------------------------------------
     * animation slide-in-left
     * ----------------------------------------
     */
    @-webkit-keyframes slide-in-left {
        0% {
            -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }
    @keyframes slide-in-left {
        0% {
            -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }
    /* ----------------------------------------------
     * Generated by Animista on 2019-9-11 16:11:18
     * Licensed under FreeBSD License.
     * See http://animista.net/license for more info.
     * w: http://animista.net, t: @cssanimista
     * ---------------------------------------------- */

    /**
     * ----------------------------------------
     * animation fade-in
     * ----------------------------------------
     */
    @-webkit-keyframes fade-in {
        0% {
            opacity: 0;
        }
        100% {
            opacity: .7;
        }
    }
    @keyframes fade-in {
        0% {
            opacity: 0;
        }
        100% {
            opacity: .7;
        }
    }

    input[type=checkbox]{
        height: 0;
        width: 0;
        visibility: hidden;
    }

    label {
        cursor: pointer;
        text-indent: -9999px;
        width: 32px;
        height: 16px;
        background: var(--color-white);
        display: block;
        border-radius: 11px;
        position: relative;
        left: 0.3px;
        right:0.3px;
        bottom: 2px;
        top: 1px;
    }

    label:after {
        content: '';
        position: absolute;
        left: 0.3px;
        right:0.3px;
        bottom: 2px;
        top: 1px;
        width: 14px;
        height: 14px;
        background: var(--color-secondary);
        border-radius: 30px;
        transition: 0.3s;
    }
    input:checked + label {
        background: var(--color-white);
    }

    input:checked + label:after {
        left: calc(100% - 2px);
        transform: translateX(-100%);
    }

    label:active:after {
        width: 28px;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
</style>