<template>
    <q-layout
        :class="layoutClasses"
        ref="layout"
        view="lHh LpR lFf"
        v-model="sideStates"
        @left-breakpoint="leftBreakpoint"
    >
            <q-toolbar
                id="csc-header-toolbar"
                color="primary"
                inverted
                slot="header"
            >
                <q-btn
                    class="csc-user-menu-button"
                    v-if="isMobile"
                    flat
                    color="white"
                    @click="$refs.layout.toggleLeft()"
                >
                    <q-icon
                        name="menu"
                    />
                </q-btn>
                <q-btn
                    v-if="hasFaxCapability && hasSendFaxFeature"
                    class="csc-user-menu-button bg-primary text-dark"
                    flat
                    color="primary"
                    round
                    small
                >
                    <q-icon
                        name="apps"
                    />
                    <q-popover
                        ref="appPopover"
                    >
                        <q-list
                            class="no-padding"
                            no-border
                        >
                            <q-item
                                link
                                @click="showSendFax();$refs.appPopover.close()"
                            >
                                <q-item-side
                                    icon="fa-fax"
                                    color="primary"
                                />
                                <q-item-main
                                    :label="$t('communication.sendFax')"
                                />
                            </q-item>
                        </q-list>
                    </q-popover>
                </q-btn>
                <q-btn
                    class="csc-user-menu-button no-shadow"
                    v-if="!isMobile"
                    icon="language"
                    color="tertiary"
                    round
                    small
                >
                    <q-popover
                        ref="languagePopover"
                    >
                        <csc-language-menu
                            :language-label="languageLabel"
                            :language-labels="languageLabels"
                            @change-language="changeLanguage"
                        />
                    </q-popover>
                </q-btn>
                <div
                    class="csc-user-menu-button"
                >
                    <q-btn
                        icon="person"
                        color="tertiary"
                        round
                        small
                        class="no-shadow"
                    >
                    </q-btn>
                    <span
                        v-if="!isMobile"
                        class="csc-username"
                    >
                        {{ getUsername }}
                    </span>
                    <q-popover
                        ref="userPopover"
                    >
                        <csc-user-menu
                            :username="getUsername"
                            @logout="logout"
                            @settings="userSettings"
                        />
                    </q-popover>
                </div>
                <csc-logo
                    id="csc-main-logo"
                    color="light"
                />
            </q-toolbar>
        <div
            v-if="!isMobile"
            slot=left
            class="csc-toggle-menu"
        >
            <q-icon
                name="keyboard_arrow_left"
                @click="toggleMenu()"
            />
        </div>
        <div
            v-if="isMobile"
            slot=left
            class="csc-toggle-menu"
        >
            <q-icon
                name="clear"
                @click="$refs.layout.hideLeft()"
                color="default"
            />
        </div>
        <csc-language-menu
            slot="left"
            v-if="isMobile"
            :language-label="languageLabel"
            :language-labels="languageLabels"
            @change-language="changeLanguage"
        />
        <csc-main-menu
            slot="left"
            :call-state-title="callStateTitle"
            :call-state-subtitle="callStateSubtitle"
            :is-call-forward="isCallForward"
            :is-call-blocking="isCallBlocking"
            :is-pbx-admin="isPbxAdmin"
            :is-pbx-enabled="isPbxEnabled"
            :is-pbx-configuration="isPbxConfiguration"
        />
        <csc-new-features-menu
            slot="left"
            :menu-minimized="menuMinimized"
        />
        <router-view />
        <csc-send-fax
            ref="sendFax"
        />
        <csc-call
            ref="call"
            :call-state="callState"
            :call-number="callNumber"
            :ended-reason="endedReason"
            :full-view="isFullView"
            :minimized="!isHome && !isMaximized"
            :maximizable="!isHome"
            :closed="!isCalling && !isHome"
            :local-media-stream="localMediaStream"
            :remote-media-stream="remoteMediaStream"
            :is-video-call="hasVideo"
            :has-local-video="hasLocalVideo"
            :has-remote-video="hasRemoteVideo"
            :microphone-enabled="isMicrophoneEnabled"
            :camera-enabled="isCameraEnabled"
            :remote-volume-enabled="isRemoteVolumeEnabled"
            :dialpad-opened="isDialpadOpened"
            :menu-minimized="menuMinimized"
            @start-call="startCall"s
            @accept-call="acceptCall"
            @end-call="endCall"
            @close-call="closeCall"
            @toggle-microphone="toggleMicrophone"
            @toggle-camera="toggleCamera"
            @toggle-remote-volume="toggleRemoteVolume"
            @click-dialpad="clickDialpad"
            @toggle-dialpad="toggleDialpad"
            @maximize-call="maximizeCall"
            @minimize-call="minimizeCall"
        />
    </q-layout>
</template>

<script>
    import platformMixin from '../../mixins/platform'
    import {
        startLoading,
        stopLoading,
        showToast,
        showGlobalError,
        enableIncomingCallNotifications
    } from '../../helpers/ui'
    import {
        mapGetters,
        mapActions
    } from 'vuex'
    import CscCall from '../call/CscCall'
    import CscSendFax from '../CscSendFax'
    import CscLogo from '../CscLogo'
    import {
        QLayout,
        QToolbar,
        QToolbarTitle,
        QBtn,
        QIcon,
        QList,
        QListHeader,
        QItem,
        QItemSide,
        QItemMain,
        QItemTile,
        QPopover,
        QSideLink,
        QCollapsible,
        QFabAction,
        QFab
    } from 'quasar-framework'
    import CscMainMenu from "./MainMenu"
    import CscNewFeaturesMenu from "./NewFeaturesMenu"
    import CscLanguageMenu from "./CscLanguageMenu"
    import CscUserMenu from "./CscUserMenu"
    import {
        getLanguageLabel
    } from "../../i18n";

    export default {
        name: 'default',
        data() {
            return {
                sideStates: {
                    left: true,
                    right: false
                },
                mobileMenu: null,
                menuMinimized: false
            }
        },
        mounted() {
            this.$store.dispatch('user/initUser');
            window.addEventListener('orientationchange', ()=>{
                this.$root.$emit('orientation-changed');
            });
            window.addEventListener('resize', ()=>{
                this.$root.$emit('window-resized');
            });
        },
        mixins: [
            platformMixin
        ],
        components: {
            CscMainMenu,
            CscNewFeaturesMenu,
            CscLanguageMenu,
            QLayout,
            QToolbar,
            QToolbarTitle,
            QBtn,
            QIcon,
            QList,
            QListHeader,
            QItem,
            QItemSide,
            QItemMain,
            QItemTile,
            QPopover,
            QSideLink,
            QCollapsible,
            CscCall,
            CscSendFax,
            CscLogo,
            CscUserMenu,
            QFabAction,
            QFab
        },
        computed: {
            ...mapGetters([
                'pageTitle',
                'pageSubtitle',
                'isCallForward',
                'isCallBlocking',
                'isPbxConfiguration',
                'isHome',
                'title'
            ]),
            ...mapGetters('call', [
                'isCallEnabled',
                'callState',
                'callNumber',
                'callNumberInput',
                'endedReason',
                'isCalling',
                'localMediaStream',
                'remoteMediaStream',
                'hasVideo',
                'hasLocalVideo',
                'hasRemoteVideo',
                'isMicrophoneEnabled',
                'isCameraEnabled',
                'isRemoteVolumeEnabled',
                'isMaximized',
                'isDialpadOpened',
                'callStateTitle',
                'callStateSubtitle'
            ]),
            ...mapGetters('conference', [
                'isConferencingEnabled'
            ]),
            ...mapGetters('user', [
                'isLogged',
                'hasUser',
                'getUsername',
                'isPbxAdmin',
                'isPbxEnabled',
                'hasSmsCapability',
                'hasFaxCapability',
                'hasSendSmsFeature',
                'hasSendFaxFeature',
                'userDataRequesting',
                'userDataSucceeded',
                'changeSessionLocaleState',
                'locale',
                'languageLabels',
                'isRtcEngineUiVisible'
            ]),
            ...mapGetters('communication', [
                'createFaxState',
                'createFaxError'
            ]),
            hasCommunicationCapabilities() {
                return (this.hasSmsCapability && this.hasSendSmsFeature) ||
                    (this.hasFaxCapability && this.hasSendFaxFeature);
            },
            isMenuClosed() {
                return !this.sideStates.left;
            },
            isFullView() {
                return this.isMenuClosed || this.isMobile || this.mobileMenu;
            },
            layoutClasses() {
                let classes = [];
                if(this.isCalling) {
                    classes.push('csc-layout-call-active');
                }
                if(this.menuMinimized) {
                    classes.push('csc-menu-minimized');
                }
                return classes;
            },
            pageTitleExt() {
                if(this.isHome) {
                    return this.callStateTitle;
                }
                else {
                    return this.pageTitle;
                }
            },
            pageSubtitleExt() {
                if(this.isHome) {
                    return this.callStateSubtitle;
                }
                else {
                    return this.pageSubtitle;
                }
            },
            headerClasses() {
                let classes = ['transition-generic'];
                if(this.isMobile) {
                    classes.push('csc-header-mobile');
                }
                if(this.isMobile || this.isMenuClosed) {
                    classes.push('csc-header-full');
                }
                return classes;
            },
            languageLabel() {
                return this.$t('language', {
                    language: getLanguageLabel(this.locale)
                });
            }
        },
        methods: {
            ...mapActions('user', [
                'forwardHome'
            ]),
            showSendFax() {
                this.$refs.sendFax.showModal();
            },
            hideSendFax() {
                this.$refs.sendFax.hideModal();
            },
            startCall(localMedia) {
                if(this.callNumberInput !== '' && this.callNumberInput !== null) {
                    this.$store.dispatch('call/start', localMedia);
                }
            },
            acceptCall(localMedia) {
                this.$store.dispatch('call/accept', localMedia);
            },
            closeCall() {
                this.$store.commit('call/inputNumber');
            },
            endCall() {
                this.$store.dispatch('call/end');
            },
            toggleMicrophone() {
                this.$store.dispatch('call/toggleMicrophone');
            },
            toggleCamera() {
                this.$store.dispatch('call/toggleCamera');
            },
            toggleRemoteVolume() {
                this.$store.dispatch('call/toggleRemoteVolume');
            },
            clickDialpad(value) {
                this.$store.dispatch('call/sendDTMF', value);
            },
            toggleDialpad() {
                this.$store.commit('call/toggleDialpad');
            },
            maximizeCall() {
                if(this.isMobile) {
                    this.$router.push({path: '/user/home'});
                }
                else {
                    this.$store.commit('call/maximize');
                }
            },
            minimizeCall() {
                this.$store.commit('call/minimize');
            },
            logout() {
                startLoading();
                this.$store.dispatch('user/logout').then(()=>{
                    stopLoading();
                    this.$router.push({path: '/login'});
                })
            },
            leftBreakpoint(enabled) {
                this.mobileMenu = !enabled;
            },
            setCallStateTitle() {
                let title = this.callStateTitle;
                if(this.callStateSubtitle !== '') {
                    title = title + " (" + this.callStateSubtitle + ")";
                }
                document.title = this.title + " - " + title;
            },
            toggleMenu() {
                this.menuMinimized = !this.menuMinimized;
            },
            sideStateLeft() {
                return this.sideStates.left;
            },
            changeLanguage(language) {
                this.$store.dispatch('user/changeSessionLanguage', language);
                if(this.isMobile) {
                    this.$refs.layout.hideLeft();
                }
                else {
                    this.$refs.languagePopover.close();
                }
            },
            userSettings() {
                if(this.$refs.userPopover) {
                    this.$refs.userPopover.close();
                }
                this.$router.push({path: '/user/settings'});
            }
        },
        watch: {
            callState(state) {
                if(state === 'incoming' && this.isMobile) {
                    this.$refs.layout.hideLeft();
                }
                if(this.isHome) {
                    this.setCallStateTitle();
                }
            },
            isHome(isHome) {
                if(isHome) {
                    this.$store.commit('call/minimize');
                    this.setCallStateTitle();
                }
            },
            userDataSucceeded(userDataSucceeded) {
                if(userDataSucceeded) {
                    enableIncomingCallNotifications();
                }
            },
            isCallEnabled(value) {
                if(value && this.isRtcEngineUiVisible) {
                    showToast(this.$i18n.t('toasts.callAvailable'));
                }
            },
            createFaxState(state) {
                if (state === 'requesting') {
                    startLoading();
                }
                else if (state === 'failed') {
                    stopLoading();
                    showGlobalError(this.createFaxError);
                }
                else if (state === 'succeeded') {
                    stopLoading();
                    showToast(this.$t('communication.createFaxSuccessMessage'));
                    this.hideSendFax();
                }
            },
            $route (route) {
                if(!this.isHome) {
                    this.$store.commit('call/minimize');
                }
                if(this.$refs.call) {
                    this.$nextTick(()=>{
                        this.$refs.call.fitMedia();
                    });
                }
                window.scrollTo(0, 0);
                if (route.path === '/user/home') {
                    this.forwardHome()
                }
            },
            changeSessionLocaleState(state) {
                if (state === 'succeeded') {
                    showToast(this.$t('toasts.changeSessionLanguageSuccessMessage'));
                }
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import '../../themes/app.common'
    #csc-header-toolbar
        background-color $secondary
    #csc-main-logo
        height 52px
        width auto
        right 12px
        top 4px
        position absolute
    .csc-user-menu-button
        margin-left 0
        margin-right 0.2rem
        padding 0.2rem
        .on-left
            margin 0
        .csc-username
            padding-left 3px
            font-weight normal
            color rgba(255,255,255,0.6)
    .page.page-call-active
        padding-bottom 120px
    #main-menu
    #new-features-menu
        padding 0
        .q-item
            padding-top $flex-gutter-xs * 1.4
            padding-bottom  $flex-gutter-xs * 1.4
            .q-item-side-left
                min-width auto
            .q-item-main
                margin-left $flex-gutter-sm
            .q-icon
                color $main-menu-icon-color
            .q-item-label
                color $main-menu-title-color
                font-weight bold
                white-space nowrap
            .q-item-sublabel
                color $main-menu-subtitle-color
        .q-item:hover
            background-color $main-menu-item-hover-background
        .q-item.router-link-active
            .q-icon
                color $main-menu-icon-active-color
            .q-item-label
                color $main-menu-title-active-color
                font-weight bold
            .q-item-sublabel
                color $main-menu-subtitle-active-color
            background-color transparent
    #user-login-as
        display inline-block
        text-transform none
    #user-login-as:after
        content " "
        white-space pre
    #user-name
        font-weight bold
    .q-card
        margin 15px
        margin-left 0
        margin-right 0
    .q-card.page
        padding 0
        margin 0
    .q-if-control.q-if-control-before.q-icon,
    .q-if-control.q-if-control-before.q-icon:before
        font-size 24px
    .csc-toolbar-btn-popover
        .q-item-main.q-item-section
            margin-left 0
    .q-toolbar
        .csc-toolbar-btn.q-btn
            padding-left 8px
            padding-right 8px
        .csc-toolbar-btn-right
            .csc-toolbar-btn-icon
                margin-right 8px
    .csc-layout-call-active
        padding-bottom 152px
    #csc-header
        position fixed
        top 0
        left $layout-aside-left-width
        right 0
        height $header-height
        overflow hidden
        z-index 100
        background-color $secondary
        .csc-header-content
            position absolute
            top 0
            right 0
            left 0
            bottom 0
            padding $logo-margin
            background linear-gradient(to bottom, rgba(21,29,48,0.5) 0%,rgba(21,29,48,0) 75%,rgba(21,29,48,0) 100%)
    #csc-header.csc-header-full
        left 0
    #csc-user-menu
        cursor pointer
        display inline-block
        .csc-username
            padding-left 4px
    .csc-toggle-menu
        cursor pointer
        position absolute
        top $logo-margin
        right $logo-margin
        display flex
        justify-content center
        align-items center
        width 40px
        height 40px
        .q-icon
            display flex
            position relative
            font-size 24px
    .layout-aside-left
        padding-top $header-height
    .csc-menu-minimized
        .layout-aside-left
            width $main-menu-minimized-width
            .q-item-main
                display none
        .csc-toggle-menu
            width $main-menu-minimized-width
            left 0
        #main-menu
            .q-collapsible
                .q-collapsible-sub-item
                    padding 0
        #csc-header
            left $main-menu-minimized-width
    .mobile
        .layout-aside-left
            width auto
            right 0
    .csc-subitem-label
        padding-left 20px
    .csc-toolbar-btn-popover
        .q-collapsible-sub-item
            padding 0 16px 0 16px
    .csc-collapsible-menu
        .q-icon
            display none
</style>
