<template>
	<!-- Open sui-wrap -->
	<div class="sui-wrap" id="beehive-wrap">
		<black-friday-notice/>

		<sui-header
			:title="$i18n.title.google_analytics"
			:show-doc-link="!isStatsPage"
		>
			<template v-slot:left>
				<!-- Button to clear the cached data -->
				<refresh-button
					:notice="!isStatsPage"
					:loading.sync="loading"
					@refreshed="$root.$emit('statsRefreshCompleted')"
				/>
			</template>
			<template v-slot:right>
				<div id="beehive-statics-period" v-if="isStatsPage">
					<sui-calendar-range
						id="beehive-stats-datepicker"
						:periods="$vars.dates.periods"
						:start-date="$vars.dates.start_date"
						:end-date="$vars.dates.end_date"
						:selected-label="$vars.dates.selected_label"
						@periodChange="changePeriods"
					/>
					<sui-checkbox
						id="beehive-stats-compare-period"
						type="small"
						:label="$i18n.label.compare_periods"
						v-model="compare"
					/>
				</div>
			</template>
		</sui-header>

		<section class="sui-row-with-sidenav">
			<div role="navigation" class="sui-sidenav">
				<div class="sui-sidenav-settings">
					<ul class="sui-vertical-tabs sui-sidenav-hide-md">
						<router-link
							class="sui-vertical-tab"
							tag="li"
							to="/statistics"
							v-if="canShowStatisticsMenu"
						>
							<a>{{ $i18n.title.statistics }}</a>
						</router-link>
						<router-link
							class="sui-vertical-tab"
							tag="li"
							to="/account"
							v-if="canShowSettingsMenu"
						>
							<a>{{ $i18n.label.account }}</a>
						</router-link>
						<router-link
							class="sui-vertical-tab"
							tag="li"
							to="/settings"
							v-if="canShowSettingsMenu"
						>
							<a>{{ $i18n.label.settings }}</a>
						</router-link>
					</ul>

					<mobile-nav :selected="$route.path" :paths="getNavs"/>
				</div>
			</div>

			<router-view
				:compare="compare"
				:processing="processing"
				:loading.sync="loading"
				@submit="saveSettings"
			/>
		</section>

		<sui-footer/>
	</div>
	<!-- Close sui-wrap -->
</template>

<script>
import SuiHeader from '@/components/sui/sui-header'
import SuiFooter from '@/components/sui/sui-footer'
import SuiCheckbox from '@/components/sui/sui-checkbox'
import MobileNav from '@/components/elements/mobile-nav'
import RefreshButton from '@/components/elements/refresh-button'
import SuiCalendarRange from '@/components/sui/sui-calendar-range'
import {hasStatisticsAccess, hasSettingsAccess} from '@/helpers/utils'
import BlackFridayNotice from '@/components/elements/black-friday-notice'

export default {
	name: 'App',

	components: {
		SuiHeader,
		SuiFooter,
		MobileNav,
		SuiCheckbox,
		RefreshButton,
		SuiCalendarRange,
		BlackFridayNotice,
	},

	data() {
		return {
			compare: false,
			loading: false,
			processing: false,
		}
	},

	computed: {
		/**
		 * Check if current page is statistics page.
		 *
		 * @since 3.3.5
		 *
		 * @return {boolean}
		 */
		isStatsPage() {
			return '/statistics' === this.$route.path
		},

		/**
		 * Check if statistics menu can be shown.
		 *
		 * @since 3.3.5
		 *
		 * @return {boolean}
		 */
		canShowStatisticsMenu() {
			return hasStatisticsAccess()
		},

		/**
		 * Check if main menu can be shown.
		 *
		 * @since 3.3.5
		 *
		 * @return {boolean}
		 */
		canShowSettingsMenu() {
			return hasSettingsAccess()
		},

		/**
		 * Get the navigation items.
		 *
		 * @since 3.3.5
		 *
		 * @returns {*}
		 */
		getNavs() {
			let navs = {
				'/account': this.$i18n.label.account,
				'/settings': this.$i18n.label.settings,
			}

			// Add statistics menu if required.
			if (this.canShowStatisticsMenu) {
				navs = Object.assign(
					{'/statistics': this.$i18n.title.statistics},
					navs
				)
			}

			return navs
		},
	},

	methods: {
		/**
		 * Save settings values using API.
		 *
		 * @since 3.2.4
		 */
		async saveSettings() {
			// Disable processing.
			this.processing = true

			// Save settings.
			let success = await this.saveOptions()

			if (success) {
				this.$root.$emit('showTopNotice', {
					message: this.$i18n.notice.changes_saved,
				})
			} else {
				this.$root.$emit('showTopNotice', {
					dismiss: true,
					type: 'error',
					message: this.$i18n.notice.changes_failed,
				})
			}

			// Disable processing.
			this.processing = false
		},

		/**
		 * Handle period change for updating stats.
		 *
		 * @since 3.3.5
		 *
		 * @param data
		 */
		changePeriods(data) {
			this.$root.$emit('statsPeriodChanged', data)
		},
	},
}
</script>

<style lang="scss">
@import 'styles/main';
</style>
