<template>
    <q-list
        id="main-menu"
        no-border
        link
        inset-delimiter
    >
        <q-side-link
            v-if="isRtcEngineUiVisible"
            item
            to="/user/home"
        >
            <q-item-side
                icon="call"
            />
            <q-item-main
                :label="callStateTitle"
                :sublabel="callStateSubtitle"
            />
        </q-side-link>
        <q-side-link
            v-if="isRtcEngineUiVisible"
            item
            to="/conference"
        >
            <q-item-side
                icon="videocam"
            />
            <q-item-main
                :label="$t('navigation.conference.title')"
            />
        </q-side-link>
        <q-side-link
            item
            to="/user/conversations"
        >
            <q-item-side
                icon="question answer"
            />
            <q-item-main
                :label="$t('navigation.conversations.title')"
            />
        </q-side-link>
        <q-collapsible
            :opened="isCallForward"
            intend
            icon="phone forwarded"
            :label="$t('navigation.callForward.title')"
        >
            <q-side-link
                item
                to="/user/call-forward/always"
            >
                <q-item-side
                    icon="check circle"
                />
                <q-item-main
                    :label="$t('navigation.callForward.always')"
                />
            </q-side-link>
            <q-side-link
                item
                to="/user/call-forward/company-hours"
            >
                <q-item-side
                    icon="schedule"
                />
                <q-item-main
                    :label="$t('navigation.callForward.companyHours')"
                />
            </q-side-link>
            <q-side-link
                item
                to="/user/call-forward/after-hours"
            >
                <q-item-side
                    icon="watch later"
                />
                <q-item-main
                    :label="$t('navigation.callForward.afterHours')"
                />
            </q-side-link>
        </q-collapsible>
        <q-collapsible
            :opened="isCallBlocking"
            intend
            icon="block"
            :label="$t('navigation.callBlocking.title')"
        >
            <q-side-link
                item
                to="/user/call-blocking/incoming"
            >
                <q-item-side
                    icon="call received"
                />
                <q-item-main
                    :label="$t('navigation.callBlocking.incoming')"
                />
            </q-side-link>
            <q-side-link
                item
                to="/user/call-blocking/outgoing"
            >
                <q-item-side
                    icon="call made"
                />
                <q-item-main
                    :label="$t('navigation.callBlocking.outgoing')"
                />
            </q-side-link>
            <q-side-link
                item
                to="/user/call-blocking/privacy"
            >
                <q-item-side
                    icon="fa-user-secret"
                />
                <q-item-main
                    :label="$t('navigation.callBlocking.privacy')"
                />
            </q-side-link>
        </q-collapsible>
        <q-side-link
            item
            to="/user/reminder"
        >
            <q-item-side
                icon="fa-bell"
            />
            <q-item-main
                :label="$t('navigation.reminder.title')"
            />
        </q-side-link>
        <q-side-link
            item
            to="/user/speeddial"
        >
            <q-item-side
                icon="touch app"
            />
            <q-item-main
                :label="$t('navigation.speeddial.title')"
            />
        </q-side-link>
        <q-side-link
            item
            to="/user/voicebox"
        >
            <q-item-side
                icon="voicemail"
            />
            <q-item-main
                :label="$t('navigation.voicebox.title')"
            />
        </q-side-link>
        <q-collapsible
            v-if="isPbxAdmin"
            :opened="isPbxConfiguration"
            intend
            icon="fa-gear"
            :label="$t('navigation.pbxConfiguration.title')"
        >
            <q-side-link
                item
                to="/user/pbx-configuration/seats"
            >
                <q-item-side
                    icon="person"
                />
                <q-item-main
                    :label="$t('navigation.pbxConfiguration.seats')"
                />
            </q-side-link>
            <q-side-link
                item
                to="/user/pbx-configuration/groups"
            >
                <q-item-side
                    icon="group"
                />
                <q-item-main
                    :label="$t('navigation.pbxConfiguration.groups')"
                />
            </q-side-link>
            <q-side-link
                item
                to="/user/pbx-configuration/devices"
            >
                <q-item-side
                    icon="fa-fax"
                />
                <q-item-main
                    :label="$t('navigation.pbxConfiguration.devices')"
                />
            </q-side-link>
            <q-side-link
                item
                to="/user/pbx-configuration/call-queues"
            >
                <q-item-side
                    icon="filter_none"
                />
                <q-item-main
                    :label="$t('navigation.pbxConfiguration.callQueues')"
                />
            </q-side-link>
            <q-side-link
                item
                to="/user/pbx-configuration/sound-sets"
            >
                <q-item-side
                    icon="queue_music"
                />
                <q-item-main
                    :label="$t('navigation.pbxConfiguration.soundSets')"
                />
            </q-side-link>
            <q-side-link
                item
                to="/user/pbx-configuration/ms-configs"
            >
                <q-item-side
                    icon="arrow_forward"
                />
                <q-item-main
                    :label="$t('navigation.pbxConfiguration.msConfigs')"
                />
            </q-side-link>
        </q-collapsible>
        <q-side-link
            item
            to="/user/pbx-settings"
            v-if="isPbxEnabled"
        >
            <q-item-side
                icon="build"
            />
            <q-item-main
                :label="$t('navigation.pbxSettings.title')"
            />
        </q-side-link>
    </q-list>
</template>

<script>
    import {
        mapGetters
    } from 'vuex'
    import {
        QList,
        QSideLink,
        QItemSide,
        QItemMain,
        QCollapsible
    } from 'quasar-framework'
    import router from '../../router'
    export default {
        name: 'csc-main-menu',
        data () {
            return {}
        },
        components: {
            QList,
            QSideLink,
            QItemSide,
            QItemMain,
            QCollapsible
        },
        props: [
            'callStateTitle',
            'callStateSubtitle',
            'isCallForward',
            'isCallBlocking',
            'isPbxAdmin',
            'isPbxEnabled',
            'isPbxConfiguration'
        ],
        computed: {
            ...mapGetters('user', [
                'isRtcEngineUiVisible'
            ])
        },
        methods: {
            openNewCallForward () {
                router.push({path:'/user/new-call-forward'})
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
</style>
