<template>
	<div class="wcc-form-section" v-if="supportedLaws.includes(appliedLaw)">
		<div class="wcc-form-header">
			<div class="wcc-row" v-if="toggle && !translate">
				<div class="wcc-col-3">
					<h5 class="wcc-form-heading">
						{{ title }}
					</h5>
				</div>
				<div class="wcc-col-9">
					<label :for="`wcc-toggle-${name}`" class="wcc-toggle" :data-test-id="`wcc-toggle-${name}`">
						<base-switch v-model="properties.status" :name="`${name}`" />
					</label>
				</div>
			</div>
			<div class="wcc-row" v-else>
				<div class="wcc-col-12">
					<h5 class="wcc-form-heading">
						{{ title }}
					</h5>
				</div>
			</div>
		</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.__("Label", "webtoffee-cookie-consent")
				}}</label>
				<div class="wcc-col-9">
					<input
						type="text"
						class="wcc-form-control"
						v-model="bannerContent"
						:disabled="disabled"
						:data-test-id="`wcc-${name}-label`"
					/>
				</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">
						<div
							class="wcc-col"
							v-if="
								properties.styles['background-color'] &&
								!disabledFields.includes('background')
							"
						>
							<label class="">{{
								$i18n.__("Background", "webtoffee-cookie-consent")
							}}</label>
							<colors
								:color="properties.styles['background-color']"
								v-model="properties.styles['background-color']"
								:disabled="disabled"
								:data-test-id="`wcc-${name}-background-color`"
							/>
						</div>
						<div
							class="wcc-col"
							v-if="
								properties.styles['border-color'] &&
								!disabledFields.includes('border')
							"
						>
							<label class="">{{
								$i18n.__("Border", "webtoffee-cookie-consent")
							}}</label>
							<colors
								:color="properties.styles['border-color']"
								v-model="properties.styles['border-color']"
								:disabled="disabled"
								:data-test-id="`wcc-${name}-border-color`"
							/>
						</div>
						<div
							class="wcc-col"
							v-if="
								properties.styles.color && !disabledFields.includes('color')
							"
						>
							<label class="">{{ $i18n.__("Text", "webtoffee-cookie-consent") }}</label>
							<colors
								:color="properties.styles.color"
								v-model="properties.styles.color"
								:disabled="disabled"
								:data-test-id="`wcc-${name}-text-color`"
							/>
						</div>
					</div>
				</div>
			</div>
			<slot name="wcc-btn-meta"></slot>
		</div>
	</div>
</template>
<script>
import Colors from "@/components/Colors.vue";

export default {
	name: "BannerButton",
	props: {
		properties: {
			type: Object,
			default() {
				return {};
			},
		},
		content: {
			type: String,
			default: "",
		},
		title: {
			type: String,
			default: "",
		},
		name: {
			type: String,
			default: "",
		},
		toggle: {
			type: Boolean,
			default: true,
		},
		supportedLaws: {
			type: Array,
			default() {
				return ["gdpr"];
			},
		},
		translate: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		disabledFields: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			bannerContent: "",
		};
	},
	components: {
		Colors,
	},
	computed: {
		appliedLaw() {
			return this.$store.state.banners.current.properties.settings.applicableLaw;
		},
	},
	mounted() {
		this.bannerContent = this.content;
	},
	watch: {
		bannerContent(val) {
			this.$emit("input", val);
		},
	},
};
</script>
