<template>
	<accordion-item
		v-show="banner.properties.config.notice.status"
		:visible="translate"
		:data-test-id="'wcc-accordion-cookie-notice'"
	>
		<template slot="accordion-trigger">
			<label class="wcc-app-accordion-title">{{
				$i18n.__("Cookie Notice", "webtoffee-cookie-consent")
			}}</label>
		</template>
		<template slot="accordion-content">
			<!-- Begin "Notice" section -->
			<div class="wcc-form-section wcc-form-section-group">
				<div class="wcc-form-header"></div>
				<div class="wcc-form-content wcc-content-colors">
					<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">
							<input
								type="text"
								class="wcc-form-control"
								v-model="loadTitle"
								:disabled="loadDisable"
								:data-test-id="'wcc-cookie-notice-title'"
							/>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label class="wcc-col-3 wcc-col-label">
							{{ $i18n.__("Message", "webtoffee-cookie-consent") }}
						</label>
						<div class="wcc-col-9">
							<editor
								:key="`${banner.id}-${key}`"
								v-model="loadDescription"
								:disabled="loadDisable"
								:language="language"
								:data-test-id="'wcc-cookie-notice-message'"
							/>
						</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"
						v-if="!translate"
					>
						<label class="wcc-col-3 wcc-col-label">
							{{ $i18n.__("Customize colour", "webtoffee-cookie-consent") }}
						</label>
						<div class="wcc-col-9">
							<div class="wcc-row wcc-justify-between">
								<div class="wcc-col">
									<label>{{ $i18n.__("Background", "webtoffee-cookie-consent") }}</label>
									<colors
										:color="
											banner.properties.config.notice.styles['background-color']
										"
										v-model="
											banner.properties.config.notice.styles['background-color']
										"
										:disabled="disabled"
										:data-test-id="'wcc-cookie-notice-background-color'"
									/>
								</div>
								<div class="wcc-col">
									<label>{{ $i18n.__("Border", "webtoffee-cookie-consent") }}</label>
									<colors
										:color="
											banner.properties.config.notice.styles['border-color']
										"
										v-model="
											banner.properties.config.notice.styles['border-color']
										"
										:disabled="disabled"
										:data-test-id="'wcc-cookie-notice-border-color'"
									/>
								</div>
								<div class="wcc-col">
									<label>{{ $i18n.__("Title", "webtoffee-cookie-consent") }}</label>
									<colors
										:color="
											banner.properties.config.notice.elements.title
												.styles.color
										"
										v-model="
											banner.properties.config.notice.elements.title
												.styles.color
										"
										:disabled="disabled"
										:data-test-id="'wcc-cookie-notice-title-color'"
									/>
								</div>
								<div class="wcc-col">
									<label>{{ $i18n.__("Message", "webtoffee-cookie-consent") }}</label>
									<colors
										:color="
											banner.properties.config.notice.elements.description
												.styles.color
										"
										v-model="
											banner.properties.config.notice.elements.description
												.styles.color
										"
										:disabled="disabled"
										:data-test-id="'wcc-cookie-notice-message-color'"
									/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- End "Notice" section -->
			<!-- Begin "Accept All" section -->
			<banner-button
				name="accept-all"
				:properties="
					banner.properties.config.notice.elements.buttons.elements.accept
				"
				:content="content.notice.elements.buttons.elements.accept"
				v-model="content.notice.elements.buttons.elements.accept"
				:title="$i18n.__('“Accept All” button', 'webtoffee-cookie-consent')"
				:toggle="false"
				:translate="translate"
				:disabled="disabled"
				:data-test-id="'wcc-button-accept-all'"
			/>
			<!-- End "Accept All" section -->
			<!-- Begin "Accept All" section -->
			<banner-button
				name="reject-all"
				:properties="
					banner.properties.config.notice.elements.buttons.elements.reject
				"
				:content="content.notice.elements.buttons.elements.reject"
				v-model="content.notice.elements.buttons.elements.reject"
				:title="$i18n.__('“Reject All” button', 'webtoffee-cookie-consent')"
				:translate="translate"
				:disabled="disabled"
				:data-test-id="'wcc-button-reject-all'"
			/>
			<!-- End "Accept All" section -->
			<!-- Begin "Accept All" section -->
			<banner-button
				name="settings"
				:properties="
					banner.properties.config.notice.elements.buttons.elements.settings
				"
				:content="content.notice.elements.buttons.elements.settings"
				v-model="content.notice.elements.buttons.elements.settings"
				:title="$i18n.__('“Customize” button', 'webtoffee-cookie-consent')"
				:translate="translate"
				:disabled="disabled"
				:data-test-id="'wcc-button-customize'"
			/>
			<!-- End "Accept All" section -->
			<!-- Begin "Accept All" section -->
			<banner-button
				name="readmore-link"
				:properties="
					banner.properties.config.notice.elements.buttons.elements.readMore
				"
				:content="content.notice.elements.buttons.elements.readMore"
				v-model="content.notice.elements.buttons.elements.readMore"
				:title="$i18n.__('“Cookie Policy” link', 'webtoffee-cookie-consent')"
				:translate="translate"
				:disabled="disabled"
				:supportedLaws="['gdpr', 'ccpa']"
				:disabledFields="['background', 'border']"
				:data-test-id="'wcc-button-cookie-policy-link'"
			>
				<template slot="wcc-btn-meta">
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label class="wcc-col-3 wcc-col-label">{{
							$i18n.__("URL", "webtoffee-cookie-consent")
						}}</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control wcc-cookie-policy-link"
								placeholder="Enter the URL to your cookie policy or privacy page"
								v-model="content.notice.elements.privacyLink"
								:disabled="disabled"
								:data-test-id="'wcc-cookie-policy-url'"
							/>
						</div>
					</div>
				</template>
			</banner-button>
			<!-- End "Accept All" section -->
			<banner-button
				name="donotsell-link"
				:properties="
					banner.properties.config.notice.elements.buttons.elements.donotSell
				"
				:content="content.notice.elements.buttons.elements.donotSell"
				v-model="content.notice.elements.buttons.elements.donotSell"
				:title="$i18n.__('“Do Not Sell” link', 'webtoffee-cookie-consent')"
				:toggle="false"
				:supportedLaws="['ccpa']"
				:translate="translate"
				:disabled="disabled"
				:disabledFields="['background', 'border']"
				:data-test-id="'wcc-button-donotsell-link'"
				>
			</banner-button>
			<div
				class="wcc-form-section wcc-form-section-group"
				v-if="!translate && appliedLaw === 'gdpr'"
			>
				<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-close-btn"
							class="wcc-col-3 wcc-col-label"
							>{{ $i18n.__("Close [X] button", "webtoffee-cookie-consent")
							}}<base-popper
								:content="
									$i18n.__(
										'Enable the close button to let users close the banner and continue browsing the site without being tracked. A close button is required by the Italian DPA.',
										'webtoffee-cookie-consent'
									)
								"
						/></label>
						<div class="wcc-col-5">
							<base-switch v-model="banner.properties.config.notice.elements.closeButton.status" name="toggle-banner-close-btn" :data-test-id="'wcc-toggle-banner-close-btn'" />
						</div>
					</div>
				</div>
			</div>
		</template>
	</accordion-item>
</template>
<script>
import AccordionItem from "@/components/accordion/AccordionItem.vue";
import Colors from "@/components/Colors.vue";
import Editor from "@/components/elements/Editor.vue";
import BannerButton from "@/modules/banners/components/BannerButton.vue";
import { mapState } from "vuex";
import BaseIcon from "@/components/icons/BaseIcon.vue";

export default {
	name: "AccordionNotice",
	components: {
		AccordionItem,
		Colors,
		Editor,
		BannerButton,
		BaseIcon
	},
	props: {
		content: Object,
		translate: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		language: {
			type: String,
			default: "en",
		},
	},
	data() {
		return {
			upgradeNoticeTitle: "",
			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.categoryPreview.elements.title.styles.color =
					config.notice.elements.description.styles.color;
		},
		saveOptoutStyles() {
			let config = this.banner.properties.config;
			config.optoutPopup.styles["background-color"] =
				config.notice.styles["background-color"];
			config.optoutPopup.styles.color =
				config.notice.elements.description.styles.color;

			config.optoutPopup.styles.color =
				config.optoutPopup.elements.title.styles.color =
				config.optoutPopup.elements.description.styles.color =
				config.optoutPopup.elements.optOption.elements.title.styles.color =
					config.notice.elements.description.styles.color;
		},
		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;
		},
		showCategoriesOnFirstLayer() {
			return this.banner.properties.settings.type === "classic";
		},
		appliedLaw() {
			return this.banner.properties.settings.applicableLaw;
		},
		isIABEnabled() {
			return this.banner.properties.settings.iab_enabled === "1";
		},
		loadTitle: {
			get() {
				if (this.isIABEnabled) {
					return this.content.iabDescription.elements.title;
				} else {
					return this.content.notice.elements.title;
				}
			},
			set(value) {
				if (this.isIABEnabled) {
					this.$set(this.content.iabDescription.elements, 'title', value);
				} else {
					this.$set(this.content.notice.elements, 'title', value);
				}
			}
		},
		loadDescription: {
			get() {
				if (this.isIABEnabled) {
					return this.content.iabDescription.elements.description;
				} else {
					return this.content.notice.elements.description;
				}
			},
			set(value) {
				if (this.isIABEnabled) {
					this.$set(this.content.iabDescription.elements, 'description', value);
				} else {
					this.$set(this.content.notice.elements, 'description', value);
				}
			}
		},
		loadDisable() {
			if (this.isIABEnabled) {
                return true;
            } else {
                return this.disabled;
            }
		},
		...mapState("settings", ["info"]),
	},
	watch: {
		"banner.properties.config.notice": {
			handler() {
				this.savePreferenceStyles();
				this.saveOptoutStyles();
			},
			deep: true,
		},
		"banner.properties.config.categoryPreview": {
			handler() {
				this.toggleDetailSaveButton();
			},
			deep: true,
		},
		banner: {
			handler() {
				this.content.preferenceCenter.elements.buttons.elements.accept =
					this.content.notice.elements.buttons.elements.accept;

				this.content.preferenceCenter.elements.buttons.elements.reject =
					this.content.notice.elements.buttons.elements.reject;

				this.content.optoutPopup.elements.optOption.elements.title =
					this.content.notice.elements.buttons.elements.donotSell;
					
				this.banner.properties.config.preferenceCenter.elements.buttons.elements.accept.styles =
					this.banner.properties.config.notice.elements.buttons.elements.accept.styles;

				this.banner.properties.config.preferenceCenter.elements.buttons.elements.reject.styles =
					this.banner.properties.config.notice.elements.buttons.elements.reject.styles;
				this.banner.properties.config.preferenceCenter.elements.buttons.elements.reject.status =
					this.banner.properties.config.notice.elements.buttons.elements.reject.status;
			},
			deep: true,
		},
		language: {
			handler() {
				this.key = Math.random().toString();
			},
		},
	},
	activated() {
		if (this.loaded) {
			// [Fix] Multiple issues were occured with TinyMCE when dynamic component is used.
			this.key = Math.random().toString();
		}
		this.loaded = true;
	},
};
</script>
<style lang="scss">.wcc-iab-notice {
	display: flex;
	color: #997410;
	background-color: #fbf6e8;
	padding: 10px 4px;
	border-radius: 4px;
  }
  .wcc-iab-notice span {
	margin: 0px 4px;
  }
</style>
