<template>
    <div
        v-if="$store.state.interfaceTexts"
        class="navigation"
        :class="{ rangeslider: rangeslider }"
    >
        <!-- video close menu start -->
        <div
            v-if="bigCloseBtn"
            class="video-close"
            :class="{ closing: closingVideo }"
        >
            <div
                class="btn video-menu-item pb-0 video-close-btn"
                @click="toggleClosingVideo"
            >
                <div>
                    <fugger-button
                        theme="light"
                        type="close-btn"
                        iconname="close-icon"
                    ></fugger-button>
                </div>
            </div>
            <div v-if="confirmClose" class="video-close-overlay">
                <button @click="closeVideo">
                    <span>
                        {{ getInterfaceText('answer_yes') }}
                    </span>
                </button>
                <button @click="toggleClosingVideo">
                    <span>
                        {{ getInterfaceText('answer_no') }}
                    </span>
                </button>
                <div class="video-close-description p-2">
                    <p class="p1">
                        {{ getInterfaceText('request_movie_quit') }}
                    </p>
                </div>
            </div>
            <div
                class="overlay"
                :class="[{ visible: closingVideo && confirmClose }]"
            ></div>
        </div>
        <!-- video close menu end -->

        <!-- left side languages-menu start -->
        <div v-if="idle & (1 < 0)" class="languages-menu">
            <div
                v-for="lang in languages"
                :key="'lang-menu-' + lang.code"
                @click="setIdleLanguage(lang)"
            >
                <span
                    :class="{
                        activelang: activeLang === lang.code,
                    }"
                    @click="setIdleLanguage(lang)"
                >
                    <fugger-button type="language-btn">
                        <slot>{{ lang.title }}</slot>
                    </fugger-button>
                </span>
            </div>
        </div>
        <!-- left side languages-menu end -->

        <!-- left-bottom side buttons container: start -->
        <div class="left-side-buttons">
            <div
                class="overview"
                :class="{ visible: impressum || overview || goback || zoom }"
            >
                <div class="btn menu-item pb-0">
                    <div v-if="goback" @click="$router.push('/')">
                        <fugger-button
                            type="menulink-btn"
                            theme="dark"
                            iconpos="left"
                            iconname="back-icon"
                        >
                            <slot>
                                {{ getInterfaceText('button_back') }}
                            </slot>
                        </fugger-button>
                    </div>

                    <div v-if="overview" @click="closemodal">
                        <fugger-button type="overview-btn">
                            <slot>
                                {{ getInterfaceText('button_overview') }}
                            </slot>
                        </fugger-button>
                    </div>

                    <div v-if="zoom && !overview">
                        <fugger-button
                            type="zoom-btn"
                            @startzoom="startzoom()"
                            @goback="back()"
                        >
                            <slot>
                                {{ getInterfaceText('button_back') }}
                            </slot>
                        </fugger-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- left side buttons container: end -->

        <!-- right-side navigation-menu: start -->
        <transition name="slide-left">
            <!--     @click="toggleNavigation"     v-if="open"-->
            <div v-if="!idle" class="main-navigation">
                <div
                    class="navi-list"
                    :class="[
                        { videomode: bigCloseBtn },
                        { visible: open },
                        { slideleft: slideLeft },
                    ]"
                >
                    <!-- fullpage overlay when menu-item is active: start -->
                    <div
                        class="overlay"
                        :class="
                            (active > 0 && active < 5) || open ? 'visible' : ''
                        "
                    ></div>
                    <!-- fullpage overlay when menu-item is active: end -->

                    <!-- language-menu-button: start -->
                    <transition-group name="fade">
                        <template v-if="!burgerMenuClosed">
                            <div
                                v-if="languages.length > 1"
                                key="btn_menu_lang"
                                class="btn menu-item with-submenu pb-0"
                                :class="{ active: active === 1 }"
                            >
                                <div class="submenu-items">
                                    <div
                                        v-for="lang in languages"
                                        :key="'lang-' + lang.code"
                                        class="submenu-item"
                                        :class="{
                                            activelang:
                                                activeLang === lang.code,
                                        }"
                                        @click="selectLang(lang)"
                                    >
                                        <span @click="selectLang(lang)">
                                            <div
                                                class="h-100 d-flex align-items-center m-0 p-0"
                                            >
                                                {{ lang.title }}
                                            </div>
                                        </span>
                                    </div>
                                </div>
                                <!--                      @click="setLanguage"-->
                                <div>
                                    <fugger-button
                                        :active="active === 1"
                                        :langcode="activeLang"
                                        width="80"
                                        type="nav-btn"
                                        theme="light"
                                        @activeiconclick="closeActive(1)"
                                        @iconclick="setActive(1)"
                                    >
                                        <div
                                            class="h-100 d-flex align-items-center m-0 p-0"
                                            @click="closeActive"
                                        >
                                            <slot>
                                                {{
                                                    $store.state.currentLanguage
                                                }}
                                            </slot>
                                        </div>
                                    </fugger-button>
                                </div>
                            </div>
                            <div
                                v-if="impressumContent !== ''"
                                key="btn_menu_imprint"
                                class="btn menu-item pb-0"
                                :class="{ active: active === 2 }"
                            >
                                <!--                      @click="changeFontSize"-->
                                <div>
                                    <fugger-button
                                        :active="active === 2"
                                        iconname="impressum-icon"
                                        type="nav-btn"
                                        theme="light"
                                        @activeiconclick="closeActive(2)"
                                        @iconclick="setActive(2)"
                                    >
                                        <div
                                            class="m-0 p-0 active-impressum"
                                            @click="showImpressum()"
                                        >
                                            {{
                                                getInterfaceText(
                                                    'menu_impressum',
                                                )
                                            }}
                                        </div>
                                    </fugger-button>
                                </div>
                            </div>
                            <!-- contrast-menu-button: start -->
                            <div
                                key="btn_menu_contrast"
                                class="btn menu-item with-submenu pb-0"
                                :class="{ active: active === 3 }"
                            >
                                <div class="submenu-items">
                                    <div
                                        class="submenu-item"
                                        :class="{
                                            activecontrast:
                                                activeContrast === 'root',
                                        }"
                                        @click="selectContrast('root')"
                                    >
                                        {{
                                            getInterfaceText(
                                                'menu_contrast_option_regular',
                                            )
                                        }}
                                    </div>
                                    <div
                                        class="submenu-item"
                                        :class="{
                                            activecontrast:
                                                activeContrast === 'dark',
                                        }"
                                        @click="selectContrast('dark')"
                                    >
                                        {{
                                            getInterfaceText(
                                                'menu_contrast_option_dark',
                                            )
                                        }}
                                    </div>
                                </div>
                                <!--                      @click="changeFontSize"-->
                                <div>
                                    <fugger-button
                                        :active="active === 3"
                                        iconname="contrast-icon"
                                        type="nav-btn"
                                        theme="light"
                                        @activeiconclick="closeActive(3)"
                                        @iconclick="setActive(3)"
                                    >
                                        <div :class="activeContrast">
                                            {{
                                                getInterfaceText(
                                                    'menu_contrast',
                                                )
                                            }}
                                        </div>
                                    </fugger-button>
                                </div>
                            </div>
                            <!-- contrast-menu-button: start -->
                            <!-- fontsize-menu-button: start -->
                            <div
                                key="btn_menu_fonts"
                                class="btn menu-item with-submenu pb-0"
                                :class="{ active: active === 4 }"
                            >
                                <div class="submenu-items fontsize">
                                    <div
                                        class="submenu-item minus"
                                        :class="
                                            dataFontsize > 0 ? '' : 'disabled'
                                        "
                                        @click="changeFontSize('minus')"
                                    >
                                        -
                                    </div>
                                    <div class="submenu-item text">Aa</div>
                                    <div
                                        class="submenu-item plus"
                                        :class="
                                            dataFontsize < 2 ? '' : 'disabled'
                                        "
                                        @click="changeFontSize('plus')"
                                    >
                                        +
                                    </div>
                                </div>
                                <div>
                                    <fugger-button
                                        :active="active === 4"
                                        iconname="fontsize-icon"
                                        type="nav-btn"
                                        theme="light"
                                        @activeiconclick="closeActive(4)"
                                        @iconclick="setActive(4)"
                                    >
                                        {{ getInterfaceText('menu_fontsize') }}
                                    </fugger-button>
                                </div>
                            </div>
                            <!-- fontsize-menu-button: end -->
                        </template>
                    </transition-group>
                    <!-- toggle-menu button: start -->
                    <div
                        v-if="hamburger"
                        class="btn menu-item pb-0 toggle-btn"
                        :class="[{ active: open }, { visible: !slideLeft }]"
                    >
                        <div @click="toggleNavigation">
                            <fugger-button
                                :active="!burgerMenuClosed"
                                theme="light"
                                type="toggle-btn"
                            ></fugger-button>
                        </div>
                    </div>
                    <!-- toggle-menu button: end -->
                </div>
            </div>
        </transition>
        <!-- right-side navigation-menu: end -->
        <Modal
            v-if="impressum && impressumContent !== ''"
            class="impressum"
            :content="impressumContent"
            @closemodal="closemodal"
        />
    </div>
</template>

<script>
import FuggerButton from './FuggerButton.vue'
import Modal from './Modal.vue'
import { eventbus } from './index'

export default {
    name: 'Navigation',
    components: {
        FuggerButton,
        Modal,
    },
    props: {
        impressumContent: {
            type: String, // later as Object
            default: '',
        },
        rangeslider: {
            type: Boolean,
            default: false,
        },
        languages: {
            type: Array,
            default: () => new Array(),
            required: true,
        },
        currentShortLang: {
            type: String,
            default: '',
            // required: true,
        },
        hamburger: {
            type: Boolean,
            default: false,
        },
        overview: {
            type: Boolean,
            default: false,
        },
        goback: {
            type: Boolean,
            default: false,
        },
        gobackLabel: {
            type: String,
            default: 'back',
        },
        zoom: {
            type: Boolean,
            default: false,
        },
        bigCloseBtn: {
            type: Boolean,
            default: false,
        },
        confirmClose: {
            type: Boolean,
            default: true,
        },
        idle: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            activeContrast: 'root',
            open: false,
            closingVideo: false,
            impressum: false,
            overviewVisible: true,
            active: 0,
            burgerMenuClosed: this.hamburger ? true : false,
            openSelectLanguage: false,
            activeLang: '',
            htmlElement: null,
            bodyElement: null,
            dataFontsize: 0,
            slideLeft: true,
        }
    },
    watch: {
        hamburger(newVar) {
            this.burgerMenuClosed = newVar
        },
    },
    mounted() {
        this.htmlElement = document.querySelector('html')
        this.bodyElement = document.querySelector('body')

        setTimeout(() => {
            this.slideLeft = false
        }, 2000)
        this.activeLang = this.currentShortLang
        eventbus.$on('idle', () => {
            this.bodyElement.setAttribute('data-theme', 'root')
            this.bodyElement.setAttribute('data-fontsize', 0)
        })
    },
    methods: {
        startzoom() {
            this.$emit('startzoom')
            eventbus.$emit('startzoom')
        },
        back() {
            this.$emit('goback')
            eventbus.$emit('goback')
        },
        closemodal() {
            this.impressum = false
            this.overviewVisible = false
            this.$emit('closemodal')
        },
        showImpressum() {
            this.impressum = true
            this.overviewVisible = true
            eventbus.$emit('showImpressum')
            this.closeActive()
        },
        closeActive() {
            this.active = 0
        },
        setActive(id) {
            this.active = id
        },
        closeVideo() {
            this.closingVideo = false
            eventbus.$emit('closeVideo')
        },
        toggleClosingVideo() {
            this.closingVideo = !this.closingVideo
            eventbus.$emit('closingVideo', this.closingVideo)
        },
        toggleNavigation() {
            this.burgerMenuClosed = !this.burgerMenuClosed
            eventbus.$emit('burgerMenuOpen', !this.burgerMenuClosed)
        },
        selectContrast(contrast) {
            this.activeContrast = contrast
            if (contrast === 'dark') {
                this.bodyElement.setAttribute('data-theme', 'dark')
            } else {
                this.bodyElement.setAttribute('data-theme', 'root')
            }
        },
        setLanguage(lang) {
            this.selectLang(lang)
            this.$emit('start', lang)
        },
        setIdleLanguage(lang) {
            this.selectLang(lang)
            // eventbus.$emit("setLanguage", lang);
            eventbus.$emit('start', lang)
        },
        selectLang(lang) {
            this.activeLang = lang.code
            this.$store.dispatch('setCurrentLanguage', lang.title)
            eventbus.$emit('setLanguage', lang)
            if (this.languages.length > 2) {
                this.toggleLanguageMenu()
            }
        },
        toggleLanguageMenu() {
            this.openSelectLanguage = !this.openSelectLanguage
        },

        changeFontSize(event) {
            if (event === 'plus') {
                if (this.dataFontsize < 2) {
                    this.dataFontsize++
                    this.bodyElement.setAttribute(
                        'data-fontsize',
                        this.dataFontsize,
                    )
                }
            } else {
                if (this.dataFontsize > 0) {
                    this.dataFontsize--
                    this.bodyElement.setAttribute(
                        'data-fontsize',
                        this.dataFontsize,
                    )
                }
            }
        },
    },
}
</script>

<style lang="scss" scoped>
@import 'assets/scss/variables';
@import 'assets/scss/global';

.navigation {
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    position: absolute;
    overflow: hidden;
    pointer-events: none;

    button {
        pointer-events: auto !important;
    }

    .main-navigation {
        z-index: 999;
        position: absolute;
        right: 0px;
        bottom: calc(50vw * var(--pxToVw));
        width: auto;
        display: inline-block;
        pointer-events: none;
    }

    &.rangeslider {
        .main-navigation {
            bottom: calc(180vw * var(--pxToVw));
        }
    }
}

.overlay {
    z-index: 0;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: all 0.3s 0.2s linear;

    &.visible {
        z-index: 999;
        opacity: 1;
        position: fixed;
        width: 100vw;
        height: 100vh;
        transition: all 0.2s linear;
    }
}

.navi-list {
    position: relative;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: calc(326vw * var(--pxToVw));
    display: inline-block;
    z-index: 1010;
    color: var(--primary);
    transition: all 0.3s linear;

    &.slideleft {
        transform: translateX(var(--menu-slideleft));
        transition: all 0.3s linear;

        /*&.videomode {
            transform: translateX(-100%);
            transition: all 0.3s linear;
        }*/
    }

    .menu-item {
        width: auto;
        display: block;
        height: calc(80vw * var(--pxToVw));
        margin: 0 0 calc(2vw * var(--pxToVw)) 0;
        padding: 0 0 0 var(--menu-icon-size);
        position: relative;
        right: 0;
        transform: translateX(var(--menu-transform));
        transition: all 0.2s linear;
        z-index: 998;
        font-size: calc(30vw * var(--pxToVw));
        pointer-events: all;

        &.with-submenu {
            transition: all 0.3s 0.2s linear;
        }

        .active-impressum {
            position: relative;
        }

        .button-wrap {
            display: inline-block;
            height: 100%;
            width: 100%;
            left: 0px;
            position: absolute;

            .nav-btn {
                height: 100%;
                padding-left: calc(100vw * var(--pxToVw));
            }
        }

        .submenu-items {
            height: auto;
            width: auto; //calc(100% - #{$menu-icon-size});
            min-width: calc(244vw * var(--pxToVw));

            text-align: left;
            position: absolute;
            bottom: calc(80vw * var(--pxToVw));
            //calc(#{$menu-item-height} - #{$menu-item-gap});
            right: calc(var(--menu-icon-size) + var(--menu-item-gap));
            opacity: 0;

            //background-color: white;
            transition: all 0.3s linear;
            visibility: hidden;

            .submenu-item {
                height: calc(80vw * var(--pxToVw));
                position: relative;
                bottom: 0;
                line-height: calc(80vw * var(--pxToVw));
                padding: calc(4vw * var(--pxToVw)) calc(15vw * var(--pxToVw)) 0;
                color: var(--primary);
                font-size: calc(30vw * var(--pxToVw));
                background-color: white;
                margin-bottom: calc(2vw * var(--pxToVw));

                &.activecontrast,
                &.activelang {
                    color: var(--primary);
                    position: relative;

                    &:after {
                        content: '';
                        position: absolute;
                        //background-image: url('./assets/icons/icons_30x30/icon_check.svg');
                        background-color: var(--primary);
                        mask-image: url('./assets/icons/icons_30x30/icon_check.svg');
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center;
                        right: calc(26vw * var(--pxToVw));
                        top: 50%;
                        color: #fff;
                        width: calc(30vw * var(--pxToVw));
                        height: calc(30vw * var(--pxToVw));
                        font-size: 30px;
                        transform: translateY(-50%);
                    }
                }
            }
        }

        &.active:not(.toggle-btn) {
            transition: all 0.2s linear;
            transform: translateX(0px);
            z-index: 1001;

            .submenu-items {
                height: auto;
                opacity: 1;
                transition: all 0.3s 0.2s linear;
                visibility: visible;
            }
        }

        &.active.toggle-btn {
            z-index: 1001;
        }
    }

    button {
        margin-left: 0;
        border: none;
        padding-left: calc(100vw * var(--pxToVw)) !important;
        color: var(--primary);
        float: left;
        font-weight: 500;
        span {
            padding-left: calc(100vw * var(--pxToVw)) !important;
        }
    }
}

.languages-wrapper {
    position: absolute;
    bottom: 0px;
    left: calc(-50vw * var(--pxToVw));
    ul {
        list-style: none;
    }
}
.open-btn {
    position: absolute;
    right: 0px;
    bottom: calc(100vw * var(--pxToVw));
    width: calc(50vw * var(--pxToVw));
}
.slide-left-right {
    transition: all 0.5s ease-in-out;
    z-index: 100;
    bottom: 0;
    right: 0;
    position: fixed;
    pointer-events: auto;
}

.slide-up-enter,
.slide-up-leave-active {
    bottom: -100%;
}

.fontsize {
    div {
        display: inline-block;
        float: left;
        text-align: center;
    }
    display: flex;
    justify-content: center;
    .submenu-item {
        &.plus,
        &.minus {
            //width: calc(32% - 2vw * #{$pxToVw});
            width: calc(80vw * var(--pxToVw));
            font-weight: 700;
            background-color: white;
            color: var(--primary);

            &.disabled {
                color: var(--btn-font-color-disabled);
                background-color: var(--btn-bg-disabled);
            }
        }

        &.text {
            font-weight: 700;
            flex-grow: 1;
            width: calc(80vw * var(--pxToVw));
            margin: 0 calc(2vw * var(--pxToVw));
            padding-top: calc(4vw * var(--pxToVw)) !important;
        }
    }
}

.video-close {
    position: fixed;
    top: 0;
    right: calc(80vw * var(--pxToVw));
    cursor: pointer;
    z-index: 1000;
    pointer-events: auto;

    .video-close-btn {
        width: calc(140vw * var(--pxToVw));
        height: calc(140vw * var(--pxToVw));
        display: block;
        margin: 0;
        padding: 0;
        position: relative;
        right: 0;
        transition: all 0.2s linear;

        filter: drop-shadow(0px -2.66667px 10.6667px rgba(0, 0, 0, 0.15));

        font-size: calc(30vw * var(--pxToVw));
        cursor: pointer;
    }
}

.overview {
    position: relative;
    left: 0;
    cursor: pointer;
    z-index: 11111;
    opacity: 0;
    transition: all 0.2s linear;

    &.visible {
        opacity: 1;
        transition: all 0.2s linear;
    }

    .menu-item {
        width: auto;
        display: block;
        height: calc(80vw * var(--pxToVw));
        margin: 0;
        position: relative;
        left: 0;
        padding: 0;
        transition: all 0.2s linear;
        z-index: 998;
        font-size: calc(30vw * var(--pxToVw));
        cursor: pointer;
    }
}

.video-close {
    .video-close-overlay {
        position: fixed;
        //right: 0px;
        z-index: 1010;
        top: 0;
        right: calc(220vw * var(--pxToVw));
        width: calc(452vw * var(--pxToVw));

        opacity: 0;
        visibility: hidden;
        transition: all 0.2s linear;

        .video-close-description {
            display: inline-block;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            background-color: white;
            position: relative;
            top: calc(2vw * var(--pxToVw));
            width: 100%;
            height: calc(80vw * var(--pxToVw));
            align-content: center;
            align-items: center;
        }

        button {
            width: calc(225vw * var(--pxToVw));
            height: calc(160vw * var(--pxToVw));

            float: left;
            background-color: white;

            //line-height: ;
            position: relative;
            //border-bottom: 1px solid $gray;

            &:nth-child(1) {
                margin-right: calc(2vw * var(--pxToVw));
                //border-right: 1px solid $gray;
            }

            span {
                font-family: ConduitITCStd;
                font-style: normal;
                line-height: calc(72vw * var(--pxToVw));
                font-weight: bold;
                color: var(--primary);
                font-size: calc(80vw * var(--pxToVw)) !important;
            }
            &:active {
                background-color: var(--primary-active);
                span {
                    color: white;
                }
            }
        }
    }

    &.closing {
        .video-close-overlay {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.2s linear;
        }
    }
}

.left-side-buttons {
    display: inline-block;
    position: fixed;
    bottom: calc(60vw * var(--pxToVw));
    left: 0px;
    z-index: 9999999;
    pointer-events: auto;
}

.rangeslider {
    .left-side-buttons {
        bottom: calc(250vw * var(--pxToVw));
    }
}

.languages-menu {
    position: absolute;
    left: 0;
    width: auto;
    top: 50vh;
    pointer-events: auto;
    box-shadow: 0 calc(2vw * var(--pxToVw)) calc(8vw * var(--pxToVw))
        rgba(0, 0, 0, 0.15);
}

.toggle-btn {
    opacity: 0;
    transition: opacity 0.3s linear;

    &.visible {
        opacity: 1;
        transition: opacity 0.4s 0.3s linear;
    }
}
</style>
