<template>
	<v-navigation-drawer permanent>
		<v-list dense>
			<!-- Individual Group -->
			<v-list-tile
				v-for="( group, index ) in groups"
				:key="`group-list-${ index }`"
				@mouseover="hoveredItem = index"
				@mouseout="hoveredItem = null"
				:class="{ active: activeGroup === index, }"
				@click="$emit( 'activeGroupChange', index )"
			>
				<v-list-tile-content>
					<!-- The input for the group name -->
					<v-text-field
						v-model="group.name"
						:name="`${ optionsName }[${ index }][name]`"
						@focusout="handleFocusOut( index )"
					/>
					<span
						class="lock-icon"
						v-if="group.locked"
					>🔒</span>
					<!-- Remove group button on hover -->
					<v-btn
						absolute
						small
						fab
						color="red"
						v-if="hoveredItem === index"
						@click="removeGroup( index )"
					>
						<v-icon medium color="white">close</v-icon>
					</v-btn>

					<!-- Move this group up or down -->
					<v-btn
						absolute
						class="move up"
						small
						fab
						v-if="hoveredItem === index"
						@click="moveGroupUp( index )"
					>
						<v-icon small>arrow_drop_up</v-icon>
					</v-btn>
					<v-btn
						absolute
						class="move down"
						small
						fab
						v-if="hoveredItem === index"
						@click="moveGroupDown( index )"
					>
						<v-icon small>arrow_drop_down</v-icon>
					</v-btn>

				</v-list-tile-content>
			</v-list-tile>

			<v-divider></v-divider>

			<!-- Add Group -->
			<v-list-tile @click="addGroup">
				<v-list-tile-action>
					<v-icon small>add</v-icon>
				</v-list-tile-action>
				<v-list-tile-content>
					<v-list-tile-title>{{ labels.addGroup }}</v-list-tile-title>
				</v-list-tile-content>
			</v-list-tile>

			<v-divider></v-divider>

			<v-list-tile
				@click="$emit( 'activeGroupChange', 'other' )"
				:class="{ active: activeGroup === 'other', }"
			>
				<v-list-tile-content>
					<v-list-tile-title>{{ labels.otherSettings }}</v-list-tile-title>
				</v-list-tile-content>
			</v-list-tile>

		</v-list>
	</v-navigation-drawer>
</template>
<script>

	export default {

		name: 'Groups',

		data() {

			return {
				labels        : window.GDPR_VISITOR_CONSENT_TEXT,
				optionsName   : window.GDPR_VISITOR_CONSENT_DATA.optionsName,
				hoveredItem   : null,
			};

		},

		props: [
			'groups',
			'activeGroup',
		],

		methods: {

			addGroup() {

				this.groups.push( { scripts: [], } );

			},

			removeGroup( index ) {

				this.groups.splice( index, 1 );

			},

			handleFocusOut( index ) {

				// If this group name is empty, remove
				if ( ! this.groups[ index ].name ) {
					this.groups.splice( index, 1 );
				}

			},

			moveGroupUp( index ) {
				if ( index === 0 || this.groups.length <= 1 ) {
					return;
				}
				const tmp = this.groups[ index - 1 ];
				this.groups[ index - 1 ] = this.groups[ index ];
				this.groups[ index ] = tmp;
			},

			moveGroupDown( index ) {
				if ( index === this.groups.length - 1 || this.groups.length <= 1 ) {
					return;
				}
				const tmp = this.groups[ index + 1 ];
				this.groups[ index + 1 ] = this.groups[ index ];
				this.groups[ index ] = tmp;
			},

		},

	};

</script>
