<template>
	<accordion-item>
		<template slot="accordion-trigger">
			<label class="wcc-app-accordion-title">{{
				$i18n.__("Opt-out center", "webtoffee-cookie-consent")
			}}</label>
		</template>
		<template slot="accordion-content">
			<div class="wcc-form-section wcc-form-section-group">
				<div class="wcc-form-content">
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label class="wcc-col-3 wcc-col-label"
							><h6>
								{{ $i18n.__("Title", "webtoffee-cookie-consent") }}
							</h6></label
						>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="content.optoutPopup.elements.title"
								:disabled="disabled"
								:data-test-id="'wcc-optout-center-title'"
							/>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label class="wcc-col-3 wcc-col-label"
							><h6>
								{{ $i18n.__("Privacy overview", "webtoffee-cookie-consent") }}
							</h6></label
						>
						<div class="wcc-col-9">
							<editor
								:key="key"
								v-model="content.optoutPopup.elements.description"
								:disabled="disabled"
								:language="language"
								height="180"
								:data-test-id="'wcc-optout-center-description'"
							/>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label class="wcc-col-3 wcc-col-label"
							><h6>
								{{ $i18n.__("“Show more” button", "webtoffee-cookie-consent") }}
							</h6></label
						>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="content.optoutPopup.elements.showMore"
								:disabled="disabled"
								:data-test-id="'wcc-optout-center-show-more'"
							/>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label class="wcc-col-3 wcc-col-label"
							><h6>
								{{ $i18n.__("“Show less” button", "webtoffee-cookie-consent") }}
							</h6></label
						>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="content.optoutPopup.elements.showLess"
								:disabled="disabled"
								:data-test-id="'wcc-optout-center-show-less'"
							/>
						</div>
					</div>
				</div>
			</div>
			<div class="wcc-form-section">
				<div class="wcc-form-content">
					<div class="wcc-form-group wcc-row" v-if="!translate">
						<label class="wcc-col-3 wcc-col-label"
							><h6>
								{{ $i18n.__("Checkbox", "webtoffee-cookie-consent") }}
							</h6></label
						>
						<div class="wcc-col-9">
							<div class="wcc-row">
								<div class="wcc-col-3">
									<label class="">{{
										$i18n.__("Enabled state", "webtoffee-cookie-consent")
									}}</label>
									<colors
										:color="
											banner.properties.config.optoutPopup.elements.optOption
												.elements.toggle.states.active.styles[
												'background-color'
											]
										"
										v-model="
											banner.properties.config.optoutPopup.elements.optOption
												.elements.toggle.states.active.styles[
												'background-color'
											]
										"
										:disabled="disabled"
										:data-test-id="'wcc-optout-center-enabled-state'"
									/>
								</div>
								<div class="wcc-col-3">
									<label class="">{{
										$i18n.__("Disabled state", "webtoffee-cookie-consent")
									}}</label>
									<colors
										:color="
											banner.properties.config.optoutPopup.elements.optOption
												.elements.toggle.states.inactive.styles[
												'background-color'
											]
										"
										v-model="
											banner.properties.config.optoutPopup.elements.optOption
												.elements.toggle.states.inactive.styles[
												'background-color'
											]
										"
										:disabled="disabled"
										:data-test-id="'wcc-optout-center-disabled-state'"
									/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="wcc-form-section wcc-form-section-group" v-if="gpcOptionEnabled">
				<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"
							><h6>
								{{ $i18n.__("Global Privacy Control", "webtoffee-cookie-consent") }}
							</h6></label
						>
						<div class="wcc-col-9">
							<editor
								:key="'gpc-' + key"
								v-model="loadGPCDescription"
								:disabled="disabled"
								:language="language"
								height="120"
								:data-test-id="'wcc-optout-center-gpc-description'"
							/>
						</div>
					</div>
				</div>
			</div>
			<banner-button
				name="optout-cancel"
				:properties="
					banner.properties.config.optoutPopup.elements.buttons.elements.cancel
				"
				:content="content.optoutPopup.elements.buttons.elements.cancel"
				v-model="content.optoutPopup.elements.buttons.elements.cancel"
				:title="$i18n.__('“Cancel“ button', 'webtoffee-cookie-consent')"
				:toggle="false"
				:supportedLaws="['ccpa']"
				:translate="translate"
				:disabled="disabled"
				:data-test-id="'wcc-button-optout-cancel'"
			>
			</banner-button>
			<banner-button
				name="optout-confirm"
				:properties="
					banner.properties.config.optoutPopup.elements.buttons.elements.confirm
				"
				:content="content.optoutPopup.elements.buttons.elements.confirm"
				v-model="content.optoutPopup.elements.buttons.elements.confirm"
				:title="$i18n.__('“Save My Preferences” button', 'webtoffee-cookie-consent')"
				:toggle="false"
				:supportedLaws="['ccpa']"
				:translate="translate"
				:disabled="disabled"
				:data-test-id="'wcc-button-optout-confirm'"
			>
			</banner-button>
			<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-consent-details"
							class="wcc-col-3 wcc-col-label"
							style="color: #3157a6; font-weight: 500;"
							>{{ $i18n.__("Consent details", "webtoffee-cookie-consent") }}</label>
						<label v-else-if="translate && consentDetailsStatus"
							for="wcc-toggle-banner-consent-details"
							class="wcc-col-6 wcc-form-heading"
							>{{ $i18n.__('“Consent details” label', "webtoffee-cookie-consent")
							}}
						</label>
						<div class="wcc-col-5" v-if="!translate">
							<base-switch v-model="consentDetailsStatus" name="toggle-banner-consent-details" />
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row" v-if="consentDetailsStatus">
						<label class="wcc-col-3 wcc-col-label">
							{{ $i18n.__("Consent details label", "webtoffee-cookie-consent") }}
						</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="loadConsentDetailsLabel"
								:disabled="disabled"
								:data-test-id="'wcc-preference-center-consent-details-label'"
							/>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row" v-if="consentDetailsStatus">
						<label class="wcc-col-3 wcc-col-label">
							{{ $i18n.__("Consent details ID label", "webtoffee-cookie-consent") }}
						</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="loadConsentDetailsIdLabel"
								:disabled="disabled"
								:data-test-id="'wcc-preference-center-consent-details-id-label'"
							/>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row" v-if="consentDetailsStatus">
						<label class="wcc-col-3 wcc-col-label">
							{{ $i18n.__("Consent details time label", "webtoffee-cookie-consent") }}
						</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="loadConsentDetailsTimeLabel"
								:disabled="disabled"
								:data-test-id="'wcc-preference-center-consent-details-time-label'"
							/>
						</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 Colors from "@/components/Colors.vue";

export default {
	name: "AccordionOptOutCenter.vue",
	props: {
		content: Object,
		translate: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		language: {
			type: String,
			default: "en",
		},
	},
	components: {
		Colors,
		Editor,
		AccordionItem,
		BannerButton,
	},
	data() {
		return {
			key: Math.random().toString(),
			loaded: false,
		};
	},
	methods: {},
	computed: {
		banner() {
			return this.$store.state.banners.current;
		},
		poweredByStatus: {
			get() {
				return !this.banner.properties.config.optoutPopup.elements.poweredBy.status;
			},
			set(value) {
				this.banner.properties.config.optoutPopup.elements.poweredBy.status = !value;
			}
		},
		loadGPCDescription: {
			get() {
				return this.content.optoutPopup.elements.gpcOption.elements.description;
			},
			set(value) {
				this.$set(this.content.optoutPopup.elements.gpcOption.elements, 'description', value);
			}
		},
		gpcOptionEnabled() {
			return this.banner.properties.config.optoutPopup.elements.gpcOption.status === true;
		},
		consentDetailsStatus: {
			get() {
				return this.banner.properties.config.optoutPopup.elements.consentDetails.status;
			},
			set(value) {
				this.banner.properties.config.optoutPopup.elements.consentDetails.status = value;
			}
		},
		loadConsentDetailsLabel: {
			get() {
				return this.content.optoutPopup.elements.consentDetails.elements.label;
			},
			set(value) {
				this.$set(this.content.optoutPopup.elements.consentDetails.elements, 'label', value);
			}
		},
		loadConsentDetailsIdLabel: {
			get() {
				return this.content.optoutPopup.elements.consentDetails.elements.idLabel;
			},
			set(value) {
				this.$set(this.content.optoutPopup.elements.consentDetails.elements, 'idLabel', value);
			}
		},
		loadConsentDetailsTimeLabel: {
			get() {
				return this.content.optoutPopup.elements.consentDetails.elements.timeLabel;
			},
			set(value) {
				this.$set(this.content.optoutPopup.elements.consentDetails.elements, 'timeLabel', value);
			}
		},
	},
	watch: {
		'banner.properties.config.optoutPopup.elements.poweredBy.status': {
			handler(newVal) {
				this.poweredByStatus = !newVal;
			},
			immediate: true,
		},
	},
};
</script>
