<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);
			const totalWidth = problems.reduce(
				(acc, p) => acc + (p.text || p.answer).length * width,
				0
			) + (problems.length - 1) * term;

			svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
			svg.setAttribute("width", totalWidth);
			svg.setAttribute("height", width);
			svg.setAttribute("viewBox", `0 0 ${totalWidth} ${width}`);

			let xPosition = 0;

			for (let i = 0; i < problems.length; i++) {
				const item = problems[i];
				const textLength = (item.text || item.answer).length;
				const boxWidth = textLength * width;

				// 배경 박스
				const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
				rect.setAttribute("x", xPosition + i * term);
				rect.setAttribute("y", 0);
				rect.setAttribute("width", boxWidth);
				rect.setAttribute("height", width);
				rect.setAttribute("rx", 10);
				rect.setAttribute("ry", 10);
				rect.setAttribute("fill", "#e4e4e4");
				rect.setAttribute("stroke", "#555");
				rect.setAttribute("stroke-width", "1");
				svg.appendChild(rect);

				// 텍스트 or 입력창
				if (item.answer === undefined) {
				const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
				text.setAttribute("x", xPosition + boxWidth / 2 + i * term);
				text.setAttribute("y", width / 2);
				text.setAttribute("font-family", "Arial");
				text.setAttribute("font-size", 20);
				text.setAttribute("text-anchor", "middle");
				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 + i * term);
				foreignObject.setAttribute("y", 5); // 약간의 여백
				foreignObject.setAttribute("width", boxWidth);
				foreignObject.setAttribute("height", width - 10);

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

				const input = document.createElement("input");
				input.setAttribute("type", "text");
				input.setAttribute("maxlength", item.answer.length);
				input.classList.add("input-field");

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

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

				xPosition += boxWidth;
			}
			},

		inputKeyEvent(inputField, wrapper, correctValue) {
			inputField.addEventListener("input", function (event) {
				const inputValue = event.target.value;
				if (inputValue === correctValue) {
					inputField.readOnly = true;
					inputField.style.color = "blue";
					inputField.style.backgroundColor = "#bcbec0";
					wrapper.classList.remove("correct-animate");
					void wrapper.offsetWidth; // reflow for restart
					wrapper.classList.add("correct-animate");
				} else {
					inputField.style.backgroundColor = "#fca7a7";
					inputField.style.color = "red";
					wrapper.classList.remove("wrong-animate");
					void wrapper.offsetWidth; // reflow for restart
					wrapper.classList.add("wrong-animate");
				}
			});
		}
  	}	
};
</script>

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

/* SVG 내 foreignObject용 입력창 스타일 */
.input-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.input-field {
  width: 95%;
  height: 80%;
  font-size: 20px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 4px 6px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  background-color: white;
  transition: background-color 0.3s, transform 0.3s;
}

.input-field:focus {
  outline: none;
  background-color: #cce0ff;
}

/* 정답 애니메이션 */
.input-container.correct-animate {
  animation: correctPulse 0.4s ease-in-out;
}
@keyframes correctPulse {
  0% { transform: scale(1); background-color: #e4e4e4; }
  50% { transform: scale(1.08); background-color: #d6ffd6; }
  100% { transform: scale(1); background-color: #e4e4e4; }
}

/* 오답 애니메이션 */
.input-container.wrong-animate {
  animation: shake 0.4s ease-in-out;
}
@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
</style>