<template>
    <div
        class="d-flex flex-wrap flex-row headline-container"
        :class="[pos, languages.length > 1 && langmenu ? 'h-50' : '']"
    >
        <div
            class="site-headline-wrap"
            :class="[
                bgcolor ? ' has-bg-color d-flex flex-wrap flex-column ' : '',
                maxWidth ? 'site-headline-max-width' : '',
            ]"
        >
            <div
                v-if="headlineFirst"
                class="site-headline mb-1"
                :class="subheadline ? 'narrow-top' : ''"
            >
                <h1 class="text-left font-weight-bold m-0">
                    <slot name="headlineFirst"></slot>
                </h1>
                <h1
                    v-if="headlineSecond"
                    class="text-left font-weight-normal px-5 m-0"
                >
                    <slot name="headlineSecond"></slot>
                </h1>
            </div>
            <div v-if="subheadline" class="subheadline">
                <p class="text-left m-0">
                    <slot name="subheadline"></slot>
                </p>
            </div>
            <div
                v-if="languages.length > 1 && langmenu"
                class="languages-menu"
                :class="{ 'title-margin': !bgcolor }"
            >
                <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>
            <div
                v-else-if="langmenu"
                class="languages-menu"
                :class="{ 'title-margin': !bgcolor }"
            >
                <div @click="setIdleLanguage(languages[0])">
                    <span @click="setIdleLanguage(languages[0])">
                        <fugger-button type="language-btn">
                            <slot>Start</slot>
                        </fugger-button>
                    </span>
                </div>
            </div>
            <!-- left side languages-menu end -->
        </div>
    </div>
</template>

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

export default {
    name: 'FuggerTitle',
    components: {
        FuggerButton,
    },
    props: {
        headlineFirst: {
            type: Boolean,
            default: false,
        },
        headlineSecond: {
            type: Boolean,
            default: false,
        },
        subheadline: {
            type: Boolean,
            default: false,
        },
        maxWidth: {
            type: Boolean,
            default: false,
        },
        bgcolor: {
            type: Boolean,
            default: false,
        },
        langmenu: {
            type: Boolean,
            default: false,
        },
        languages: {
            type: Array,
            default: () => new Array(),
            required: true,
        },
        position: {
            type: String,
            default: 'top',
        },
    },
    data() {
        return {
            activeLang: null,
        }
    },
    computed: {
        pos() {
            if (this.position === 'center') {
                return 'align-content-center'
            } else if (this.position === 'top') {
                return 'align-content-top'
            } else {
                return 'align-content-end'
            }
        },
    },
    methods: {
        setIdleLanguage(lang) {
            this.$store.dispatch('setCurrentLanguage', lang.title)
            eventbus.$emit('setLanguage', lang)
            eventbus.$emit('start', lang)
        },
    },
}
</script>

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

.headline-container {
    position: fixed;
    left: 0px;
    //top: var(--main-content-padding);
}

.site-headline-wrap {
    //position: absolute;
    //top: 0px;
    left: calc(-1 * var(--main-content-padding));
    z-index: 10;
    &.site-headline-max-width {
        max-width: 30vw;
    }

    .site-headline {
        position: relative;
        min-height: calc(40vw * var(--pxToVw));
        // padding-top: calc(200vw * var(--pxToVw));
        &.narrow-top {
            padding-top: calc(70vw * var(--pxToVw));
        }
        padding-left: calc(60vw * var(--pxToVw));
        background-color: transparent;
        color: var(--primary);
        margin-bottom: calc(2vw * var(--pxToVw));
    }

    &.has-bg-color {
        .site-headline {
            background-color: var(--primary) !important;
            color: white !important;
            padding-top: calc(40vw * var(--pxToVw));
            padding-right: calc(40vw * var(--pxToVw));
        }
    }

    .subheadline {
        margin-top: calc(2vw * var(--pxToVw));
        // min-width: calc(200vw * var(--pxToVw));
        max-width: calc(519vw * var(--pxToVw));
        padding: calc(35vw * var(--pxToVw)) calc(43vw * var(--pxToVw))
            calc(34vw * var(--pxToVw)) calc(60vw * var(--pxToVw));
        height: auto;
        width: auto;
        background-color: white;
    }

    .languages-menu {
        position: relative;
        left: 0;
        width: auto;
        //top: 50vh;
        pointer-events: auto;
        display: inline-block;
        box-shadow: 0 calc(2vw * var(--pxToVw)) calc(8vw * var(--pxToVw))
            rgba(0, 0, 0, 0.15);
        &.title-margin {
            margin-top: calc(60vw * var(--pxToVw));
        }
    }
}
</style>
