<template>
	
	<div class="row">
		<div class="col-sm-12">
			<svg class="row-line-blank" :id="svgId" ></svg>
		</div>
	</div>

</template>

<script>
export default {
	components: {

	},
	props: {
		svgId:{
			type: String,
			required: true
		},
		words: {
			type: Array,
			required: true
		},
		term: {
			type: Number,
			required: true,
			validator: (value) => Number.isInteger(value)
		},
		width: {
			type: Number,
			required: true,
			validator: (value) => Number.isInteger(value)
		}
	},
	data() {
		return {
		};
	},
	mounted() {
		this.lineOneWord(this.svgId, this.term, this.width, this.words);
	},
  	methods: {
		lineOneWord(svgId, term, width, problems) {
			const svg = document.getElementById(svgId);
			svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");

			const totalWidth = problems.reduce((acc, cur) => {
				return acc + (cur.text || cur.answer).length * width;
			}, 0) + (problems.length - 1) * term;

			svg.setAttribute("width", totalWidth);
			svg.setAttribute("height", width);
			svg.setAttribute("viewBox", `0 0 ${totalWidth} ${width}`);

			let xPosition = 0; // ✅ 누적 위치 선언

			problems.forEach((item, i) => {
				if(i === 0) xPosition = 0;

				const charCount = (item.text || item.answer).length;
				const boxWidth = width * charCount;

				if (item.answer === undefined) {
					// 텍스트만
					const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
					text.setAttribute("x", xPosition);
					text.setAttribute("y", width / 2);
					text.setAttribute("font-family", "Arial");
					text.setAttribute("font-size", 20);
					text.setAttribute("text-anchor", "start");
					text.setAttribute("dy", ".35em");
					text.textContent = item.text;
					svg.appendChild(text);
				} else {
					// 입력 칸
					const foreignObject = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
					foreignObject.setAttribute("x", xPosition);
					foreignObject.setAttribute("y", 0);
					foreignObject.setAttribute("width", boxWidth);
					foreignObject.setAttribute("height", width);

					const container = document.createElement("div");
					container.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
					container.classList.add("editable-container");

					const editableDiv = document.createElement("div");
					editableDiv.setAttribute("contenteditable", "true");
					editableDiv.classList.add("editable-line");

					container.appendChild(editableDiv);
					foreignObject.appendChild(container);
					svg.appendChild(foreignObject);

					this.inputKeyEvent(editableDiv, container, item.answer);
				}

				xPosition += boxWidth + term; // ✅ 누적해서 다음 위치로 이동
			});
		},

		inputKeyEvent(editableDiv, wrapper, correctValue) {
			editableDiv.addEventListener("input", function () {
				const inputValue = editableDiv.innerText.trim();
				if (inputValue === correctValue) {
					editableDiv.setAttribute("contenteditable", "false");
					wrapper.classList.remove("correct-animate");
					void wrapper.offsetWidth;
					wrapper.classList.add("correct-animate");
				} else {
					wrapper.classList.remove("wrong-animate");
					void wrapper.offsetWidth;
					wrapper.classList.add("wrong-animate");
				}
			});
			}
  	}	
};
</script>

<style>
.row-line-blank {
  min-width: 600px;
  min-height: 80px;
}

.editable-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.editable-line {
  min-width: 90%;
  text-align: center;
  font-size: 20px;
  font-family: Arial, sans-serif;
  border: none;
  border-bottom: 2px dotted #888;
  outline: none;
  padding: 4px;
  background-color: transparent;
}

.editable-line:focus {
  border-bottom: 2px solid #1976d2;
}

.editable-container.correct-animate {
  color: green;
  animation: correctPulse 0.3s ease-in-out;
}

.editable-container.wrong-animate {
  animation: shake 0.3s ease-in-out;
}

@keyframes correctPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); background-color: #c8f7c8; }
  100% { transform: scale(1); background-color: transparent; }
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
</style>