<template>
    <div
        id="header-menu"
        class="headerMob"
        :class="{
            'headerMob-scroll': scrollingHeader,
            'headerMob-scroll-top': scrollingHeaderToTop,
        }"
        v-if="mobWidth"
        ref="mobHeader"
    >
        <div class="headerMob-top">
            <b-container>
                <b-row>
                    <b-col cols="12">
                        <b-link :to="iarcLink" target="_blank">
                            <img class="headerMob-top-logo" :src="headerLogo" alt="IARC logo">
                        </b-link>
                    </b-col>
                </b-row>
                <b-row class="mt-2">
                    <b-col cols="12" class="d-flex">
                        <div class="headerMob-top-name-text align-self-center">
                            <b-link :to="projectData.siteNameLink">
                                <span>{{projectData.siteName}}</span>
                            </b-link>
                        </div>
                    </b-col>
                </b-row>
                <div class="headerMob-top-btn d-flex flex-column align-items-center"  v-if="!openMenu">
                    <div id="headerMob-top-btn-icon" @click="openMobMenu" :class="{'open': openMenu}">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div :class="{'headerMob-top-btn-text': true, 'open': openMenu}">
                        <span v-if="!openMenu">{{texts.menu}}</span>
                        <span v-else>{{texts.close}}</span>
                    </div>
                </div>
            </b-container>
        </div>
        <div :class="{'headerMob-menu pb-5': true, 'headerMob-menu-open': openMenu}">
            <b-container>
                <b-row class="headerMob-lang">
                    <b-col cols="10">
                        <b-link
                            v-if="langPanel"
                            class="
                                headerMob-lang-link
                                d-flex
                                justify-content-between
                                align-items-center
                            "
                            href="#"
                            v-b-toggle="`headerMobLang`"
                        >
                            {{langPanel.actualLang}}
                        </b-link>
                    </b-col>
                    <b-col cols="2">
                        <div class="headerMob-top-btn d-flex flex-column align-items-center" v-if="openMenu">
                            <div id="headerMob-top-btn-icon" @click="openMobMenu" :class="{'open': openMenu}">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                            <div :class="{'headerMob-top-btn-text': true, 'open': openMenu}">
                                <span v-if="!openMenu">{{texts.menu}}</span>
                                <span v-else>{{texts.close}}</span>
                            </div>
                        </div>
                    </b-col>
                </b-row>
                <b-row
                    :class="{'search-panel': enableSearch}"
                    class="position-relative"
                >
                    <b-col cols="12">
                        <b-collapse
                            v-if="langPanel"
                            :id="`headerMobLang`"
                            accordion="my-accordion"
                            role="tabpanelang"
                            class="headerMob-lang-list"
                        >
                            <b-link
                                class="mt-3 headerMob-lang-list-link"
                                :to="childLink.link"
                                v-for="(childLink, index) of langPanel.langList"
                                :key="index"
                            >
                                {{ childLink.name }}
                            </b-link>
                        </b-collapse>
                    </b-col>
                    <b-col cols="12" v-if="enableSearch">
                        <b-form-input
                            v-model="searchText"
                            :placeholder="texts.searchPlaceholder"
                            class="headerMob-menu-search"
                            @keyup.enter="searchSend"
                        >
                        </b-form-input>
                        <b-col class="headerMob-menu-search-icon">
                            <img
                                src="/img/search_blue.svg"
                                alt="search icon"
                                @click="searchSend"
                            >
                        </b-col>
                    </b-col>
                </b-row>
                <b-row class="headerMob-menu-links pt-4 pt-sm-5">
                    <b-col cols="12 d-flex flex-column">
                        <div class="headerMob-menu-links-item mt-3" v-for="(link, index) of links" :key="index">
                            <b-link
                                :class="{'active': link.isActive}"
                                v-if="!link.child"
                                :href="link.path"
                                :target="link.target"
                            >
                                {{link.name}}
                            </b-link>
                            <div class="headerMob-menu-links-item-collapse" v-else>
                                <b-link class="headerMob-menu-links-item-collapse-text
                                               d-flex
                                               justify-content-between
                                               align-items-center"
                                        :class="{'active': link.isActive}"
                                        href="#"
                                        v-b-toggle="`headerMobLink${index}`"
                                >
                                    {{link.name}}
                                    <div class="headerMob-menu-links-item-collapse-text-icon">
                                        <span></span>
                                        <span></span>
                                    </div>
                                </b-link>
                                <b-collapse
                                    :id="`headerMobLink${index}`"
                                    accordion="my-accordion"
                                    role="tabpanel"
                                    class="sub-menu-block"
                                    :visible="link.isActive"
                                >
                                    <b-link
                                        class="mt-3"
                                        :to="childLink.path"
                                        v-for="(childLink, index) of link.child"
                                        :key="index"
                                        :class="{'active': childLink.isActive}"
                                    >
                                        {{ childLink.name }}
                                    </b-link>
                                </b-collapse>
                            </div>
                        </div>
                    </b-col>
                </b-row>
                <b-row class="headerMob-menu-donate mt-5" v-if="texts.donateIsVisible">
                    <b-col cols="12">
                        <b-link :href="texts.donateLink" target="_blank">
                            {{texts.donateText}}
                        </b-link>
                    </b-col>
                </b-row>
                <b-row class="headerMob-menu-social mt-4">
                    <b-col cols="12">
                        <div class="headerMob-menu-social-links d-flex justify-content-center">
                            <b-link
                                class="headerMob-menu-social-links-item pr-3"
                                :href="social.twitter.link"
                                target="_blank"
                                v-if="social.twitter"
                            >
                                <img :src="social.twitter.icon" alt="twitter">
                            </b-link>
                            <b-link
                                class="headerMob-menu-social-links-item pl-3 pr-3"
                                :href="social.youtube.link"
                                target="_blank"
                                v-if="social.youtube"
                            >
                                <img :src="social.youtube.icon" alt="youtube">
                            </b-link>
                            <b-link
                                class="headerMob-menu-social-links-item pl-3 pr-3"
                                :href="social.linkedin.link"
                                target="_blank"
                                v-if="social.linkedin"
                            >
                                <img :src="social.linkedin.icon" alt="linkedin">
                            </b-link>
                            <b-link
                                class="headerMob-menu-social-links-item ml-3"
                                :href="social.rss.link"
                                target="_blank"
                                v-if="social.rss"
                            >
                                <img :src="social.rss.icon" alt="rss">
                            </b-link>
                        </div>
                    </b-col>
                </b-row>
                <b-row
                    class="headerMob-menu-terms
                           d-flex
                           justify-content-start
                           align-items-center"
                >
                    <b-col cols="12">
                        <b-link
                            :href="texts.policyLink"
                            target="_blank"
                            class="headerMob-menu-terms-link mr-3"
                        >
                            {{texts.policyText}}
                        </b-link>
                        <b-link
                            :href="texts.termsLink"
                            target="_blank"
                            class="headerMob-menu-terms-link"
                        >
                            {{texts.termsText}}
                        </b-link>
                    </b-col>
                </b-row>
                <b-row class="d-flex justify-content-start align-items-center">
                    <b-col cols="12">
                        <b-link :href="texts.copyrightLink" target="_blank" class="headerMob-menu-rights">
                            © IARC 1965–{{actualYear}} — {{ texts.copyrightText }}
                        </b-link>
                    </b-col>
                </b-row>
            </b-container>
        </div>
  </div>
</template>

<script>
module.exports = {
    name: 'HeaderMob',
    mixins: [remoteComponentMixin, headerMixin],
    created() {
        window.addEventListener("scroll", this.scrollingPage);
        window.addEventListener('resize', this.mobView);
        this.mobView();
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.mobView);
    },
    props: {
        headerLogo: String,
        iarcLink: String,
        links: Array,
        texts: Object,
        projectData: Object,
        social: Object,
        langPanel: Object,
        actualYear: String,
        langPanel: Object,
        enableSearch: Boolean,
        remoteSearch: Boolean,
    },
    data() {
        return {
            mobWidth: false,
            openMenu: false,
            actualLang: 'fr',
            inputIconStyles: {
                'color': '#1E7FB8',
                'width': '23px',
                'height': '23px',
                'position': 'absolute',
                'right': '20px',
                'top': '10px',
            },
            searchText: '',
            scrollingHeader: false,
            scrollingHeaderToTop: false,
            prevScrollPos: 0,
        };
    },
    methods: {
        openMobMenu() {
            this.openMenu ? document.getElementById('app').classList.remove('openMobMenu') : document.getElementById('app').classList.add('openMobMenu');
            this.openMenu = ! this.openMenu;
        },
        scrollingPage() {
            const headerBlock = this.$refs.mobHeader;
            const footerBlock = document.getElementById('footer');
            if (headerBlock && !this.openMenu) {
                if (this.prevScrollPos > window.pageYOffset && window.pageYOffset <= 0) {
                    this.scrollingHeader = false;
                    document.getElementById('app').style.paddingTop = '0';
                } else if (this.prevScrollPos < window.pageYOffset && headerBlock.offsetHeight < window.pageYOffset) {
                    this.scrollingHeader = true;
                    document.getElementById('app').style.paddingTop = `${headerBlock.offsetHeight}px`;
                };
                if (footerBlock) {
                    this.scrollingHeaderToTop = this.scrollingHeader && this.prevScrollPos > window.pageYOffset && window.pageYOffset < document.body.clientHeight - headerBlock.clientHeight - footerBlock.clientHeight;
                } else {
                    this.scrollingHeaderToTop = this.scrollingHeader && this.prevScrollPos > window.pageYOffset;
                };
                this.prevScrollPos = window.pageYOffset;
            };
        },
        mobView() {
            this.mobWidth = window.innerWidth < 992;
        },
    },
};
</script>

<style lang="stylus">
#app
    .headerMob
        z-index 20
        &-top
            background-color #ffffff
            padding 32px 0 20px
            @media(max-width 320px)
                padding 20px 0 20px
            .container
                position relative
            &-logo
                margin-bottom 8px
                max-width 210px
                max-height 50px
                width 100%
                @media(max-width 575px)
                    margin-bottom 12px

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


            &-btn
                z-index 21
                position absolute
                right 15px
                top 3px

                #headerMob-top-btn-icon
                    width: 25px
                    height: 16px
                    -webkit-transform: rotate(0deg)
                    -moz-transform: rotate(0deg)
                    -o-transform: rotate(0deg)
                    transform: rotate(0deg)
                    -webkit-transition: .5s ease-in-out
                    -moz-transition: .5s ease-in-out
                    -o-transition: .5s ease-in-out
                    transition: .5s ease-in-out
                    cursor: pointer

                    span
                        display: block
                        position: absolute
                        height: 2px
                        width: 100%
                        background: #1E7FB8
                        opacity: 1
                        left: 0
                        -webkit-transform: rotate(0deg)
                        -moz-transform: rotate(0deg)
                        -o-transform: rotate(0deg)
                        transform: rotate(0deg)
                        -webkit-transition: .25s ease-in-out
                        -moz-transition: .25s ease-in-out
                        -o-transition: .25s ease-in-out
                        transition: .25s ease-in-out
                        &:nth-child(1)
                            top: 0px
                        &:nth-child(2)
                            top: 8px
                        &:nth-child(3)
                            top: 16px

                    &.open
                        span
                            background #ffffff
                            &:nth-child(1)
                                top: 6px
                                -webkit-transform: rotate(135deg)
                                -moz-transform: rotate(135deg)
                                -o-transform: rotate(135deg)
                                transform: rotate(135deg)
                            &:nth-child(2)
                                opacity: 0
                                left: -30px
                            &:nth-child(3)
                                top: 6px
                                -webkit-transform: rotate(-135deg)
                                -moz-transform: rotate(-135deg)
                                -o-transform: rotate(-135deg)
                                transform: rotate(-135deg)

                &-text
                    margin-top 10px
                    font-size 8px
                    line-height 11px
                    font-weight bold
                    color #1E7FB8
                    letter-spacing 1px
                    text-transform uppercase
                    &.open
                        color #ffffff

        &-lang
            margin-top 24px
            &-link
                font-size 16px
                line-height 150%
                letter-spacing 1.44px
                font-weight bold
                color #ffffff
                text-transform uppercase
                width max-content
                &:hover, &:active
                    text-decoration none
                    outline none
                &:after
                    display inline-block
                    margin-left .255em
                    vertical-align .255em
                    content ""
                    border-top 4px solid
                    border-right 3px solid transparent
                    border-bottom 0
                    border-left 3px solid transparent
            &-list
                display flex
                flex-direction column
                border-top 1px solid rgba(255, 255, 255, .2)
                border-bottom 1px solid rgba(255, 255, 255, .2)
                padding-bottom 14px
                margin-bottom 16px
                &-link
                    font-size 18px
                    line-height 120%
                    color #ffffff
                    text-transform capitalize
                    &:hover
                        text-decoration none

        &-menu
            z-index 20
            position absolute
            width 100%
            top -1000px
            background-color #1E7FB8
            transition top .5s

            .search-panel
                padding-top 45px

            &-search
                font-size 18px
                line-height 150%
                color #3C3C3C
                padding 8px 40px 9px 8px
                border none
                border-radius 2px
                outline none
                box-shadow none
                &-icon
                    position absolute
                    width max-content
                    top 6px
                    right 24px
                    cursor pointer
            &-links
                &-item
                    a
                        width 100%
                        font-weight bold
                        font-size 16px
                        line-height 22px
                        letter-spacing 1.44px
                        color #ffffff
                        opacity 0.7
                        text-transform uppercase
                        &:hover,
                            opacity 1
                            text-decoration none
                        &.active
                            opacity 1
                            text-decoration none

                    &-collapse
                        &-text
                            &-icon
                                width max-content
                                span
                                    display block
                                    width 12px
                                    height 1.33px
                                    background #ffffff
                                    &:nth-child(1)
                                        position relative
                                        top 1px
                                        transform rotate(0deg)
                            &.collapsed
                                .headerMob-menu-links-item-collapse-text-icon
                                    span
                                        &:nth-child(1)
                                            top 1px
                                            transform rotate(90deg)
                        .sub-menu-block
                            transition all .3s
                            border-top 1px solid rgba(255, 255, 255, 0)
                            border-bottom 1px solid rgba(255, 255, 255, 0)
                            margin 0
                            padding 0
                            &.show
                                padding-bottom 1rem
                                margin-top .5rem
                                border-top 1px solid rgba(255, 255, 255, 0.2)
                                border-bottom 1px solid rgba(255, 255, 255, 0.2)
                            a
                                font-weight normal
                                font-size 18px
                                line-height 120%
                                display block
                                text-transform none


            &-donate
                a
                    display block
                    text-align center
                    margin-left 25px
                    margin-right 25px
                    font-weight bold
                    font-size 16px
                    line-height 22px
                    letter-spacing 1.56px
                    text-transform uppercase
                    color #ffffff
                    background-color #CC4666
                    border 1px solid rgba(255, 255, 255, 0.8)
                    padding 11px 0
                    &:hover
                        text-decoration none

            &-social
                &-links
                    &-item
                        border-right 1.5px solid rgba(255, 255, 255, 0.4)
                        &:last-child
                            border-right none

            &-terms
                margin-top 44px
                &-link
                    font-size 12px
                    line-height 16px
                    letter-spacing 1px
                    font-weight normal
                    color #ffffff
                    &:hover
                        text-decoration none

            &-rights
                font-size 10px
                margin-top 20px
                line-height 14px
                letter-spacing 1px
                font-weight normal
                color #ffffff
                opacity .5


            &-open
                top: 0
                height 100vh
                overflow-y scroll
                .headerMob-top-btn
                    top 0px
        &-scroll
            position fixed
            width 100%
            top -200px
            transition top .5s
            &-top
                top 0

    &.openMobMenu
        overflow-y hidden
        height 100vh
</style>
