<template>
	<pane class="assets" icon="el-icon-s-shop" :title="$t('panes.Assets')">
		<div class="wrapper">
			<div class="header-bar">
				<el-link @click="deleteAll" :underline="false">{{$t('Delete all')}}</el-link>
			</div>
			<div class="container">
				<el-scrollbar class="assets-scrollbar" wrap-class="wrap-x-hidden"
				              view-class="scrollbar-view">
					<asset-list ref="assetList" editable @show-file-details="showFileDetails" @click-item="onItemClick">
						<div slot="first" class="file-uploader" @click="toUploadFile" @dragover.prevent @drop="onDropFile">
							<i class="el-icon-plus file-uploader-icon"></i>
						</div>
					</asset-list>
				</el-scrollbar>
				<div class="properties">
					<template v-if="currentItem">
						<div class="item">
							<p class="name">{{currentItem.name}}</p>
							<p class="ext">{{currentItem.ext}}</p>
						</div>

						<div class="item">
							<p>
								<el-tag size="mini" type="success">size</el-tag>:
								<span>{{assetSize(currentItem.url)}}</span>
							</p>
							<p v-for="(field, index) in showFields" :key="index">
								<el-tag size="mini">{{field}}</el-tag>:
								<span>{{currentItem[field]}}</span>
							</p>
						</div>
					</template>
				</div>
			</div>
		</div>
		<assets-show ref="assetsShow"/>
	</pane>
</template>

<script>
	import {mapGetters, mapMutations, mapActions} from 'vuex'
	import Pane from "../../components/Pane";
	import FileItem from "./Assets/FileItem";
	import AssetsShow from "./Assets/AssetsShow";
	import SplitPanes from 'splitpanes'
	import {scanFiles, selectFile} from "../../utils";
	import AssetList from "./Assets/AssetList";
	import events from "@/global-events.js"

	export default {
		name: "Assets",
		components: {AssetList, AssetsShow, FileItem, Pane, SplitPanes},
		data() {
			return {
				showFields: ['url', 'uuid'],
				currentItem: null,
			}
		},
		computed: {
			...mapGetters(['assets', 'assetSize']),
		},
		mounted() {
			this.currentItem = null;
			events.$on('select-asset-item', this.selectAssetItem);
		},
		destroyed() {
			events.$off('select-asset-item', this.selectAssetItem);
		},
		methods: {
			toUploadFile() {
				selectFile((files) => {
					this.uploadFiles(files);
				}, {multiple: true})
			},
			async onDropFile(e) {
				const items = e.dataTransfer.items;
				let allFiles = [];
				let allEntries = [];
				for (let item of items) {
					await scanFiles(item.webkitGetAsEntry(), allEntries);
				}
				for (let entry of allEntries) {
					await new Promise(resolve => {
						entry.file(function (file) {
							allFiles.push(file);
							resolve();
						});
					})
				}
				this.uploadFiles(allFiles);
			},
			showFileDetails(asset) {
				this.$refs.assetsShow.show(asset);
			},
			onItemClick(asset) {
				this.updateAssetSize(asset.url);
				this.currentItem = asset;
			},
			deleteAll() {
				this.$confirm(this.$t('Are you sure to delete all assets'), this.$t('Alert'), {
					confirmButtonText: this.$t('Confirm'),
					cancelButtonText: this.$t('Cancel'),
					type: 'warning'
				}).then(() => {
					this.deleteAllAssets();
				}).catch((e) => {
				});
			},
			selectAssetItem(asset) {
				this.updateAssetSize(asset.url);
				this.currentItem = asset;
				this.$refs.assetList.selectItem(asset);
			},
			...mapMutations([
				'deleteAllAssets',
			]),
			...mapActions([
				'uploadFiles',
				'updateAssetSize',
			]),
		}
	}
</script>

<style scoped>

</style>