<template>
	<accordion-item>
		<template slot="accordion-trigger">
			<label class="wcc-app-accordion-title">{{
				$i18n.__("Cookie List", "webtoffee-cookie-consent")
			}}</label>
		</template>
		<template slot="accordion-content">
			<div class="wcc-form-section">
				<div class="wcc-form-header"></div>
				<div class="wcc-form-content">
					<div
						class="wcc-form-group wcc-align-center wcc-row"
						v-if="!translate && applicableLaw !== 'ccpa'"
					>
						<label
							for="wcc-show-cookie-declaration"
							class="wcc-col-3 wcc-col-label"
							><h6>
								{{ $i18n.__("Show cookie list", "webtoffee-cookie-consent") }}
							</h6></label
						>
						<div class="wcc-col-5">
							<base-switch v-model="banner.properties.config.auditTable.status" name="toggle-show-cookie-list" :data-test-id="'wcc-toggle-show-cookie-list'" />
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label class="wcc-col-3 wcc-col-label">{{
							$i18n.__('"Cookie" label', "webtoffee-cookie-consent")
						}}</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="content.auditTable.elements.headers.elements.id"
								:disabled="disabled"
								:data-test-id="'wcc-cookie-list-id'"
							/>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label class="wcc-col-3 wcc-col-label">{{
							$i18n.__('"Duration" label', "webtoffee-cookie-consent")
						}}</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="content.auditTable.elements.headers.elements.duration"
								:disabled="disabled"
								:data-test-id="'wcc-cookie-list-duration'"
							/>
						</div>
					</div>
					<div class="wcc-form-group wcc-align-center wcc-row">
						<label class="wcc-col-3 wcc-col-label">{{
							$i18n.__('"Description" label', "webtoffee-cookie-consent")
						}}</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="
									content.auditTable.elements.headers.elements.description
								"
								:disabled="disabled"
								:data-test-id="'wcc-cookie-list-description'"
							/>
						</div>
					</div>
					<div
						class="wcc-form-group wcc-align-center wcc-row"
						v-if="applicableLaw !== 'ccpa'"
					>
						<label class="wcc-col-3 wcc-col-label">{{
							$i18n.__('"Always Active" label', "webtoffee-cookie-consent")
						}}</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="
									content.preferenceCenter.elements.category.elements
										.alwaysEnabled
								"
								:disabled="disabled"
								:data-test-id="'wcc-cookie-list-always-active'"
							/>
						</div>
					</div>
					<div
						class="wcc-form-group wcc-align-center wcc-row"
						v-if="applicableLaw !== 'ccpa' && !translate"
					>
						<label class="wcc-col-3 wcc-col-label" style="padding-left:30px;">{{
							$i18n.__("Text color", "webtoffee-cookie-consent")
						}}</label>
						<div class="wcc-col-9 wcc-zero--padding">
							<div class="wcc-col">
								<colors
									:color="alwaysEnabledTextColor"
									v-model="alwaysEnabledTextColor"
									:disabled="disabled"
									:data-test-id="'wcc-cookie-list-always-active-text-color'"
								/>
							</div>
						</div>
					</div>
					<div
						class="wcc-form-group wcc-align-center wcc-row"
						v-if="applicableLaw !== 'ccpa'"
					>
						<label class="wcc-col-3 wcc-col-label">{{
							$i18n.__('"No cookies to display" label', "webtoffee-cookie-consent")
						}}</label>
						<div class="wcc-col-9">
							<input
								type="text"
								class="wcc-form-control"
								v-model="content.auditTable.elements.message"
								:disabled="disabled"
								:data-test-id="'wcc-cookie-list-no-cookies-to-display'"
							/>
						</div>
					</div>
				</div>
			</div>
		</template>
	</accordion-item>
</template>
<script>
import AccordionItem from "@/components/accordion/AccordionItem.vue";
import Colors from "@/components/Colors.vue";

export default {
	name: "PreferenceCenter",
	props: {
		content: Object,
		translate: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	components: {
		AccordionItem,
		Colors,
	},
	computed: {
		banner() {
			return this.$store.state.banners.current;
		},
		applicableLaw() {
			return this.banner.properties.settings.applicableLaw;
		},
		alwaysEnabledTextColor: {
			get() {
				return this.banner.properties.config.preferenceCenter.elements.category.elements.alwaysEnabled.styles.color;
			},
			set(value) {
				this.$set(
					this.banner.properties.config.preferenceCenter.elements.category.elements.alwaysEnabled.styles,
					'color',
					value
				);
			}
		}
	},
};
</script>
