<script>
	import _ from 'lodash'
	export default {
		props: {
			value: {
				type: Array,
				default: () => []
			},
			labelName: {
				type: String,
				default: 'label'
			},
			valueName: {
				type: String,
				default: 'value'
			},
			renderLabel: {
				type: Function,
				default: null
			},
			allowedValues: {
				type: Array,
				default: () => [0,1,2]
			},
			groupedBy: {
				type: String,
				default: null
			},
			uniqueDataField: {
				type: String,
				default: 'uId'
			},
			deleteButton: {
				type: Boolean,
				default: false
			},
			namesClickable: {
				type: Boolean,
				default: false
			},
			itemsAreDraggable: {
				type: Boolean,
				default: false
			},
			dropAreaStatus: {
				type: Number,
				default: 2
			}
		},
		watch: {
			allowedValues(allowedValues, oldAllowedValues){
				if(allowedValues.length !== oldAllowedValues){
					_.each(this.value, item => {
						if(!item.allowedValues && allowedValues.indexOf(item.selected) === -1) {
							this.toggle(item)
						}
					})
				}
			},
		},
		computed: {
			uniqueDataFieldKebabName(){
				return _.kebabCase(this.uniqueDataField)
			},
			groups(){
				let groups = []
				_.forEach(this.notHighlightedItems, (item) => {
					// if(item.highlighted === true) return
					if(this.itemsAreDraggable && item.selected === this.dropAreaStatus){
						return
					}
					let group = _.find(groups, {title: item[this.groupedBy]})
					if(!group){
						group = {
							items: [],
							title: item[this.groupedBy]
						}
						groups.push(group)
					}
					if(item.allowedValues && item.allowedValues.indexOf(item.selected) === -1){
						item.selected = item.allowedValues[0]
					}
					group.items.push(item)
				})
				return groups
			},
			highlightedItems(){
				return _.filter(this.value, { highlighted: true	})
			},
			notHighlightedItems(){
				return _.filter(this.value, e => {
					return !e.highlighted
				})
			},
			isDraggable(){
				return this.itemsAreDraggable
			},
			droppedItems(){
				return _.filter(this.notHighlightedItems, { selected: this.dropAreaStatus })
			}
		},
		data(){
			return {
				items: [],
				draggingItem: null,
				draggingItemOverDropArea: false,
				dragEnterCounter: 0
				//groups: []
			}
		},
		methods: {
			excludeDroppedItems(items){
				return _.filter(items, i => {
					return i.selected !== this.dropAreaStatus
				})
			},
			dataId(item){
				return {
					[`data-${this.uniqueDataFieldKebabName}`]: item[this.uniqueDataField]
				}
			},
			toggle(item){
				let allowedValues = item.allowedValues ? item.allowedValues : this.allowedValues
				//console.log(item)
				let v = item.selected

				let currentIndex = allowedValues.indexOf(v)
				let nextIndex = currentIndex + 1

				if(!allowedValues[nextIndex]){
					nextIndex = 0
				}

				v = allowedValues[nextIndex]

				let temp = _.clone(item)
				temp.selected = v
				this.$emit('input', temp)
			},
			render(item){
				if(this.renderLabel){
					return this.renderLabel(item[this.labelName], item[this.valueName], item)
				}
				return item[this.labelName]
			},
			deleteItem(item){
				this.$emit('onDelete', item)
			},
			onNameClick(item){
				if(!this.namesClickable){
					this.toggle(item)
				} else {
					this.$emit('onNameClick', item)
				}
			},
			onDrag(){

			},
			onDragStart(item){
				this.draggingItem = item
			},
			onDrop(v){
				let temp = _.clone(this.draggingItem)
				temp.selected = v
				this.$emit('input', temp)
				this.draggingItem = null
				this.draggingItemOverDropArea = false
				this.dragEnterCounter = 0
			},
			onDragEnter(){
				this.draggingItemOverDropArea = true
				this.dragEnterCounter++
			},
			onDragLeave(e){
				this.dragEnterCounter--
				if(this.dragEnterCounter === 0){
					this.draggingItemOverDropArea = false
				}

			},
			mouseOver(item){
				this.$emit('onMouseOverItem', item)
			},
			mouseLeave(item){
				this.$emit('onMouseLeaveItem', item)
			}
		}
	}
</script>
<template>
	<div class="multiple-state-checkbox">
		<div
			class="multiple-state-checkbox-highlight-items"
			v-if="highlightedItems.length"
		>
			<div v-for="(item, i) in highlightedItems" :key="i" @click="toggle(item)" class="highlighted-item" v-bind="dataId(item)">
				<label :class="{'state-1': item.selected === 1, 'state-2': item.selected === 2, }">
					<span class="item-name" v-html="render(item)" @click="onNameClick(item)" v-on:click.stop></span>
				</label>
				<span v-if="deleteButton" class="delete-button" @click="deleteItem(item)"></span>
			</div>
		</div>
		<div
			v-if="!groupedBy"
			class="multiple-state-checkbox--regular-items"
			:class="{'multiple-state-checkbox--regular-items--empty': itemsAreDraggable && excludeDroppedItems(notHighlightedItems).length === 0}"
			@drop="onDrop(0)"
			@dragover.prevent
		>
			<div
				v-for="(item, i) in excludeDroppedItems(notHighlightedItems)"
				:key="i" @click="toggle(item)"
				class="item-container"
				:class="{ignored: item.ignored, bold: item.bold, disabled: item.disabled}"
				@drag="onDrag(item)"
				@dragstart="onDragStart(item)"
				@dragover.prevent
				:draggable="isDraggable"
				@mouseenter="mouseOver(item)"
				@mouseleave="mouseLeave(item)"
			>
				<label :class="{'state-1': item.selected === 1, 'state-2': item.selected === 2, }">
					<span class="item-name" v-html="render(item)"></span>
				</label>
				<span v-if="deleteButton" class="delete-button" @click="deleteItem(item)"></span>
			</div>
		</div>
		<div
			v-else
			class="multiple-state-checkbox--regular-items"
			:class="{'multiple-state-checkbox--regular-items--empty': itemsAreDraggable && excludeDroppedItems(notHighlightedItems).length === 0}"
		>
			<div v-for="(group, groupId) in groups" :key="groupId" class="group-container">
				<div class="group-title">{{group.title}}</div>
				<div
					v-for="(item, i) in group.items"
					:key="i" @click="toggle(item)"
					class="item-container"
					v-bind="dataId(item)"
					:class="{ignored: item.ignored, bold: item.bold, disabled: item.disabled}"
					@drag="onDrag(item)"
					@dragstart="onDragStart(item)"
					@dragover.prevent
					:draggable="isDraggable"
					@mouseenter="mouseOver(item)"
					@mouseleave="mouseLeave(item)"
				>
					<label :class="{'state-1': item.selected === 1, 'state-2': item.selected === 2, }">
						<span class="item-name" v-html="render(item)" @click="onNameClick(item)" v-on:click.stop></span>
					</label>
					<span v-if="deleteButton" class="delete-button" @click="deleteItem(item)"></span>
				</div>
			</div>

		</div>
		<div
			v-if="itemsAreDraggable"
			class="multiple-state-checkbox__drop-area"
			@drop="onDrop(dropAreaStatus)"
			@dragenter="onDragEnter"
			@dragleave="onDragLeave"
			@dragover.prevent
			:class="{'multiple-state-checkbox__drop-area--empty': droppedItems.length === 0, 'multiple-state-checkbox__drop-area--over': draggingItemOverDropArea}"
		>
			<div
				v-for="(item, i) in droppedItems"
				:key="i" @click="toggle(item)"
				class="item-container"
				@dragstart="onDragStart(item)"
				@dragover.prevent
				:draggable="isDraggable"
				@mouseenter="mouseOver(item)"
				@mouseleave="mouseLeave(item)"
			>
				<label :class="{'state-1': item.selected === 1, 'state-2': item.selected === 2, }">
					<span class="item-name" v-html="render(item)"></span>
				</label>
			</div>
		</div>

	</div>
</template>
<style lang="scss">
	.multiple-state-checkbox {
		.multiple-state-checkbox-highlight-items {
			&::after {
				content: '';
				border-bottom: 1px dashed #ccc;
				padding-bottom: 13px;
				margin-bottom: 6px;
				width: 90%;
				display: block;
			}
			.highlighted-item {
				font-weight: 500;
				&::after {
					//background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmY…UtMi4yIDIwLjUgOC41djY3aDExNmM2LjYgMCAxMiA1LjQgMTIgMTJ6Ij48L3BhdGg+PC9zdmc+);
					content: "";
					width: 1rem;
					display: block;
					height: 1rem;
					float: right;
					margin-top: 6px;
					margin-right: 10%;
				}
				label {
					margin-left: 0!important;
					&::before, &::after {
						display: none;
					}
				}
			}
		}
		.multiple-state-checkbox--regular-items {
			position: relative;
			min-height: 50px;
			&--empty {
				&:after {
					content: 'drop here';
					color: #ddd;
					position: absolute;
					height: 100%;
					width: 100%;
					text-align: center;
					padding-top: 10px;
					top: 0;
					left: 0;
				}
			}
		}
		> div {
			margin-bottom: 3px;
			.group-container {
				margin-bottom: 12px;
			}
		}
		.item-container {
			.delete-button {
				cursor: pointer;
				display: none;
				vertical-align: middle;
				margin-left: 5px;
				width: 16px;
				height: 16px;
				background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48bGluZWFyR3JhZGllbnQgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGlkPSJTVkdJRF8xXyIgeDE9IjI1NiIgeDI9IjI1NiIgeTE9IjUxMiIgeTI9Ii05LjA5NDk0N2UtMDEzIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNFNDNBMTUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFNjUyNDUiLz48L2xpbmVhckdyYWRpZW50PjxjaXJjbGUgY3g9IjI1NiIgY3k9IjI1NiIgZmlsbD0idXJsKCNTVkdJRF8xXykiIHI9IjI1NiIvPjxwYXRoIGQ9Ik0zODEuNiwyNDQuMkgxMzAuNGMtNi41LDAtMTEuOCw1LjMtMTEuOCwxMS44YzAsNi41LDUuMywxMS44LDExLjgsMTEuOGgyNTEuMWM2LjUsMCwxMS44LTUuMywxMS44LTExLjggIEMzOTMuMywyNDkuNSwzODgsMjQ0LjIsMzgxLjYsMjQ0LjJ6IiBmaWxsPSIjRkZGRkZGIi8+PC9zdmc+);
			}
			&.ignored {
				color: #aaa;
				text-decoration: line-through;
				label {
					&::before{
						border-color: #aaa;
					}
					.item-name {
						span {
							color: #aaa!important;
							text-decoration: line-through;
						}
					}
				}

			}
			&.disabled {
				color: #aaa;
				label {
					&::before{
						border-color: #f0f0f0;
					}
					.item-name {
						span {
							color: #aaa!important;
						}
					}
				}

			}
			&.bold {
				font-weight: 500;
			}
			&:hover {
				.delete-button {
					display: inline-block;
				}
			}
		}
		label {
			position: relative;
			margin-bottom: 0;
			vertical-align: top;
			display: inline-block;
			margin-left: 1.5rem;
			font-size: 1rem;
			line-height: 1.5rem;
			&::before {
				content: "";
				color: #fff;
				border: 1px solid #dee2e6;
				background-color: white;
				position: absolute;
				top: 0.35rem;
				left: -1.5rem;
				display: block;
				width: 1rem;
				height: 1rem;
				pointer-events: none;
				border-radius: 0;
			}

			&.state-0 {

			}

			&.state-1 {
				&::before {
					background-color: white;
				}
				&::after {
					-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J002LjU2NC43NWwtMy41OSAzLjYxMi0xLjUzOC0xLjU1TDAgNC4yNiAyLjk3NCA3LjI1IDggMi4xOTN6Jy8+PC9zdmc+");
					mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J002LjU2NC43NWwtMy41OSAzLjYxMi0xLjUzOC0xLjU1TDAgNC4yNiAyLjk3NCA3LjI1IDggMi4xOTN6Jy8+PC9zdmc+");
					background-color: #333;
					mask-size: 75%;
					mask-position: center center;
					mask-repeat: no-repeat;
				}
			}

			&.state-2 {
				&::before {
					background-color: white;
				}
				&::after {
					-webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiPjxjaXJjbGUgY3g9IjMyIiBjeT0iMzIiIHI9IjMyIiBmaWxsPSJ3aGl0ZSIgLz48L3N2Zz4=");
					mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiPjxjaXJjbGUgY3g9IjMyIiBjeT0iMzIiIHI9IjMyIiBmaWxsPSJ3aGl0ZSIgLz48L3N2Zz4=");
					background-color: #999;
					mask-size: 75%;
					mask-position: center center;
					mask-repeat: no-repeat;
				}
			}

			&::after {
				content: "";
				position: absolute;
				top: 0.35rem;
				left: -1.5rem;
				display: block;
				width: 1rem;
				height: 1rem;
				border: 1px solid transparent;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 50% 50%;

			}
		}
		&__drop-area {
			margin-top: 8px;
			width: calc(100% - 8px);
			height: auto;
			min-height: 50px;
			border-top: 4px dashed #ddd;
			padding-bottom: 50px;
			position: relative;
			&--over {
				border-top-color: #00a5bb;
				&::before {
					content: "drop here";
					position: absolute;
					height: 24px;
					width: 100%;
					background: #b9eeab;
					bottom: 26px;
					color: #fff;
					text-align: center;
				}
			}
			&--empty {
				&::after {
					content: 'drop here';
					color: #ddd;
					position: absolute;
					height: 100%;
					width: 100%;
					text-align: center;
					padding-top: 10px;
					top: 0;
					left: 0;
				}
				&.multiple-state-checkbox__drop-area--over {
					&::after {
						background: #b9eeab;
					}
				}
			}

		}
	}
</style>