<style lang="scss">

#libraryContainer {
	display: flex;
	flex: 2 0 30vh;
	flex-direction: column;
}

#library {
	flex: 1 0 25vh;
	overflow-y: scroll;
}

#librarySearch {
	position: relative;
	display: table;
	margin-bottom: 15px;
	padding: 0px;
}

#librarySearch input {
    display: table-cell;
	background: #666;
	border: 1px solid #888;
	color: #fff;
	width: 100%;
	padding: 3px 6px;
}

#librarySearch p {
    position: absolute;
    right: 0px;
    top: 3px;
    padding: 0 8px;
    margin: 0px;
    font-size: 1.2em;
    user-select: none;
    cursor: pointer;
}
.lpLibraryItem {
	border-top: 1px dotted #999;
	list-style: none;
	margin: 0 10px 5px;
	min-height: 43px;
	overflow: hidden;
	padding: 5px 5px 0 15px;
	position: relative;

	&:first-child {
		border-top: none;
		padding-top: 10px;
	}

	&:last-child {
		border-bottom: none;
	}

	&.gu-mirror {
		background: #606060;
		border: 1px solid #999;
		color: #fff;
	}

	.lpName {
		float: left;
		margin: 0;
		max-width: 190px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.lpWeight {
		float: right;
		width: auto;
	}

	.lpDescription {
		clear: both;
		color: #ccc;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 235px;
	}

	.handle {
		height: 80px;
		left: 0;
		position: absolute;
		top: 5px;
	}

	.lpRemove {
		bottom: 0;
		position: absolute;
		right: 14px;
	}

	#library.lpSearching & {
		display: none;
	}

	#library.lpSearching &.lpHit {
		display: block;
	}

	#main > & {
		background: #666;
		color: #fff;
		padding: 10px;
		width: 235px;
	}
}
</style>

<template>
	<section id="libraryContainer">
		<h2>Things <small>({{ filteredItems.length }})</small></h2>

		<div id="librarySearch">
			<input v-model="searchText" type="text" placeholder="search items"/>
			<p v-if="searchText.length > 0" @click="clearSearch">&times;</p>
		</div>
		<ul id="library">
			<li v-for="item in filteredItems" class="lpLibraryItem" :data-item-id="item.id" :key="item.id">
				<a v-if="item.url" :href="item.url" target="_blank" class="lpName lpHref">{{ item.name }}</a>
				<span v-if="!item.url" class="lpName">{{ item.name }}</span>
				<span class="lpWeight">
					{{ item.weight | displayWeight(item.authorUnit) }}
					{{ item.authorUnit }}
				</span>
				<span class="lpDescription">
					{{ item.description }}
				</span>
				<a class="lpRemove lpRemoveLibraryItem speedbump" title="Delete this item permanently" @click="removeItem(item)"><i class="lpSprite lpSpriteRemove" /></a>
				<div v-if="!item.inCurrentList" class="handle lpLibraryItemHandle" title="Reorder this item" />
			</li>
		</ul>
	</section>
</template>

<script>
import dragula    from 'dragula';

import mixinUtils from '../utils/mixin.js';

export default {
	name: 'LibraryItem',
	mixins: [mixinUtils],
	props: ['item'],
	data() {
		return {
			searchText: '',
			itemDragId: false,
			drake: null,
		};
	},
	computed: {
		library() {
			return this.$store.state.library;
		},
		filteredItems() {
			let i;
			let item;
			let filteredItems = [];
			if (!this.searchText) {
				filteredItems = this.library.items.map(item => Vue.util.extend({}, item));
			} else {
				const lowerCaseSearchText = this.searchText.toLowerCase();

				for (i = 0; i < this.library.items.length; i++) {
					item = this.library.items[i];
					if (item.name.toLowerCase().indexOf(lowerCaseSearchText) > -1 || item.description.toLowerCase().indexOf(lowerCaseSearchText) > -1) {
						filteredItems.push(Vue.util.extend({}, item));
					}
				}
			}

			const currentListItems = this.library.getItemsInCurrentList();

			for (i = 0; i < filteredItems.length; i++) {
				item = filteredItems[i];
				if (currentListItems.indexOf(item.id) > -1) {
					item.inCurrentList = true;
				}
			}

			return filteredItems;
		},
		list() {
			return this.library.getListById(this.library.defaultListId);
		},
		categories() {
			return this.list.categoryIds.map(id => this.library.getCategoryById(id));
		},
	},
	watch: {
		categories() {
			Vue.nextTick(() => {
				this.handleItemDrag();
			});
		},
	},
	mounted() {
		this.handleItemDrag();
	},
	methods: {
		handleItemDrag() {
			if (this.drake) {
				this.drake.destroy();
			}

			const self = this;
			const $library = document.getElementById('library');
			const $categoryItems = Array.prototype.slice.call(document.getElementsByClassName('lpItems')); // list.vue
			const drake = dragula([$library].concat($categoryItems), {
				copy: true,
				moves($el, $source, $handle, $sibling) {
					const items = self.library.getItemsInCurrentList();
					if (items.indexOf(parseInt($el.dataset.itemId)) > -1) {
						return false;
					}
					return $handle.classList.contains('lpLibraryItemHandle');
				},
				accepts($el, $target, $source, $sibling) {
					if ($target.id === 'library' || !$sibling || $sibling.classList.contains('lpItemsHeader')) {
						return false; // header and footer are technically part of this list - exclude them both.
					}
					return true;
				},
			});
			drake.on('drag', ($el, $target, $source, $sibling) => {
				this.itemDragId = parseInt($el.dataset.itemId); // fragile
			});
			drake.on('drop', ($el, $target, $source, $sibling) => {
				if (!$target || $target.id === 'library') {
					return;
				}
				const categoryId = parseInt($target.parentElement.id); // fragile
				this.$store.commit('addItemToCategory', { itemId: this.itemDragId, categoryId, dropIndex: getElementIndex($el) - 1 });
				drake.cancel(true);
			});
			this.drake = drake;
		},
		removeItem(item) {
			const callback = function () {
				this.$store.commit('removeItem', item);
			};
			const speedbumpOptions = {
				body: 'Are you sure you want to delete this item? This cannot be undone.',
			};
			bus.$emit('initSpeedbump', callback, speedbumpOptions);
		},
		clearSearch() {
			this.searchText = "";
		}
	},
};
</script>
