<template>
	
	<div id="hanzi-container">
		<div
			v-for="(char, index) in characters"
			:id="id + 'char' + index"
			class="drag-hanzi-box"
			:data-character="char"
			:key="index">
		</div>
	</div>

	<div class="drop-zone-container">
		<div
			v-for="(zone, index) in dropZones"
			class="drop-zone"
			:id="id + 'drop' + index"
			:data-answer="zone.answer"
			:key="'drop' + index">
			{{ zone.label }}
		</div>
	</div>

</template>

<script>
import HanziWriter from 'hanzi-writer'

export default {
	components: {

	},
	props: {
		id: {
			type: String,
			required: true
		},
		characters: {
			type: Array,
			required: true
		},
		dropZones: {
			type: Array,
			required: true,
		}
	},
	data() {
		return {
			// characters: ['你', '好', '天'],
			// dropZones: [
			// 	{ label: 'A', answer: '你' },
			// 	{ label: 'B', answer: '好' },
			// 	{ label: 'C', answer: '天' }
			// ],
			placeholder: null,
			dragElement: null,
			offsetX: 0,
			offsetY: 0,
			originalParent: null,
			originalNextSibling: null
		};
	},
	mounted() {
		this.characters.forEach((char, index) => {
			HanziWriter.create(this.id + 'char' + index, char, {
				width: 100,
				height: 100,
				showOutline: true,
				padding: 5,
				strokeAnimationSpeed: 0.4,
				radicalColor: '#168F16' // green
			});

			const el = document.getElementById(this.id + 'char' + index);
			el.addEventListener('mousedown', (e) => this.startDrag(e, el));
			el.addEventListener('touchstart', (e) => this.startDrag(e, el), { passive: false });
		});
	},
  	methods: {
		startDrag(e, el) {
			e.preventDefault();

			this.dragElement = el;
			this.originalParent = el.parentNode;
			this.originalNextSibling = el.nextSibling;

			const rect = el.getBoundingClientRect();
			const clientX = e.type.startsWith('touch') ? e.touches[0].clientX : e.clientX;
			const clientY = e.type.startsWith('touch') ? e.touches[0].clientY : e.clientY;

			this.offsetX = clientX - rect.left;
			this.offsetY = clientY - rect.top;

			// placeholder
			this.placeholder = document.createElement('div');
			this.placeholder.className = 'drag-hanzi-box';
			this.placeholder.style.visibility = 'hidden';
			this.originalParent.insertBefore(this.placeholder, el);

			el.style.position = 'absolute';
			el.style.zIndex = '1000';
			el.style.left = `${rect.left}px`;
			el.style.top = `${rect.top}px`;

			el.classList.add('dragging');

			document.body.appendChild(el); // 전체 화면 기준 위치 이동

			document.addEventListener('mousemove', this.onMove);
			document.addEventListener('mouseup', this.onEnd);
			document.addEventListener('touchmove', this.onMove, { passive: false });
			document.addEventListener('touchend', this.onEnd);
		},
		onMove(e) {
			if (!this.dragElement) return;

			const clientX = e.type.startsWith('touch') ? e.touches[0].clientX : e.clientX;
			const clientY = e.type.startsWith('touch') ? e.touches[0].clientY : e.clientY;

			this.dragElement.style.left = `${clientX - this.offsetX}px`;
			this.dragElement.style.top = `${clientY - this.offsetY}px`;
		},
		onEnd() {
			const char = this.dragElement.dataset.character;
			let dropped = false;

			for (let zone of this.dropZones) {
				const dropEl = document.querySelector(`.drop-zone[data-answer="${zone.answer}"]`);
				const dropRect = dropEl.getBoundingClientRect();
				const elRect = this.dragElement.getBoundingClientRect();

				const isInside =
					elRect.left < dropRect.right &&
					elRect.right > dropRect.left &&
					elRect.top < dropRect.bottom &&
					elRect.bottom > dropRect.top;

				if (isInside && char === zone.answer) {
					// 정답
					dropEl.textContent = '';
					dropEl.classList.add('success');
					this.dragElement.style.position = 'static';
					this.dragElement.style.left = '';
					this.dragElement.style.top = '';
					this.dragElement.style.zIndex = '';
					this.dragElement.style.width = '100%';
					this.dragElement.style.height = '100%';
					this.dragElement.style.pointerEvents = 'none';
					dropEl.appendChild(this.dragElement);
					dropped = true;
					break;
				}
			}

			if (!dropped) {
				// 원래 자리로 복귀
				this.dragElement.style.position = '';
				this.dragElement.style.left = '';
				this.dragElement.style.top = '';
				this.dragElement.style.zIndex = '';
				this.originalParent.insertBefore(this.dragElement, this.placeholder);
			}

			this.dragElement.classList.remove('dragging');

			if (this.placeholder && this.placeholder.parentNode) {
				this.placeholder.remove();
			}

			this.dragElement = null;
			this.placeholder = null;

			document.removeEventListener('mousemove', this.onMove);
			document.removeEventListener('mouseup', this.onEnd);
			document.removeEventListener('touchmove', this.onMove);
			document.removeEventListener('touchend', this.onEnd);
		}
  	}	
};
</script>


<style>
#hanzi-container {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
	position: relative;
}
.drag-hanzi-box {
	width: 100px;
	height: 100px;
	border: 2px solid #ccc;
	touch-action: none;
	transition: none;
}
.drop-zone-container {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 30px;
}
.drop-zone {
	width: 100px;
	height: 100px;
	border: 2px dashed #999;
	text-align: center;
	line-height: 100px;
	font-weight: bold;
	color: #666;
	position: relative;
	overflow: hidden;
}
.drop-zone.success {
	border: 2px solid green;
	color: green;
}
.dragging {
	opacity: 0.8;
}

</style>