<template>
	<accordion-item>
		<template slot="accordion-trigger">
			<label class="wcc-app-accordion-title">{{
				$i18n.__("Preference Center", "webtoffee-cookie-consent")
			}}</label>
		</template>
		<template slot="accordion-content">
			<div class="wcc-form-section wcc-form-section-group">
				<div class="wcc-form-header"></div>
				<div class="wcc-form-content">
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label class="wcc-col-3 wcc-col-label">
							{{ $i18n.__("Title", "webtoffee-cookie-consent") }}
						</label>
						<div class="wcc-col-9" :data-test-id="'wcc-preference-center-title'">
							<input
								type="text"
								class="wcc-form-control"
								v-model="loadTitle"
								:disabled="disable"
							/>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label class="wcc-col-3 wcc-col-label">
							{{ $i18n.__("Privacy overview", "webtoffee-cookie-consent") }}
						</label>
						<div class="wcc-col-9" :data-test-id="'wcc-preference-center-description'">
							<editor
								:key="key"
								v-model="loadDescription"
								:disabled="disable"
								:language="language"
								height="250"
							/>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row" v-if="isIABEnabled">
						<label class="wcc-col-3 wcc-col-label">
						</label>
						<div class="wcc-col-9">
							<div  class="wcc-iab-notice">
								<span>
								<base-icon
									icon="exclamation-triangle"
									color="#000000"
								></base-icon>
								</span>
								<span>
								{{
									$i18n.__(
									"IAB TCF v2.2 is enabled, meaning that most text will be non-editable. The IAB-approved template above ensures clear and concise information for users regarding the collection and processing of their data, and it is recommended not to modify it.",
									"webtoffee-cookie-consent"
									)
								}}
								</span>
							</div>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label class="wcc-col-3 wcc-col-label">
							{{ $i18n.__("“Show more” button label", "webtoffee-cookie-consent") }}
						</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="content.preferenceCenter.elements.showMore"
								:disabled="disabled"
								:data-test-id="'wcc-preference-center-show-more'"
							/>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label class="wcc-col-3 wcc-col-label">
							{{ $i18n.__("“Show less” button label", "webtoffee-cookie-consent") }}
						</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="content.preferenceCenter.elements.showLess"
								:disabled="disabled"
								:data-test-id="'wcc-preference-center-show-less'"
							/>
						</div>
					</div>
				</div>
			</div>
			<banner-button
				name="accept-all"
				:properties="
					banner.properties.config.preferenceCenter.elements.buttons.elements
						.save
				"
				:content="content.preferenceCenter.elements.buttons.elements.save"
				v-model="content.preferenceCenter.elements.buttons.elements.save"
				:title="$i18n.__('“Save My Preferences” button', 'webtoffee-cookie-consent')"
				:toggle="false"
				:translate="translate"
				:disabled="disabled"
				:data-test-id="'wcc-button-save-preferences'"
			/>
			<div class="wcc-form-section wcc-form-section-group">
				<div class="wcc-form-header"></div>
				<div class="wcc-form-content">
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label
							v-if="!translate"
							for="wcc-toggle-banner-gpp"
							class="wcc-col-3 wcc-col-label"
							style="color: #3157a6; font-weight: 500;"
							>{{ $i18n.__("Google privacy policy link", "webtoffee-cookie-consent")
							}}<base-popper
								:content="
									$i18n.__(
										'It is mandatory to display Google\'s Privacy Policy on cookie banner if you use services offered by Google, such as AdSense, Firebase, and Analytics on your website, to be compliant with the Digital Markets Act (DMA)',
										'webtoffee-cookie-consent'
									)
								"
						/></label>
						<label v-else-if="translate && gppStatus"
							for="wcc-toggle-banner-gpp"
							class="wcc-col-6 wcc-form-heading"
							>{{ $i18n.__('“Google privacy policy” link', "webtoffee-cookie-consent")
							}}
						</label>
						<div class="wcc-col-5" v-if="!translate">
							<base-switch v-model="gppStatus" name="toggle-banner-gpp" />
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row" v-if="gppStatus">
						<label class="wcc-col-3 wcc-col-label">
							{{ $i18n.__("Description text", "webtoffee-cookie-consent") }}
						</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="loadGPPDescription"
								:disabled="disabled"
								:data-test-id="'wcc-preference-center-gpp-description'"
							/>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row" v-if="gppStatus">
						<label class="wcc-col-3 wcc-col-label">
							{{ $i18n.__("Link text", "webtoffee-cookie-consent") }}
						</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="loadGPPLinkText"
								:disabled="disabled"
								:data-test-id="'wcc-preference-center-gpp-link-text'"
							/>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row" v-if="gppStatus">
						<label class="wcc-col-3 wcc-col-label">
							{{ $i18n.__("Link URL", "webtoffee-cookie-consent") }}
						</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="loadGPPUrl"
								:disabled="disabled"
								:data-test-id="'wcc-preference-center-gpp-link-url'"
							/>
						</div>
					</div>
				</div>
			</div>
			<div
				class="wcc-form-section wcc-form-section-group" v-if="!translate"
			>
				<div class="wcc-form-header"></div>
				<div class="wcc-form-content">
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label
							for="wcc-toggle-banner-powered-by"
							class="wcc-col-3 wcc-col-label"
							>{{ $i18n.__("Remove WebToffee branding", "webtoffee-cookie-consent")
							}}<base-popper
								:content="
									$i18n.__(
										'Enable to remove the Webtoffee branding from the cookie banner.',
										'webtoffee-cookie-consent'
									)
								"
						/></label>
						<div class="wcc-col-5">
							<base-switch v-model="poweredByStatus" name="toggle-banner-powered-by" :data-test-id="'wcc-toggle-banner-powered-by'" />
						</div>
					</div>
				</div>
			</div>
		</template>
	</accordion-item>
</template>
<script>
import AccordionItem from "@/components/accordion/AccordionItem.vue";
import BannerButton from "@/modules/banners/components/BannerButton.vue";
import Editor from "@/components/elements/Editor.vue";
import BaseIcon from "@/components/icons/BaseIcon.vue";

export default {
	name: "AccordionPreference",
	components: {
		AccordionItem,
		Editor,
		BannerButton,
		BaseIcon
	},
	props: {
		content: Object,
		translate: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		language: {
			type: String,
			default: "en",
		},
	},
	data() {
		return {
			key: Math.random().toString(),
			loaded:false,
		};
	},
	methods: {
		savePreferenceStyles() {
			const config = this.banner.properties.config;
			config.preferenceCenter.styles["background-color"] =
				config.notice.styles["background-color"];

			config.preferenceCenter.styles.color =
				config.preferenceCenter.elements.title.styles.color =
				config.preferenceCenter.elements.description.styles.color =
				config.preferenceCenter.elements.categories.elements.title.styles.color =
				config.preferenceCenter.elements.categories.elements.description.styles.color =
					config.notice.elements.description.styles.color;
		}
	},
	computed: {
		banner() {
			return this.$store.state.banners.current;
		},
		isIABEnabled() {
			return this.banner.properties.settings.iab_enabled === "1";
		},
		isGACEnabled() {
			return this.banner.properties.settings.gacm_enabled;
		},
		loadTitle: {
			get() {
				if (this.isIABEnabled) {
					return this.content.iabPreferenceDescription.elements.title;
				} else {
					return this.content.preferenceCenter.elements.title
				}
			},
			set(value) {
				if (this.isIABEnabled) {
					this.$set(this.content.iabPreferenceDescription.elements, 'title', value);
				} else {
					this.$set(this.content.preferenceCenter.elements, 'title', value);
				}
			}
		},
		loadDescription: {
			get() {
				if (this.isIABEnabled) {
					if(this.isGACEnabled) {
						return this.content.iabPreferenceDescription.elements.description;
					}
					return this.content.iabPreferenceDescription.elements.description;
				} else {
					return this.content.preferenceCenter.elements.description;
				}
			},
			set(value) {
				if (this.isIABEnabled) {
					this.$set(this.content.iabDescription.elements, 'description', value);
				} else {
					this.$set(this.content.preferenceCenter.elements, 'description', value);
				}
			}
		},
		loadGPPDescription: {
			get() {
				return this.content.googlePrivacyPolicy.elements.description;
			},
			set(value) {
				this.$set(this.content.googlePrivacyPolicy.elements, 'description', value);
			}
		},
		loadGPPLinkText: {
			get() {
				return this.content.googlePrivacyPolicy.elements.linkText;
			},
			set(value) {
				this.$set(this.content.googlePrivacyPolicy.elements, 'linkText', value);
			}
		},
		loadGPPUrl: {
			get() {
				return this.content.googlePrivacyPolicy.elements.linkURL;
			},
			set(value) {
				this.$set(this.content.googlePrivacyPolicy.elements, 'linkURL', value);
			}
		},
		disable() {
			if (this.isIABEnabled) {
                return true;
            } else {
                return false
            }
		},
		poweredByStatus: {
			get() {
				return !this.banner.properties.config.preferenceCenter.elements.poweredBy.status;
			},
			set(value) {
				this.banner.properties.config.preferenceCenter.elements.poweredBy.status = !value;
			}
		},
		gppStatus: {
			get() {
				return this.banner.properties.config.preferenceCenter.elements.googlePrivacyPolicy.status;
			},
			set(value) {
				this.banner.properties.config.preferenceCenter.elements.googlePrivacyPolicy.status = value;
			}
		},
	},
	watch: {
		"banner.properties.config.notice": {
			handler() {
				this.savePreferenceStyles();
			},
			deep: true,
		},
		language: {
			handler() {
				this.key = Math.random().toString();
			},
		},
		'banner.properties.config.preferenceCenter.elements.poweredBy.status': {
			handler(newVal) {
				this.poweredByStatus = !newVal;
			},
			immediate: true,
		},
	},
	activated() { // [Fix] Multiple issues were occured with TinyMCE when dynamic component is used.
		if( this.loaded ) {
			this.key = Math.random().toString();
		}
		this.loaded = true;
	},
};
</script>
