<template>
	<div class="wcc-loader-view" v-if="loading">
		<p class="wcc-loading-text">
			<loader />
			{{ $i18n.__("Fetching data", "webtoffee-cookie-consent") }}
		</p>
	</div>
	<div v-else>
		<div class="wcc-section-layout">
			<div class="wcc-form-group wcc-row wcc-align-top">
				<div class="wcc-col-12">
					<banner-type v-bind:banner="banner" />
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Loader from "@/components/elements/Loader.vue";
import BannerType from "@/modules/banners/components/BannerType.vue";
import { mapState } from "vuex";

export default {
	name: "TabLayout",
	components: {
		Loader,
		BannerType,
	},
	data() {
		return {
			bannerPreview: false,
			showPositions: true,
			customLogoType: "image",
		};
	},
	methods: {
		toggleDetailSaveButton() {
			const config = this.banner.properties.config;
			let status = true;
			if (this.showCategoriesOnFirstLayer && config.categoryPreview.status)
				status = false;
			config.preferenceCenter.elements.buttons.elements.save.status = status;
		},
	},
	computed: {
		banner() {
			return this.$store.state.banners.current;
		},
		loading() {
			return (
				(this.$store.state.banners.current.id &&
					!this.$store.state.banners.current.id > 0) ||
				!Object.prototype.hasOwnProperty.call(this.info, "plan")
			);
		},
		appliedLaw() {
			return this.banner.properties.settings.applicableLaw;
		},
		showCategoriesOnFirstLayer() {
			return this.banner.properties.settings.type === "classic";
		},
		...mapState("settings", ["info"]),
	},
	watch: {
		"banner.properties.settings": {
			handler() {
				this.toggleDetailSaveButton();
			},
			deep: true,
		},
	},
};
</script>
<style lang="scss">
.wcc-section-layout {
	padding: 0px 20px 20px 20px;
	background: #fff;
}
</style>