<template>
	<accordion-item>
		<template slot="accordion-trigger">
			<label class="wcc-app-accordion-title">{{
				$i18n.__("Revisit Consent", "webtoffee-cookie-consent")
			}}</label>
		</template>
		<template slot="accordion-content">
			<div class="wcc-form-section">
				<div class="wcc-form-group wcc-align-center wcc-row" v-if="!translate">
					<label
						for="wcc-revisit-consent-button"
						class="wcc-col-3 wcc-col-label"
					>
						<h6>{{ $i18n.__("Revisit consent icon", "webtoffee-cookie-consent") }}</h6>
					</label>
					<div class="wcc-col-5">
						<base-switch v-model="banner.properties.config.revisitConsent.status" name="revisit-consent-button" :data-test-id="'wcc-toggle-revisit-consent-button'" />
					</div>
				</div>
				<div class="wcc-form-group wcc-align-center wcc-row">
					<label class="wcc-col-3 wcc-col-label">{{
						$i18n.__("Text on hover", "webtoffee-cookie-consent")
					}}</label>
					<div class="wcc-col-9">
						<input
							type="text"
							class="wcc-form-control"
							v-model="content.revisitConsent.elements.title"
							:disabled="disabled"
							:data-test-id="'wcc-revisit-consent-text-on-hover'"
						/>
					</div>
				</div>
				<div class="wcc-form-group wcc-align-center wcc-row" v-if="!translate">
					<label class="wcc-col-3 wcc-col-label">{{
						$i18n.__("Position", "webtoffee-cookie-consent")
					}}</label>
					<div class="wcc-col-9">
						<div class="wcc-form-check-inline">
							<input
								class="wcc-form-check-input"
								type="radio"
								id="wcc-revisit-consent-button-position-bottom-left"
								value="bottom-left"
								v-model="banner.properties.config.revisitConsent.position"
								:data-test-id="'wcc-revisit-consent-button-position-bottom-left'"
							/>
							<label for="wcc-revisit-consent-button-position-bottom-left">{{
								$i18n.__("Left", "webtoffee-cookie-consent")
							}}</label>
						</div>
						<div class="wcc-form-check-inline">
							<input
								class="wcc-form-check-input"
								type="radio"
								id="wcc-revisit-consent-button-position-bottom-right"
								value="bottom-right"
								v-model="banner.properties.config.revisitConsent.position"
								:data-test-id="'wcc-revisit-consent-button-position-bottom-right'"
							/>
							<label for="wcc-revisit-consent-button-position-bottom-right">{{
								$i18n.__("Right", "webtoffee-cookie-consent")
							}}</label>
						</div>
					</div>
				</div>
			</div>
		</template>
	</accordion-item>
</template>
<script>
import AccordionItem from "@/components/accordion/AccordionItem.vue";

export default {
	name: "AccordionRevisitConsent",
	props: {
		content: Object,
		translate: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	components: {
		AccordionItem,
	},
	computed: {
		banner() {
			return this.$store.state.banners.current;
		},
	},
};
</script>
