const component = {
	event: {
		modal: {
			init: function (modalId, confirmCallback = undefined, cancelCallback = undefined) {

				// bootstrap 동적 생성 후 이벤트 적용
				const btnModal = new bootstrap.Modal($('#' + modalId)[0]);
				btnModal.show();
				
				// 모달이 닫힐 때 DOM에서 제거
				$('#oneBtnModal').on('hidden.bs.modal', function() {
					$(this).remove();
				});

				$('#modal-confirm, #modal-cancel').on('click', function() {
					if (confirmCallback !== undefined) {
						confirmCallback();
					} 

					if (cancelCallback !== undefined) {
						cancelCallback();
					} 

					$('#defaultModal').remove();
				});
			}
		}
	},
	modal: {
		default: {
			show: {
				oneBtn: function(title, content, confirmTxt = '확인', confirmCallback = undefined) {
					let oneBtnHtml = {"<>":"div","class":"modal fade","id":"oneBtnModal","tabindex":"-1","aria-labelledby":"defaultModalLabel","aria-hidden":"true","html":[
						{"<>":"div","class":"modal-dialog modal-dialog-centered modal-dialog-scrollable","html":[
							{"<>":"div","class":"modal-content","html":[
								{"<>":"div","class":"modal-header","html":[
									{"<>":"h1","class":"modal-title","id":"defaultModalLabel"},
									{"<>":"button","type":"button","class":"tl-btn-close","data-bs-dismiss":"modal","aria-label":"Close","html":[
										{"<>":"i","class":"ri-close-large-line","aria-hidden":"true"}
									]}
								]},
								{"<>":"div","id":"modal-content","class":"modal-body","text":""},
								{"<>":"div","class":"modal-footer d-grid gap-0","html":[
									{"<>":"div","class":"g-col-12","html":[
										{"<>":"button","type":"button","id":"modal-confirm","class":"tl-btn tl-btn--primary","data-bs-dismiss":"modal"}
									]}
								]}
							]}
						]}
					]};
	
					$('body .app').json2html({}, oneBtnHtml);
					$('#defaultModalLabel').text(title);
					$('#modal-content').text(content);
					$('#modal-confirm').text(confirmTxt);

					component.event.modal.init('oneBtnModal', confirmCallback);
					
				},
				twoBtn: function(title, content, confirmTxt = '확인', cancelTxt = '취소', confirmCallback = undefined, cancelCallback = undefined) {
					let twoBtnHtml = {"<>":"div","class":"modal fade","id":"twoBtnModal","tabindex":"-1","aria-labelledby":"defaultModalLabel","aria-hidden":"true","html":[
						{"<>":"div","class":"modal-dialog modal-dialog-centered modal-dialog-scrollable","html":[
							{"<>":"div","class":"modal-content","html":[
								{"<>":"div","class":"modal-header","html":[
									{"<>":"h1","class":"modal-title","id":"defaultModalLabel","text":"Modal title"},
									{"<>":"button","type":"button","class":"tl-btn-close","data-bs-dismiss":"modal","aria-label":"Close","html":[
										{"<>":"i","class":"ri-close-large-line","aria-hidden":"true"}
									]}
								]},
								{"<>":"div","class":"modal-body"},
								{"<>":"div","class":"modal-footer d-grid gap-0","html":[
									{"<>":"div","class":"g-col-4","html":[
										{"<>":"button","type":"button","id":"modal-confirm","class":"tl-btn tl-btn--secondary","data-bs-dismiss":"modal","text":"Close"}
									]},
									{"<>":"div","class":"g-col-8","html":[
										{"<>":"button","type":"button","id":"modal-cancel","class":"tl-btn tl-btn--primary","text":""}
									]}
								]}
							]}
						]}
					]};
	
					$('body .app').json2html({}, twoBtnHtml);
					$('#defaultModalLabel').text(title);
					$('#modal-content').text(content);
					$('#modal-confirm').text(confirmTxt);
					$('#modal-cancel').text(cancelTxt);
	
					component.event.modal.init('twoBtnModal', confirmCallback, cancelCallback);
				}
			}
		},
	},
	toast: {
		show: function(msg) {
			let toastHtml = {"<>":"div","class":"fixed-bottom toast","role":"alert","aria-live":"assertive","aria-atomic":"true","html":[
				{"<>":"div","class":"toast-content tl-primary-bg","html":[
					{"<>":"div","class":"toast-body"},
					{"<>":"button","type":"button","class":"btn-close btn-close-white","data-bs-dismiss":"toast","aria-label":"Close","html":[
						{"<>":"i","class":"ri-close-large-line fs-16","aria-hidden":"true"}
					]}
				]}
			]};

			$('body .app').json2html({}, toastHtml);
			let $toast = $('.toast');
			$toast.find('.toast-body').text(msg);
			$toast.addClass('show');

			setTimeout(function() {
				$toast.remove();
			}, 3000);
		},
	},
	loading: {
		show: function() {
			let loadingHtml = {"<>":"div","class":"loading","style":"display:none;","html":[
				{"<>":"div","class":"loading-indicator","html":[
					{"<>":"div","class":"loading-indicator__spinners","html":[
						{"<>":"div","class":"bouncing-loader","role":"status","html":[
							{"<>":"span","class":"bouncing-loader__bar tl-blue-bg","aria-hidden":"true"},
							{"<>":"span","class":"bouncing-loader__bar tl-red-bg","aria-hidden":"true"},
							{"<>":"span","class":"bouncing-loader__bar tl-yellow-bg","aria-hidden":"true"},
							{"<>":"span","class":"bouncing-loader__plane","aria-hidden":"true","html":[
								{"<>":"i","class":"ri-plane-line"}
							]},
							{"<>":"span","class":"visually-hidden","text":"Loading..."}
						]}
					]}
				]}
			]};

			$('body .app').json2html({}, loadingHtml);
			$('.loading').show();
		},
		remove: function() {
			$('.loading').remove();
		}
	}
}