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

</template>

<script>
export default {
	components: {

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

			
			for (var i = 0; i < length; i++) {
				for (var j = 0; j < length; j++) {
					// 새로운 rect 요소 생성
					const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

					// rect의 속성 설정
					rect.setAttribute("x", j * width);  // x 위치 (0~400 사이)
					rect.setAttribute("y", i * width);  // y 위치 (0~400 사이)
					rect.setAttribute("width", width);  // 너비
					rect.setAttribute("height", width); // 높이
					rect.setAttribute("fill", "#bcbec0");  // 색상
					rect.setAttribute("stroke", "#383838");  // 테두리
					rect.setAttribute("stroke-width", "1");  // 테두리

					// rect를 SVG 요소에 추가
					svg.appendChild(rect);
				}
			}

			for (var i = 0; i < length; i++) {
				for (var j = 0; j < length; j++) {
					// 퀴즈구문인지 판단
					var puzzleProblem = undefined;
					for (let problem of problems) {
						if( (problem["x"] === j) && (problem["y"] === i) ) {
							puzzleProblem = problem;
						}
					}
					if(puzzleProblem !== undefined){
						const foreignObject = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
						// console.log(i + ", " + j);
						// foreignObject의 위치와 크기 설정
						foreignObject.setAttribute("x", j * width);  // x 위치 (0~400 사이)
						foreignObject.setAttribute("y", i * width);  // y 위치 (0~400 사이)
						foreignObject.setAttribute("width", width);  // 너비
						foreignObject.setAttribute("height", width);  // 높이

						// HTML 네임스페이스의 body 태그 생성
						const body = document.createElementNS("http://www.w3.org/1999/xhtml", "body");

						// foreignObject 안에 넣을 HTML 요소 생성 (예: input)
						const input = document.createElement("input");
						input.classList.add("input-field");
						input.setAttribute("type", "text");
						input.setAttribute("dy", ".3em");
						input.setAttribute("maxlength", 1);
						// input.setAttribute("id", svgId + "-" + i + "-" + j);

						// body 안에 input 추가
						body.appendChild(input);
						// foreignObject에 HTML 콘텐츠 추가
						foreignObject.appendChild(body);
						// foreignObject를 SVG 요소에 추가
						svg.appendChild(foreignObject);


						// 숫자 넣기
						if('linear' in puzzleProblem) {
							const text = document.createElementNS("http://www.w3.org/2000/svg", "text");

							text.setAttribute("x", j * width + 3);  // x 위치 (0~400 사이)
							text.setAttribute("y", i * width + 10);  // y 위치 (0~400 사이)
							text.setAttribute("font-family", "Arial"); 
							text.setAttribute("font-size", 10);
							text.setAttribute("fill", "black");
							text.textContent = puzzleProblem["linear"];
							svg.appendChild(text);
						}

						//	마우스 이벤트 추가
						this.inputKeyEvent(input, puzzleProblem["answer"]);
					}
					else{
						// 퀴즈 아닌부분 값 가져오기
						// let textValue = "";
						// for (let value of values) {
						//     if( (value["x"] === j) && (value["y"] === i) ) {
						//         textValue = value["text"];
						//     }
						// }

						// 새로운 text 요소 생성
						const text = document.createElementNS("http://www.w3.org/2000/svg", "text");

						// text의 속성 설정
						text.setAttribute("x", j * width + (width/2));  // x 위치 (0~400 사이)
						text.setAttribute("y", i * width + (width/2));  // y 위치 (0~400 사이)
						text.setAttribute("font-family", "Arial"); 
						text.setAttribute("font-size", 20);
						text.setAttribute("text-anchor", "middle");
						text.setAttribute("dy", ".3em"); 
						text.textContent = "";

						// text를 SVG 요소에 추가
						svg.appendChild(text);
					}
				}
			}
		},

		inputKeyEvent(inputField, correctValue){

			// Enter 키가 눌렸을 때 동작할 이벤트 리스너 추가
			// inputField.addEventListener('keydown', function(event) {
			//     if (event.key === 'Enter') {  // Enter 키가 눌렸을 때
			//         const inputValue = inputField.value;  // input 태그의 값 가져오기
			//         if (inputValue === correctValue) {      
			// 			inputField.style.backgroundColor = '#bcbec0';
			// 			inputField.style.color = 'blue';
			// 			inputField.readOnly = true;
			//         } else {
			//             inputField.style.backgroundColor = '#fca7a7';
			// 			inputField.style.color = 'red';
			//         }
			//     }
			// });

			inputField.addEventListener('input', function(event) {
				const inputValue = event.target.value;  // input 태그의 값 가져오기
				if (inputValue === correctValue) {      
					inputField.style.backgroundColor = '#bcbec0';
					inputField.style.color = 'blue';
					inputField.readOnly = true;
				} else {
					inputField.style.backgroundColor = '#fca7a7';
					inputField.style.color = 'red';
				}
			});
		}
  	}	
};
</script>


<style>
.crossword {
    min-width: 600px;
    min-height: 600px;
    stroke-width: 3px;
    stroke-linecap: round;
}

.input-field {
	/* font-size: 24px;
	text-align: center; */
	width: 100%;
	height: 60px;
	border: 1px solid #383838;
	text-transform: uppercase;
	text-align: center;

	font-family: Arial;
	font-size: 20px;
	text-anchor: middle;
}
.input-field:focus {
	background-color: #c3d4fa; /* 클릭 시 배경색 변경 */
	/* background-color: #fca7a7; */
}
</style>