<template>
	<div v-if="item" class="d-flex flex-column justify-content-center">
		<div class="detail text-center d-block mb-4">
			<img
				:alt="item.title"
				class="img-fluid rounded"
				:src="item.url || '~/assets/img/directory.png'"
			/>
			<h6 class="mt-3">{{ item.name }}</h6>
		</div>
		<div class="detail">
			<div class="title">اندازه:</div>
			<div class="value" :title="item.size">{{ item.size }}</div>
		</div>
		<div class="detail">
			<div class="title">تاریخ ویرایش:</div>
			<div class="value" :title="item.time_human">{{ item.time_human }}</div>
		</div>
		<div class="detail mb-3">
			<div class="title">آدرس:</div>
			<div class="value" :title="item.directory">{{ item.directory }}</div>
		</div>
		<div v-if="item.type === 'file'" class="detail">
			<div class="btn btn-secondary btn-block btn-sm" @click="copyLink">
				لینک فایل
			</div>
		</div>
		<div class="details">
			<div class="btn btn-danger btn-block btn-sm" @click="$emit('delete')">
				حذف فایل
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "ItemPreview",
	props: {
		item: {
			type: Object,
			required: false
		}
	},
	methods: {
		copyLink() {
			navigator.clipboard
				.writeText(this.item.url)
				.then(() => this.$toast.success("لینک با موفقیت کپی شد."));
		}
	}
};
</script>

<style lang="scss" scoped>
.detail {
	display: flex;
	padding: 0.5rem 0;
	justify-content: space-between;

	.value {
		direction: ltr;
		overflow: hidden;
		white-space: nowrap;
		margin-right: 0.5rem;
		text-overflow: ellipsis;
	}

	img {
		object-fit: contain;
	}
}
</style>
