<template>
    <div id="header" class="header" :class="{'scrolling': scrollingHeader}" v-if="!mobWidth">
        <div class="header-bg">
            <b-container class="header-container">
                <b-row class="header-top">
                    <b-col cols="10" sm="6" md="4" lg="4" class="header-logo align-content-center">
                        <b-link :to="iarcLink" target="_blank">
                            <img class="header-logo-img" :src="headerLogo" alt="IARC logo">
                        </b-link>
                    </b-col>
                    <b-col cols="10" lg="5" class="header-name d-flex justify-content-lg-center align-content-start">
                        <div class="header-name-logo">
                            <b-link
                                v-if="projectData.logo"
                                :to="projectData.logoLink"
                                :target="projectData.logoLink.startsWith('http') ? '_blank' : '_self'"
                            >
                                <img :src="projectData.logo" alt="web site logo">
                            </b-link>
                        </div>
                        <div class="header-name-text align-self-center">
                            <b-link :to="projectData.siteNameLink" class="headerlink">
                                <h1 class="mb-0">
                                    {{ projectData.siteName }}
                                </h1>
                            </b-link>
                        </div>
                    </b-col>
                    <b-col
                        cols="3"
                        class="header-lang d-none d-lg-flex justify-content-end align-content-start"
                    >
                        <b-dropdown
                            v-if="langPanel"
                            variant="link"
                            class="header-lang-btn"
                            :text="langPanel.actualLang"
                        >
                            <b-dropdown-item
                                v-for="(langItem, key) of langPanel.langList"
                                :key="key"
                                :href="langItem.link"
                                :class="{'active-lang': langPanel.actualLang === langItem.key}"
                            >
                                {{langItem.name}}
                            </b-dropdown-item>
                        </b-dropdown>
                        <b-link
                            :href="texts.donateLink"
                            target="_blank"
                            class="header-lang-donate d-flex align-items-center justify-content-center"
                            v-if="texts.donateIsVisible"
                        >
                            <div>{{texts.donateText}}</div>
                        </b-link>
                    </b-col>
                </b-row>
            </b-container>
        </div>
        <div id="header-menu" class="header-menu" :class="{'withBanner': opacityHeaderBg}">
            <b-container>
                <b-row>
                    <b-col cols="2" class="d-flex align-items-center" v-if="scrollingHeader">
                        <b-link :to="iarcLink" target="_blank">
                            <img class="header-menu-logo" :src="whiteLogo" alt="logo-white" v-if="scrollingHeader">
                        </b-link>
                    </b-col>
                    <b-col :cols="calculateMenuColumns" class="header-menu-row d-flex justify-content-between align-items-center">
                        <div class="header-menu-links d-flex justify-content-between align-items-center">
                            <div
                                    class="header-menu-links-item"
                                    :class="{'header-menu-links-item-active': link.isActive}"
                                    v-for="(link, index) of links"
                                    :key="index"
                                    @mouseenter="toggleChildMenu(link, true)"
                                    @mouseleave="toggleChildMenu(link, false)">
                                <b-link :to="link.path" class="header-menu-links-item-home" v-if="link.name === 'Home'" >
                                    <img :src=" link.isActive ? '/img/home_active.svg' : '/img/home.svg'" alt="home icon">
                                </b-link>
                                <div class="header-menu-links-item-drop d-flex align-items-center"
                                        v-else-if="link.child">
                                    <b-link :to="link.path">{{link.name}}</b-link>
                                    <b-icon icon="triangle-fill"
                                            aria-hidden="true"
                                            :rotate="showChildMenu && link === actualLink ? 180 : 90"
                                            class="arrowIconsStyles"
                                            v-if="link.child.text"
                                    ></b-icon>
                                    <div
                                        class="header-menu-links-item-drop-mega"
                                        v-if="showChildMenu && link === actualLink && link.child.text"
                                    >
                                        <div class="mega-menu">
                                            <b-container>
                                                <b-row class="py-4">
                                                    <b-col cols="2">
                                                        <div class="mega-menu-links d-flex flex-column">
                                                            <b-link
                                                                v-for="(link, key) of link.child.links"
                                                                :key="key"
                                                                :to="link.path" :class="{'pt-2': key !== 0, 'active': link.isActive}"
                                                            >
                                                                {{link.name}}
                                                            </b-link>
                                                        </div>
                                                    </b-col>
                                                    <b-col cols="5" class="mega-menu-text" v-html="link.child.text">
                                                    </b-col>
                                                    <b-col cols="5" class="mega-menu-right">
                                                        <div class="mega-menu-right-img">
                                                            <b-link v-if="link.child.img" :to="link.child.img.path">
                                                                <img :src="link.child.img.link" alt="img">
                                                            </b-link>
                                                        </div>
                                                        <div class="mega-menu-right-social align-self-end">
                                                            <div class="mega-menu-right-social-title">
                                                                {{link.child.social.title}}
                                                            </div>
                                                            <div class="mega-menu-right-social-links d-flex">
                                                                <b-link
                                                                    class="footer-top-content-link-item mr-2"
                                                                    v-if="link.child.social.twitter"
                                                                    :href="link.child.social.twitter.link"
                                                                    target="_blank"
                                                                >
                                                                    <img
                                                                        :src="link.child.social.twitter.icon"
                                                                        alt="twitter"
                                                                    >
                                                                </b-link>
                                                                <b-link
                                                                    class="footer-top-content-link-item ml-1 mr-2"
                                                                    v-if="link.child.social.youtube"
                                                                    :href="link.child.social.youtube.link"
                                                                    target="_blank"
                                                                >
                                                                    <img
                                                                        :src="link.child.social.youtube.icon"
                                                                        alt="youtube"
                                                                    >
                                                                </b-link>
                                                                <b-link
                                                                    class="footer-top-content-link-item ml-1 mr-1"
                                                                    v-if="link.child.social.linkedin"
                                                                    :href="link.child.social.linkedin.link"
                                                                    target="_blank"
                                                                >
                                                                    <img
                                                                        :src="link.child.social.linkedin.icon"
                                                                        alt="linkedin"
                                                                    >
                                                                </b-link>
                                                                <b-link
                                                                    class="footer-top-content-link-item ml-2"
                                                                    v-if="link.child.social.rss"
                                                                    :href="link.child.social.rss.link"
                                                                    target="_blank"
                                                                >
                                                                    <img :src="link.child.social.rss.icon" alt="rss">
                                                                </b-link>
                                                            </div>
                                                        </div>
                                                    </b-col>
                                                </b-row>
                                            </b-container>
                                        </div>
                                    </div>
                                </div>
                                <b-dropdown
                                    v-else-if="link.child"
                                    variant="link"
                                    class="header-menu-links-item-drop"
                                    :text="link.name"
                                >
                                    <b-dropdown-item>{{link.child.text}}</b-dropdown-item>
                                </b-dropdown>
                                <b-link
                                    v-else
                                    :href="link.path"
                                    :target="link.target"
                                >
                                    {{link.name}}
                                </b-link>
                            </div>
                        </div>
                        <div class="header-menu-search d-flex align-items-center h-100" v-if="enableSearch">
                            <div class="header-menu-search-text px-2 d-flex align-items-center h-100"
                                    @mouseenter="toggleSearchMenu(true)"
                                    @mouseleave="toggleSearchMenu(false)">
                                <img src="/img/search.svg" alt="search icon">
                                <span class="ml-2" v-if="!scrollingHeader">{{ texts.searchTitle }}</span>
                                <div
                                    class="header-menu-links-item-drop-mega"
                                    v-if="showChildMenu && actualLink === 'search'"
                                >
                                    <b-container>
                                        <b-row class="py-4">
                                            <b-col cols="12">
                                                <b-form-input
                                                    v-model="searchText"
                                                    :placeholder="texts.searchPlaceholder"
                                                    class="header-menu-search-input"
                                                    @keyup.enter="searchSend"
                                                >
                                                </b-form-input>
                                            </b-col>
                                            <b-col cols="12">
                                                <img
                                                    class="header-menu-search-icon"
                                                    src="/img/search_blue.svg"
                                                    alt="search icon"
                                                    @click="searchSend"
                                                >
                                            </b-col>
                                        </b-row>
                                    </b-container>
                                </div>
                            </div>
                            <b-link
                                :href="texts.donateLink"
                                target="_blank"
                                class="header-menu-search-donate ml-2"
                                v-if="scrollingHeader && texts.donateIsVisible"
                            >
                                {{texts.donateTextShort}}
                            </b-link>
                        </div>
                    </b-col>
                </b-row>
            </b-container>
        </div>
    </div>
</template>

<script>
module.exports = {
    name: 'Header',
    mixins: [remoteComponentMixin, headerMixin],
    created() {
        if (!document.querySelector('gray-bg')) {
            const grayBg = document.createElement("div");
            grayBg.className = 'gray-bg';
            document.getElementById('app').appendChild(grayBg);
        };
        window.addEventListener("scroll", this.scrollingPage);
        window.addEventListener('resize', this.mobView);
        this.mobView();
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.scrollingPage);
        window.removeEventListener('resize', this.mobView);
    },
    props: {
        headerLogo: String,
        whiteLogo: String,
        iarcLink: String,
        links: Array,
        texts: Object,
        projectData: Object,
        langPanel: Object,
        withBanner: Boolean,
        enableSearch: Boolean,
        remoteSearch: Boolean,
    },
    data() {
        return {
            mobWidth: false,
            actualLang: 'fr',
            actualLink: {},
            showChildMenu: false,
            searchText: '',
            scrollingHeader: false,
        };
    },
    computed: {
        opacityHeaderBg() {
            return this.withBanner && !this.scrollingHeader && !this.showChildMenu;
        },
        calculateMenuColumns() {
            return this.scrollingHeader ? 10 : 12; 
        },
    },
    methods: {
        toggleChildMenu(link, show) {
            if (show) {
                link.child && link.child.text ? this.disableScroll() : this.enableScroll();
                this.actualLink = link;
                this.showChildMenu = true;
            } else {
                this.enableScroll();
                this.showChildMenu = false;
                this.actualLink = {};
            };
        },
        toggleSearchMenu(status) {
            if (status) {
                this.disableScroll();
                this.actualLink = 'search';
                this.showChildMenu = true;
            } else {
                this.enableScroll();
                this.actualLink = {};
                this.showChildMenu = false;
            };
        },
        disableScroll() {
            const bgBlock = document.querySelector('.gray-bg');
            if (bgBlock) {
                document.querySelector('.gray-bg').style.display = 'block';
            };
        },
        enableScroll() {
            const bgBlock = document.querySelector('.gray-bg');
            if (bgBlock) {
                document.querySelector('.gray-bg').style.display = 'none';
            };
        },
        scrollingPage() {
            const headerBlock = document.querySelector('.header-top');
            const headerMenu = document.querySelector('.header-menu');
            this.scrollingHeader = headerBlock && headerBlock.offsetHeight < window.pageYOffset;
            document.getElementById('app').style.paddingTop = this.scrollingHeader ? `${headerBlock.offsetHeight + headerMenu.offsetHeight}px` : '0px';
        },
        mobView() {
            this.mobWidth = window.innerWidth < 992;
        },
    },
};
</script>

<style lang="stylus">
.header
    z-index 25
    position relative
    top 0
    &-bg
        background-color #ffffff
    &-container
        padding-bottom 2px
    &-top
        padding-bottom 15px
        padding-top 40px
    &-logo
        &-img
            max-width 287px
            width 100%

    &-name
        position relative
        top -20px
        right 5px
        @media (max-width 991px)
            top 0

        &-logo
            height 82px
            @media (max-width 991px)
                height 60px

        &-text
            a
                text-decoration none
            h1
                text-align left
                color #1E7FB8

    &-lang
        &-btn
            height max-content
            padding-right: 10px

            .btn-link
                font-weight bold
                font-size 13px
                line-height 18px
                letter-spacing 1.56px
                color #1E7FB8
                text-decoration none
                text-transform uppercase

                &:after
                    transform rotate(-90deg)

            .dropdown
                &-menu
                    position absolute
                    min-width auto
                    padding 0
                    border none
                    border-radius 0
                    box-shadow 0 0 20px rgba(0, 0, 0, 0.2), 0px 0px 30px rgba(0, 0, 0, 0.25)
                &-item
                    text-transform uppercase
                    font-weight bold
                    font-size 13px
                    line-height 150%
                    letter-spacing 1.44px
                    color #1E7FB8
                    padding 5px 12px
                    outline none
                    &:hover
                        background-color #EEEEEE
                        text-decoration none

            .active-lang
                background-color #1E7FB8
                .dropdown-item
                    color #ffffff
                    &:hover
                        background-color #1E7FB8

            &.show
                .btn-link
                    &:after
                        transform rotate(0)

        &-donate
            width 129px
            height 30px
            color #ffffff
            background-color #CC4666
            text-transform uppercase
            font-weight bold
            font-size 13px
            line-height 18px
            letter-spacing 1.56px

            &:hover
                color #ffffff
                text-decoration none

    &-menu
        background-color #1E7FB8
        color #ffffff
        position relative
        line-height 0
        transition all .3s

        &-row
            position inherit

        &-logo
            max-width 100%

        &-links
            height 100%
            &-item
                height 100%
                display flex
                align-items center
                font-weight bold
                font-size 13px
                text-decoration none
                text-transform uppercase
                letter-spacing 1.44px
                color #ffffff
                opacity .7
                padding 18px 12px
                &-active
                    text-decoration none
                    color #ffffff
                    opacity 1
                &:hover
                    background-color #036CAC
                    text-decoration none
                    color #ffffff
                    opacity 1
                a
                    text-decoration none
                    color #ffffff
                    white-space nowrap
                @media (max-width 1199px)
                    font-size 10px

                &-drop
                    &-mega
                        position absolute
                        left 0
                        top 55px
                        width 100%
                        background-color #036CAC

                        .mega-menu
                            letter-spacing normal
                            &-links
                                a
                                    text-transform none
                                    white-space normal
                                    letter-spacing 1px
                                    font-size 14px
                                    line-height 24px
                                    font-weight normal
                                    color rgba(255, 255, 255, 0.7)
                                    &:hover
                                        color #ffffff
                                    @media (max-width 1199px)
                                        font-size 14px
                                    &.active
                                        color #ffffff
                                        opacity 1
                            &-text
                                text-transform none
                                letter-spacing normal
                                font-weight normal
                                font-size 14px
                                line-height 150%

                                @media (max-width 1199px)
                                    font-size 14px

                            &-right
                                display flex
                                justify-content space-between
                                &-img
                                    img
                                        max-height 200px
                                        @media (max-width 1199px)
                                            max-height 152px
                                &-social
                                    &-title
                                        font-size 13px
                                        font-weight normal
                                        text-transform none
                                        letter-spacing normal
                                        opacity .6
                                        @media (max-width 1199px)
                                            font-size 11px
                                    &-links
                                        margin-top 15px
                                        &-item
                                            width 16px
                                            &:hover
                                                g, path
                                                        opacity 1

        &-search
            &-text
                font-weight bold
                font-size 13px
                text-decoration none
                text-transform uppercase
                letter-spacing 1.44px
                padding 20px 0
                opacity .7
                &:hover
                    background-color #036CAC
                    opacity 1
                @media (max-width 1199px)
                    font-size 10px
            &-input
                font-size 24px
                outline none !important
                border none
                border-radius 2px
                box-shadow 0 1px 20px #00ADEF
                padding-right 45px
                height 58px
            &-icon
                position absolute
                right 30px
                top -40px
                width 23px
                height 23px
                color #1E7FB8
                cursor pointer

            &-title
                font-size 16px
                line-height 150%
                text-transform none
                color #ffffff
                opacity .6
            &-donate
                font-size 13px
                line-height 150%
                color #ffffff
                font-weight bold
                letter-spacing 1.44px
                text-transform uppercase
                padding 4px 11px
                background-color #CC4666
                border 1px solid rgba(255, 255, 255, 0.7)
                &:hover
                    text-decoration none
                    color #ffffff
                @media (max-width 1199px)
                    font-size 10px
        &.withBanner
            background-color rgba(30, 127, 184, 0.7)

    &.scrolling
        position fixed
        top -145px
        width 100%

    .arrowIconsStyles
      color #ffffff
      width 6px
      margin-left 6px

.gray-bg
    z-index 24
    display none
    position fixed
    top 0
    right 0
    bottom 0
    left 0
    background-color #20313B
    opacity .7
</style>
