<template>
	<div class="wcc-loader-view" v-if="loading">
		<div class="wcc-section-contentpage wcc-cookie-policy-content-section">
			<div class="wcc-card wcc-card-policy">
				<card-loader/>
				<card-loader/>
				<card-loader/>
				<card-loader/>
			</div>
		</div>
	</div>
	<div class="wcc-section-contentpage" v-else>
		<div class="wcc-cookie-policy-default-wrapper">
			<div class="wcc-cookie-policy-title-section-wrapper">
				<div class="wcc-cookie-policy-title-section">
					<div class="wcc-card-title">{{ $i18n.__("Cookie policy preview", "webtoffee-cookie-consent") }}</div>
					<div class="wcc-edit-button">
						<button class="wcc-button" @click="redirectToWordPressNewPage" :data-test-id="`wcc-create-cookie-policy-page-button`">{{ $i18n.__("Edit & publish cookie policy", "webtoffee-cookie-consent") }}</button>
					</div>
				</div>
			</div>
			<div class="wcc-cookie-policy-content-section">
				<div class="wcc-card wcc-card-policy">
					<div class="wcc-policy-datecreated" v-html="policyData"></div><br>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import api from "@/modules/policies/helpers/api";
import CardLoader from "@/components/elements/CardLoader.vue";

export default {
	name: "DefaultPage",
	components: {
		CardLoader
	},
	data() {
		return {
			loading: true, // Initialize loading to true
			policyData: '',
			dateCreated: ''
		};
	},
	methods: {
		async redirectToWordPressNewPage() {
			// Get the default data
			const page_id = await api.createPage(this.policyData);
			if (page_id) {
				// Show renew consent warning
				let renewData = {};
				renewData.status = true;
				this.setOption("renew_consent_notice", renewData);
				this.saveOptions();
				this.updateConsentStatus(true);
				// Redirect to WordPress new page
				const url = `${window.location.origin}/wp-admin/post.php?&post=${page_id}&action=edit`;
				window.open(url, '_blank');
			}
		},
		async FetchDefaultData() {
			try {
				// Get the default data
				const response = await api.defaultPage();
				this.policyData = response.policy_data;
				this.dateCreated = response.date_created;
			} catch (error) {
				// Handle errors here
				console.error('API Error:', error);
			} finally {
				this.loading = false;
			}
		}
	},
	async created() {
		try {
			// Fetch default data
			this.FetchDefaultData();
		} catch (error) {
			console.error("API Error:", error);
		}
	},
};
</script>

<style lang="scss" scoped>
.wcc-card-policy {
	max-width: 790px;
	height: 528px;
	flex-shrink: 0;
	border-radius: 12px;
	border: 1px solid #E9EBF8;
	background: #FFF;
	overflow-y: auto;
	width: 100%;
}

.wcc-cookie-policy-title-section-wrapper ,.wcc-cookie-policy-content-section{
	display: flex;
	align-items: center;
	justify-content: center;
}
.wcc-cookie-policy-title-section{
	max-width: 790px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.wcc-cookie-policy-title-section-wrapper {
	margin-bottom: 20px;
}
.wcc-cookie-policy-default-wrapper {
	margin-top: 40px;
}
.wcc-card-title {
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 28px;
	color: var(--neutral-colours-neutral-500, #2A3646);
}

.wcc-section-contentpage .wcc-cookie-policy-wrapper{
	background: #FAFDFF;
}

.wcc-policy-datecreated {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	color: var(--Neutral-colours-neutral-400, #555E6B);
	line-height: normal;
	padding: 28px 40px;
}
</style>