<template>
	<div id="wcc-app" class="wcc-app-wrap">
		<div class="wcc-app-nav-bar wcc-visible-nav-bar">
			<notification />
			<the-header />
			<nav-menu />
		</div>
		<div class="wcc-app-nav-bar wcc-hidden-nav-bar" style="visibility: hidden; position: inherit; width: 100%; top: 0;">
			<notification />
			<the-header />
			<nav-menu />
		</div>
		<div class="wcc-app-body">
			<notice-missing-tables />
			<notice
				v-if="apiFailed"
				type="error"
				:showIcon="true"
				class="wcc-admin-notice-api-error"
			>
				<p v-html="errorMessages.apiFetchFailed"></p>
			</notice>
			<notice
				v-for="(value, key) in errors"
				v-bind:key="key"
				type="error"
				:showIcon="true"
				class="wcc-admin-notice-api-error"
			>
				<p v-html="errorMessages[key]"></p>
			</notice>
			<transition name="fade">
				<router-view />
			</transition>
			<migration-notice/>
		</div>
		<help-widget> </help-widget>
	</div>

</template>

<script>
import { mapActions } from "vuex";
import TheHeader from "@/components/layouts/TheHeader.vue";
import NavMenu from "@/components/layouts/NavMenu.vue";
import Notice from "@/components/elements/Notice.vue";
import Notification from "@/components/elements/Notification.vue";
import NoticeMissingTables from "@/components/NoticeMissingTables.vue";
import HelpWidget from "@/components/layouts/HelpWidget.vue";
import MigrationNotice from "@/components/MigrationNotice.vue";

export default {
	name: "App",
	components: {
		TheHeader,
		NavMenu,
		Notice,
		Notification,
		NoticeMissingTables,
		HelpWidget,
		MigrationNotice,
	},
	data() {
		return {
			loading: true,
			errorMessages: {
				/* translators: %1$s: URL to the customer support page */
				apiFetchFailed: this.$i18n.sprintf(
					this.$i18n.__(
						'Unable to load the plugin settings at this moment. Please reload the page to retry. If the issue persists, contact <a href="%1$s" target="_blank">Customer Support</a>.',
						"webtoffee-cookie-consent"
					),
					"https://www.webtoffee.com/support/"
				),
				/* translators: %1$s: URL to CookieYes account, %2$s: URL to customer support */
				urlMismatch: this.$i18n.sprintf(
					this.$i18n.__(
						'It looks like your website URL has been changed. To ensure the proper functioning of your banner, go to your <a href="%1$s" target="_blank">CookieYes account</a> > navigate to <b>Site Settings</b> and update the registered URL. Then, reload this page to retry. If the issue persists, contact <a href="%2$s" target="_blank">customer support</a>.',
						"webtoffee-cookie-consent"
					),
					this.$router.getAppRedirectURL(),
					"https://www.webtoffee.com/support/"
				),
			},
		};
	},
	computed: {
		apiFailed() {
			return !this.$store.state.settings.status;
		},
		cardLoader() {
			if (this.$store.state.settings.info === false || this.loading) {
				return true;
			}
			return false;
		},
		errors() {
			return this.$store.state.settings.errors;
		},
		hasErrors() {
			return !!Object.keys(this.$store.state.settings.errors).length;
		},
	},
	methods: {
		...mapActions("settings", ["loadInfo", "reInit"]),
		...mapActions("languages", ["loadLanguages"]),
	},
	async created() {
		try {
			await this.loadLanguages();
			await this.loadInfo(true);
			await this.reInit();
		} catch (error) {
			this.$root.$emit("triggerNotification", {
				type: "error",
				message: this.$i18n.__(
					"An unexpected error occurred please try reloading the page or logging in again.",
					"webtoffee-cookie-consent"
				),
			});
		}
	},
};
</script>


<style lang="scss">
.fade-enter-active {
	transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
	opacity: 0;
}
@import "scss/_main";
@include wrap-class() {
	.wcc-admin-notice-api-error {
		margin-top: 20px;
		margin-bottom: -10px;
	}
}
</style>