<template>
	<div>
		<!-- For each rule group -->
		<div
			class="group"
			v-for="(group, index) in options"
			:key="`group-${ index }`"
		>
			<input
				type="checkbox"
				:id="`group-id-${ index }`"
				:disabled="group.locked"
				v-model="group.checked"
				@change="changeGroup( group.checked, index )"
			>
			<label :for="`group-id-${ index }`">{{ group.name }}</label>
			<button
				class="details-toggle"
				@click="handleDetailToggle( group )"
			>
				<svg
					width="1792"
					height="1792"
					viewBox="0 0 1792 1792"
					xmlns="http://www.w3.org/2000/svg"
					:class="{ rotated: group.detailsShowing }"
				>
					<path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"/>
				</svg>
				<span>{{ labels.details }}</span>
			</button>

			<p class="description">{{ group.description }}</p>

			<Rules
				v-show="group.detailsShowing"
				:scripts="group.scripts"
				:groupIndex="index"
				:locked="group.locked"
				ref="ruleRef"
				@childCheckboxChanged="handleChildCheckboxChange"
			/>

		</div>

		<!-- The "Save Settings" button -->
		<div class="button-wrapper">
			<button
				@click="handleSaveSettings"
			>{{ labels.saveSettings }}</button>
		</div>
	</div>
</template>
<script>

	import Rules      from './Rules.vue';
	import setStorage from './setStorage';

	const $ = window.jQuery;
	
	export default {

		name: 'App',

		data() {
			return {
				options : window.GDPR_VISITOR_CONSENT_FRONTEND.options,
				labels  : window.GDPR_VISITOR_CONSENT_FRONTEND.labels,
			};
		},

		components: {
			Rules,
		},

		methods: {

			changeGroup( checked, index ) {
				this.$refs.ruleRef[ index ].updateScriptChecks( checked );
			},

			// Handles changes on child checkboxes
			handleChildCheckboxChange( scripts, groupIndex ) {
				const checks = [];
				scripts.forEach( ( script ) => {
					checks.push( script.checked );
				} );
				if ( checks.includes( false ) ) {
					this.options[ groupIndex ].checked = false;
				} else {
					this.options[ groupIndex ].checked = true;
				}
				this.$forceUpdate();
			},

			handleDetailToggle( group ) {
				group.detailsShowing = ! group.detailsShowing;
				this.$forceUpdate();
			},

			handleSaveSettings() {
				const scripts = [];

				// Loop through each group
				this.options.forEach( ( group ) => {

					// Loop through each script
					group.scripts.forEach( ( script ) => {

						// Only user-checked scripts are added
						if ( script.checked ) {
							scripts.push( script.slug );
						}
					} );
				} );

				// Set the cookie
				setStorage( scripts.join( ',' ) );

			},

		},

		// Set defaults
		beforeMount() {
			this.options.forEach( ( option ) => {
				// Open details by default if in a shortcode
				if ( $( '#gdpr-visitor-consent-shortcode' ).length ) {
					option.detailsShowing = true;
				} else {
					option.detailsShowing = false;
				}

				// Group is checked if locked
				if ( option.locked ) {
					option.checked = true;
				}

				// Update this boolean to false if not
				// all scripts in this group are checked
				let allSelected = true;

				option.scripts.forEach( ( script ) => {

					// If locked group, the script is "checked"
					if ( option.locked ) {
						script.checked = true;
						return;
					}

					// Get options
					let storage = window.localStorage.getItem( 'gdprvc-storage' );

					if ( ! storage ) {
						allSelected = false;
						script.checked = false;
						return;
					}

					// Split the storage into an array
					storage = storage.split( ',' );

					// Check script if user has accepted it
					if ( storage.includes( script.slug ) ) {
						script.checked = true;
						return;
					}

					allSelected = false;
					script.checked = false;
					return;

				} );

				// If all scripts are selected, so is group toggle
				if ( allSelected ) {
					option.checked = true;
				}
			} );
		},

	};

</script>
