<template>
	<div :draggable="draggable" :class="dropclass" @dragover="drag_over" @dragstart="drag_start" @drop="drop" @dragenter="drag_enter" @dragleave="drag_leave">
		<slot></slot>
	</div>
</template>

<script>
import { ref } from 'vue/dist/vue.esm-bundler';

export default {
	props: [
		"draggable",
		"droppable",
		"object_id",
		"object_type",
		"callback",
		"extra_data",
	],

	setup(props, context) {
		return {
			dropclass: ref(""),
			content: ref(""),
		}
	},

	methods: {
		init() {
		},

		drag_over(e) {
			e.preventDefault();
		},

		drag_start(e) {
			if (this.draggable == "true") {
				e.dataTransfer.setData("object_id", this.object_id);
				e.dataTransfer.setData("object_type", this.object_type);
				e.dataTransfer.setData("extra_data", this.extra_data);
			}
		},

		drop(e) {
			if (this.droppable == "true") {
				this.dropclass = "";
				e.preventDefault();
				console.log(e.dataTransfer.getData("object_id"));
				console.log(e.dataTransfer.getData("object_type"));
				console.log(e.dataTransfer.getData("extra_data"));
				console.log(this);

				$.ajax({
					url: this.callback,
					method: 'POST',
					data: {
						dst_id: this.object_id,
						dst_type: this.object_type,
						dst_extra: this.extra_data,
						src_id: e.dataTransfer.getData("object_id"),
						src_type: e.dataTransfer.getData("object_type"),
						src_extra: e.dataTransfer.getData("extra_data"),
						copy: e.ctrlKey,
					}
				}).done(this.drop_complete);
			}
		},

		drop_complete(data) {
			//console.log(data);
			window.location.reload();
		},

		drag_enter(e) {
			if (this.droppable == "true") {
				this.dropclass = "bg-warning-subtle";
			}
		},

		drag_leave(e) {
			if (this.droppable == "true") {
				this.dropclass = "";
			}
		},
	},

	mounted() {
		this.init();
	}
}
</script>
