class PuzzleService {
    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';
			}
        });
	}


	lineOneWord(svgId, term, width, problems){
		const xLength = problems.length;

		var totalWidth = 0;
		for (let problem of problems) {
			if( problem["text"] === "" ) {
				totalWidth += problem["answer"].length;
			}
			else{
				totalWidth += problem["text"].length;
			}
		}
		totalWidth = totalWidth * width;
		const svg = document.getElementById(svgId);
		svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
		svg.setAttribute("width", totalWidth + ((xLength - 1) * term));
		svg.setAttribute("height", width);
		svg.setAttribute("viewBox", "0 0 " + (totalWidth + (xLength - 1) * term) + " " + width);
		
		var xPosition = 0;
		for (var j = 0; j < xLength; j++) {
			// 새로운 rect 요소 생성
			const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
			var widthTextSize = 0;

			// rect의 속성 설정
			if( problems[j]["answer"] === undefined ) {
				widthTextSize = width * problems[j]["text"].length;	
			}
			else{
				widthTextSize = width * problems[j]["answer"].length;
			}
			rect.setAttribute("width", widthTextSize);  // 너비
			rect.setAttribute("x", xPosition + j*term);
			// rect.setAttribute("x", j * (width * problems[j]["text"].length) + j*term);
			rect.setAttribute("y", 0);  // y 위치 (0~400 사이)
			// rect.setAttribute("width", width);  // 너비
			rect.setAttribute("height", width); // 높이
			rect.setAttribute("fill", "#bcbec0");  // 색상
			rect.setAttribute("stroke", "#383838");  // 테두리
			rect.setAttribute("stroke-width", "1");  // 테두리

			xPosition = xPosition + widthTextSize;


			// rect를 SVG 요소에 추가
			svg.appendChild(rect);
		}
		
		xPosition = 0;
		for (var j = 0; j < xLength; j++) {
			// 퀴즈구문인지 판단
			if( problems[j]["answer"] === undefined ) {
				// 새로운 text 요소 생성
				const text = document.createElementNS("http://www.w3.org/2000/svg", "text");

				const widthTextSize = width * problems[j]["text"].length;
				// text의 속성 설정
				// text.setAttribute("x", j * width + (width/2) + j*term);  // x 위치 (0~400 사이)
				text.setAttribute("x", xPosition + (widthTextSize/2) +j*term);
				text.setAttribute("y", 0 + (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 = problems[j]["text"];

				xPosition = xPosition + widthTextSize;

				// text를 SVG 요소에 추가
				svg.appendChild(text);
			}
			else{
				const foreignObject = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
				const widthTextSize = width * problems[j]["answer"].length;

				// foreignObject의 위치와 크기 설정
				// foreignObject.setAttribute("x", j * width + j*term);
				foreignObject.setAttribute("x", xPosition + j*term);
				foreignObject.setAttribute("y", 0);  // y 위치 (0~400 사이)
				// foreignObject.setAttribute("width", width);  // 너비
				foreignObject.setAttribute("width", widthTextSize);
				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", problems[j]["answer"].length);
				// input.setAttribute("id", svgId + "-" + i + "-" + j);

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

				xPosition = xPosition + widthTextSize;

				//	마우스 이벤트 추가
				this.inputKeyEvent(input, problems[j]["answer"]);
			}
		}
	}
  
  }


  //  좌우 몇칸인지 체크
//   let length = 0;
//   for (let value of values) {
// 	  if(value["x"] > length) { length = value["x"]; }
// 	  if(value["y"] > length) { length = value["y"]; }
//   }
//   for (let problem of problems) {
// 	  if(problem["x"] > length) { length = problem["x"]; }
// 	  if(problem["y"] > length) { length = problem["y"]; }
//   }
//   length = length+1;  //  인덱스는 0부터라서.
  // end  좌우 몇칸인지 체크

//   var values = [
// 	{ x: 1, y: 0, text: "A" },
// 	{ x: 2, y: 0, text: "B" },
// 	{ x: 3, y: 0, text: "C" },
// 	{ x: 4, y: 0, text: "D" },
// 	{ x: 0, y: 1, text: "E" },
// 	{ x: 1, y: 1, text: "F" },
// 	{ x: 3, y: 1, text: "G" },
// 	{ x: 4, y: 1, text: "H" },
// 	{ x: 0, y: 2, text: "I" },
// 	{ x: 1, y: 2, text: "J" },
// 	{ x: 2, y: 2, text: "K" },
// 	{ x: 3, y: 2, text: "L" },
// 	{ x: 4, y: 2, text: "M" },
// 	{ x: 0, y: 3, text: "N" },
// 	{ x: 1, y: 3, text: "O" },
// 	{ x: 2, y: 3, text: "P" },
// 	{ x: 3, y: 3, text: "Q" },
// 	{ x: 4, y: 3, text: "R" },
// 	{ x: 0, y: 4, text: "S" },
// 	{ x: 1, y: 4, text: "T" },
// 	{ x: 2, y: 4, text: "U" },
// 	{ x: 4, y: 4, text: "V" },
// ];
  
  export default new PuzzleService();