script.js

function getQueryParam(param) {
	const urlParams = new URLSearchParams(window.location.search);
	return urlParams.get(param);
}

const fN = "Aditya Dwi Nugraha";
const whatsappNumber = "6289668041554";

var fromName = fN;
let urlsdatasDB = {};
let urlsdataDB = {};
let urlDB = "";
let ucapanGabungan = "";
let renderedUcapanGabungan = "";

var inputConfigs = [
	{
		label: "Nama Anda:",
		type: "text",
		placeholder: "Masukkan nama anda",
		id: "targetName",
		value: "",
	},
];

var selectConfigs = [
	{
		label: `Pilih relasi (hubungan) antara Anda dan ${fromName}:`,
		options: [
			{ value: "0", label: "Anak anda" },
			{ value: "1", label: "Keponakan anda" },
			{ value: "2", label: "Murid anda" },
			{ value: "3", label: "Saudaramu" },
			{ value: "4", label: "Sepupumu" },
			{ value: "5", label: "Sahabatmu" },
			{ value: "6", label: "Temanmu" },
			{ value: "7", label: "Orang lain" },
		],
		default: "6",
		id: "relationshipOption",
	},
];

const innerHTMLOnTopMessage = `<h2 class="mb-3">Masukkan Nama Penerima & Pilih Relasi</h2>`;

try {
	const GEMINI_API_KEY = atob(
		"QUl6YVN5QzUyNGNQREdEcWRZSnZkYmNtaUZ2N1Q2QzRnbE9JQXNR"
	);
	const MODEL_ID = "gemini-1.5-flash";
	const GENERATE_CONTENT_API = "streamGenerateContent";

	var noUcapan = "Ucapan tidak tersedia. Silakan coba lagi nanti.";

	const tryErrorMessage = document.querySelectorAll(".tryErrorMessage");
	const tryOtherMessage = document.querySelectorAll(".tryOtherMessage");

	const relationshipMapping = {
		0: "Ayah/Ibu",
		1: "Pakde/Bude",
		2: "Guru",
		3: "Saudara",
		4: "Sepupu",
		5: "Sahabat",
		6: "Teman",
		7: "Tidak dikenal alias orang lain",
	};

	async function generateUcapan(
		name,
		option,
		regenerate = false,
		isChange = false
	) {
		const targetName = name;
		const relationship =
			relationshipMapping[option.toString()] || relationshipMapping["6"];
		// const language = [0, 1, 2].includes(parseInt(option))
		// 	? "Sopan"
		// 	: `Gaul tapi tetap Sopan dan tidak berlebihan, karena INGAT! SAYA LAKI LAKI GENTLEMAN DAN PUNYA WIBAWA!. jangan pakai "lo" tapi "kamu"`;

		const payload = {
			contents: [
				{
					role: "user",
					parts: [{ text: `Nama targetnya: ${targetName}` }],
				},
			],
			systemInstruction: {
				parts: [
					{ text: "Sekarang tahun 1446H." },
					{
						text: 'Langsung mulai dengan "Assalamu\'alaikum Wr. Wb." alias salam lalu "Taqabbalallah wa minna ...." dan "Untuk ..." tanpa basa-basi.',
					},
					{
						text: `Buat kartu ucapan Idul Fitri yang personal untuk ${targetName} berdasarkan jenis kelamin dan hubungan sebagai ${relationship}. Jika hubungan adalah "teman", jangan gunakan kata-kata romantis seperti "sayang", "ku cinta", atau istilah sejenis yang terkesan intim secara romantis.`,
					},
					{
						text: `Sertakan kalimat "Kami sekeluarga ${fromName} mengucapkan..." jika hubungan bukan termasuk keluarga saya (Ayah/Ibu/Saudara). Jika termasuk keluarga saya maka beda lagi kalimatnya! Misal kalau untuk ibu: "Untuk ibuku yang tercinta..." atau kalau saudara: "Untuk ${targetName} yang ku cinta...".`,
					},
					{
						text: "Setelah itu, lanjutkan ucapan dengan salam pembuka, doa, permohonan maaf, dan harapan yang hangat namun tidak berlebihan karena saya laki-laki yang gentleman punya wibawa.",
					},
					{
						text: `Berikan emoji di setiap kalimat sebanyak-banyaknya untuk kesan asik dan santai.`,
					},
					{
						text: "Jadikan bahasa manusia agak kaku agar tidak dikira robot.",
					},
					{
						text: 'Ingat! Langsung mulai dengan "Assalamu\'alaikum Wr. Wb." alias salam lalu "Untuk ..." tanpa basa-basi.',
					},
					{
						text: `INGAT KALAU KELUARGA SENDIRI TIDAK PAKAI KALIMAT "kami sekeluarga ${fromName}"!!!!!`,
					},
				],
			},
			generationConfig: {
				responseMimeType: "text/plain",
			},
		};

		ucapanGabungan = "";
		let isFDB = false;
		let isCU = false;

		urlsdatasDB = (await getURLSDATAs())[0];

		localStorage.setItem("data", JSON.stringify(urlsdatasDB));

		for (const [key, data] of Object.entries(urlsdatasDB)) {
			if (
				data.from === fromName &&
				data.target === name &&
				data.option === option &&
				data.message &&
				data.message !== noUcapan
			) {
				ucapanGabungan = data.message;
				urlDB = `${window.location.origin}?i=` + key;
				isFDB = true;

				localStorage.setItem("url", key);
				break;
			}
		}

		const logic =
			(!isFDB && !regenerate && !isChange) ||
			(isFDB && regenerate && !isChange) ||
			(!isFDB && regenerate && isChange);

		console.log([regenerate, isFDB, isChange], logic);

		try {
			if (logic) {
				const response = await fetch(
					`https://generativelanguage.googleapis.com/v1beta/models/${MODEL_ID}:${GENERATE_CONTENT_API}?key=${GEMINI_API_KEY}`,
					{
						method: "POST",
						headers: { "Content-Type": "application/json" },
						body: JSON.stringify(payload),
					}
				);

				const data = await response.json();

				ucapanGabungan = "";
				isCU = true;

				if (Array.isArray(data)) {
					data.forEach((item) => {
						if (
							item &&
							item.candidates &&
							item.candidates[0] &&
							item.candidates[0].content &&
							item.candidates[0].content.parts &&
							item.candidates[0].content.parts[0] &&
							item.candidates[0].content.parts[0].text
						) {
							ucapanGabungan +=
								item.candidates[0].content.parts[0].text;
						}
					});
					ucapanGabungan = ucapanGabungan.trim();
				} else {
					ucapanGabungan = noUcapan;
				}
			}

			console.log("Ucapan:", ucapanGabungan);
		} catch (error) {
			ucapanGabungan = noUcapan;

			console.error("Error:", error);
		}

		if (!ucapanGabungan.trim() || ucapanGabungan === noUcapan) {
			tryErrorMessage.forEach((elm) => {
				do {
					elm.classList.remove("d-none");
				} while (elm.classList.contains("d-none"));
			});
		} else {
			tryOtherMessage.forEach((elm) => {
				do {
					elm.classList.remove("d-none");
				} while (elm.classList.contains("d-none"));
			});

			const data = {
				from: fromName,
				target: name,
				option: parseInt(option),
				message: ucapanGabungan,
			};

			if (isCU) {
				[urlDB, urlsdataDB] = await generateUrl(Object.values(data));

				urlsdatasDB[urlDB] = urlsdataDB;

				localStorage.setItem(
					"url",
					urlDB
						.replace(window.location.origin, "")
						.replace(urlDB.origin, "")
						.replace("index.html", "")
						.replace("?i=", "")
				);
				function isCircular(obj, seen = new WeakSet()) {
					if (typeof obj !== "object" || obj === null) return false;
					if (seen.has(obj)) return true;
					seen.add(obj);
					return Object.values(obj).some((value) =>
						isCircular(value, seen)
					);
				}

				if (isCircular(urlsdataDB)) {
					console.error("Data mengandung referensi circular!");
				} else {
					localStorage.setItem(urlDB, JSON.stringify(urlsdataDB));
				}
			}
		}

		return [ucapanGabungan, urlDB];
	}

	async function tampilkanKartu(
		name,
		option,
		regenerate = false,
		isChange = false
	) {
		// document.getElementById("cardTitle").innerText = `Untuk ${name}`;
		// document.getElementById("cardSection").style.display = "block";

		console.log(name, option, regenerate);

		[ucapanGabungan, urlDB] = await generateUcapan(
			name,
			option,
			regenerate,
			isChange
		);

		document.getElementById("cardMessage").innerHTML =
			marked.parse(ucapanGabungan);

		alert(`Akses halaman ini di: ${urlDB}`, false);

		if (
			window.location.href
				.replace("index.html", "")
				.replace("/?", "?") !== urlDB
		) {
			await alert(`Kamu akan diarahkan ke halaman ${urlDB}`);
			await new Promise((res) => setTimeout(res, 1000));
			window.location.href = urlDB;
		}
	}

	async function getUser() {
		let url = localStorage.getItem("url");
		let data = localStorage.getItem("data");

		if (data) {
			try {
				data = JSON.parse(data);
			} catch (e) {
				data = await getURLSDATAs();
			}
		} else {
			data = await getURLSDATAs();
		}

		console.log(url, data);

		return url && data ? data[url] || null : null;
	}

	async function setConfigs() {
		urlsdataDB = await getUser();

		console.log(urlsdataDB);

		if (urlsdataDB) {
			inputConfigs[0].value = urlsdataDB.target;
			selectConfigs[0].label = `Pilih relasi (hubungan) antara Anda dan ${urlsdataDB.from}:`;
			selectConfigs[0].default = urlsdataDB.option;
		}
	}

	async function handleTryClick(target) {
		target.classList.add("d-none");

		await setConfigs();

		const res = await multiPrompt(
			inputConfigs,
			selectConfigs,
			innerHTMLOnTopMessage
		);

		if (!res.isCancel) {
            alert("Tunggu sebentar...", false);
          
			userName = res["inputValues"]["targetName"];
			userOption = res["selectValues"]["relationshipOption"];

			let isC = false;

			urlsdataDB = await getUser();

			if (urlsdataDB) {
				if (
					(urlsdataDB.target === userName &&
						urlsdataDB.option !== userOption) ||
					(urlsdataDB.target !== userName &&
						urlsdataDB.option === userOption)
				) {
					isC = true;
				}
			} else {
				isC = true;
			}

			await tampilkanKartu(userName, userOption, true, isC);
		}

		target.classList.remove("d-none");
	}

	document.addEventListener("click", async function (event) {
		// Jika tombol yang diklik adalah .tryErrorMessage
		if (event.target.classList.contains("tryErrorMessage")) {
			await handleTryClick(event.target);
		}

		// Jika tombol yang diklik adalah .tryOtherMessage
		if (event.target.classList.contains("tryOtherMessage")) {
			await handleTryClick(event.target);
		}

		if (event.target.classList.contains("waButton")) {
			window.open(`https://wa.me/${whatsappNumber}`, "_blank");
		}

		if (event.target.classList.contains("manageURL")) {
			window.open(`manage.html`, "_blank");
		}

		if (event.target.classList.contains("urlButton")) {
			navigator.clipboard.writeText(window.location.href).then(
				() => alert("URL berhasil disalin", false),
				() => alert("Gagal menyalin URL", false)
			);
		}
	});

	if (!window.location.href.includes("manage")) {
		document.addEventListener("DOMContentLoaded", async () => {
			const queryId = getQueryParam("i");
			let isId = false;
			let data = {};

			if (queryId) {
				data = await getURLSDATA(queryId);
				console.log(data);

				if (data) {
					isId = true;
				} else {
					await alert("Id Kartu Tidak Ditemukan.");
				}
			}

			urlsdataDB = await getUser();

			const queryFromName = isId
				? data.from
				: getQueryParam("f") ||
				  (urlsdataDB && urlsdataDB.from
						? urlsdataDB.from
						: fromName || fN);
			let queryTargetName = isId
				? data.target
				: getQueryParam("t") ||
				  (urlsdataDB && urlsdataDB.target ? urlsdataDB.target : "");
			let queryOption = isId
				? data.option
				: getQueryParam("o") ||
				  (urlsdataDB && urlsdataDB.option ? urlsdataDB.option : "");

			fromName = queryFromName;

			console.log(queryFromName, queryTargetName, queryOption);

			if (
				queryFromName.trim() &&
				queryTargetName.trim() &&
				queryOption.trim()
			) {
				[urlDB, urlsdatasDB] = await generateUrl([
					queryFromName.trim(),
					queryTargetName.trim(),
					queryOption.trim(),
				]);

				urlsdatasDB[urlDB] = urlsdataDB;

				localStorage.setItem(
					"url",
					urlDB
						.replace(window.location.origin, "")
						.replace(urlDB.origin, "")
						.replace("index.html", "")
						.replace("?i=", "")
				);
				localStorage.setItem(urlDB, JSON.stringify(urlsdataDB));
				localStorage.setItem("data", JSON.stringify(urlsdatasDB));
			}

			await setConfigs();

			let res3 = false;

			do {
				let res2 = false;

				do {
					let res1 = false;

					if (!res3 === !res2 || (!res3 && res2)) {
						do {
							let res0 = false;

							if (!res2 === !res1 || (!res2 && res1)) {
								do {
									// MultiPrompt 1: Konfirmasi awal
									if (!res1 === !res0 || (!res1 && res0)) {
										let res = await multiPrompt(
											inputConfigs,
											selectConfigs,
											`<div class="child-container text-center">
								<img class="img-fluid rounded-circle" src="https://media.stickerswiki.app/stickerly_o1nn49_by_stickerly_official_bot/1825567.512.webp">
								<h2 class="mb-3">Apakah benar ini Anda?</h2></div>`,
											false,
											false,
											isId
										);

										let isC = false;

										if (!isId && !res.isCancel) {
											queryTargetName =
												res["inputValues"][
													"targetName"
												];
											queryOption =
												res["selectValues"][
													"relationshipOption"
												];

											let isC = false;

											urlsdataDB = await getUser();

											if (urlsdataDB) {
												if (
													(urlsdataDB.target ===
														userName &&
														urlsdataDB.option !==
															userOption) ||
													(urlsdataDB.target !==
														userName &&
														urlsdataDB.option ===
															userOption)
												) {
													isC = true;
												}
											} else {
												isC = true;
											}

											// [urlDB, urlsdatasDB] =
											// 	await generateUrl([
											// 		queryFromName.trim(),
											// 		queryTargetName.trim(),
											// 		queryOption.trim(),
											// 	]);

											// urlsdatasDB[urlDB] = urlsdataDB;

											localStorage.setItem(
												"url",
												urlDB
													.replace(
														window.location.origin,
														""
													)
													.replace(urlDB.origin, "")
													.replace("index.html", "")
													.replace("?i=", "")
											);
											localStorage.setItem(
												urlDB,
												JSON.stringify(urlsdataDB)
											);
											localStorage.setItem(
												"data",
												JSON.stringify(urlsdatasDB)
											);
										}

										alert("Tunggu sebentar...", false);

										await tampilkanKartu(
											queryTargetName,
											queryOption,
											isC,
											isC
										);

										alert("Lanjut...", false);
									}

									// MultiPrompt 2: Konfirmasi lanjutan
									res0 = (
										await multiPrompt(
											[],
											[],
											`<div class="child-container text-center">
							<img class="img-fluid rounded-circle" src="https://i.pinimg.com/236x/db/75/9f/db759f85996381cfc69fc4878f6fa3c6.jpg">
							<h2 class="mb-3">
								"${queryTargetName}", apakah benar ini kamu?<br>
								Kalau iya, yuk lanjut ada yang spesial buat kamu! 🎉✨
							</h2>
						</div>`.trim(),
											true,
											false,
											true,
											"Kembali"
										)
									).isCancel;
								} while (res0);
							}

							// MultiPrompt 3: Menampilkan nama penerima
							res1 = (
								await multiPrompt(
									[],
									[],
									`<div class="child-container text-center">
						<img class="img-fluid rounded-circle" src="https://media.stickerswiki.app/pandagemoi4byofcsaraya/215937.512.webp">
						<h2 class="mb-3">
							Klik Lanjut
						</h2>
					</div>`.trim(),
									true,
									false,
									true,
									"Kembali"
								)
							).isCancel;
						} while (res1);
					}

					// MultiPrompt 4: Pesan tambahan
					res2 = (
						await multiPrompt(
							[],
							[],
							`<div class="child-container text-center">
						<img class="img-fluid rounded-circle" src="https://i.pinimg.com/474x/7d/08/e5/7d08e5de7c11a7356c7ee187f39cbc34.jpg">
						<div class="text-center">${
							document.getElementById("cardSection").innerHTML
						}</div></div>`,
							true,
							false,
							true,
							"Kembali",
							true,
							true,
							document.getElementById("cardMessage").innerHTML ||
								ucapanGabungan
						)
					).isCancel;
				} while (res2);

				res3 = (
					await multiPrompt(
						[],
						[],
						`<div class="child-container text-center">
					<img class="img-fluid rounded-circle" src="https://i.pinimg.com/736x/c1/78/ea/c178eae8b11823b36f4d76fc5f8a2a29.jpg">
					<div class="text-center">${
						document.querySelector(".areaFooter").innerHTML
					}</div></div>`,
						true,
						false,
						true,
						"Kembali",
						false
					)
				).isCancel;
			} while (res3);
		});
	}
} catch (e) {
	console.error(e);
}

let counterAlert = 0;

async function alert(
	message = "",
	isPopUp = true,
	isTime = false,
	timeOut = 5,
	messagesAfterTimeOut = [],
	awaitResolve = 0
) {
	counterAlert++;

	return new Promise((resolve) => {
		try {
			let modal;
			let messageElem;
			let timeOutElm;
			let okBtn;
			let intervalId;

			if (isPopUp) {
				modal = document.createElement("div");
				modal.className = "modal";
				modal.style.position = "fixed";
				modal.style.top = "0";
				modal.style.left = "0";
				modal.style.width = "100%";
				modal.style.height = "100%";
				modal.style.backgroundColor = "rgba(0,0,0,0.5)";
				modal.style.display = "flex";
				modal.style.alignItems = "center";
				modal.style.justifyContent = "center";
			} else {
				modal = document.createElement("div");
				modal.className = "notification";
				modal.style.position = "fixed";
				modal.style.top = "5%";
				modal.style.right = "2.5%";
				modal.style.padding = "10px 20px";
				modal.style.borderRadius = "5px";
				modal.style.zIndex = "1000000000";
				modal.setAttribute("data-aos", "fade-left");
			}

			const modalContent = document.createElement("div");
			modalContent.className = `modal-content d-flex align-items-center ${
				isPopUp
					? "bg-light"
					: counterAlert % 2 === 0
					? "bg-success"
					: "bg-primary"
			} p-3 ${isPopUp ? "" : "text-white"}`;
			modalContent.style.width = isPopUp ? "75%" : "100%";
			modalContent.style.height = isPopUp ? "" : "100%";
			modalContent.style.borderRadius = "5px";
			modalContent.style.boxShadow = isPopUp
				? "0 2px 10px rgba(0,0,0,0.1)"
				: "";

			messageElem = document.createElement("p");
			messageElem.innerHTML =
				(!isPopUp ? `<i class="bi bi-bell-fill m-2"></i>` : ``) +
				message;

			timeOutElm = document.createElement("p");

			okBtn = document.createElement("button");
			okBtn.className = `btn ${
				counterAlert % 2 === 0 ? "btn-primary" : "btn-warning"
			} btn-lg`;
			okBtn.textContent = "OK";
			okBtn.style.minWidth = "80px";
			okBtn.style.display = isTime ? "none" : "block";
			okBtn.style.marginTop = "10px";

			modalContent.appendChild(messageElem);

			if (isTime) {
				modalContent.appendChild(timeOutElm);
			}

			if (isPopUp) {
				const btnContainer = document.createElement("div");
				btnContainer.style.marginTop = "20px";
				btnContainer.appendChild(okBtn);
				modalContent.appendChild(btnContainer);
			}

			modal.appendChild(modalContent);
			document.body.appendChild(modal);

			okBtn.addEventListener("click", function () {
				if (intervalId) clearInterval(intervalId);
				if (document.body.contains(modal)) {
					document.body.removeChild(modal);
				}
				resolve();
			});

			if (!isPopUp) {
				intervalId = setInterval(async () => {
					timeOut--;
					console.log(timeOut);
					if (messagesAfterTimeOut.length === 0)
						timeOutElm.textContent = timeOut;
					if (messagesAfterTimeOut.length > 0) {
						messagesAfterTimeOut.forEach((mes) => {
							if (mes.timeOut >= timeOut) {
								modalContent.className =
									"modal-content d-flex align-items-center bg-warning p-3";
								messageElem.textContent = mes.message;
								timeOutElm.textContent = timeOut;
							}
						});
					}

					if (timeOut <= 0) {
						await new Promise((res) =>
							setTimeout(res, awaitResolve)
						);
						if (document.body.contains(modal)) {
							document.body.removeChild(modal);
						}
						clearInterval(intervalId);
						resolve();
					}
				}, 1000);

				setTimeout(() => {
					if (document.body.contains(modal)) {
						document.body.removeChild(modal);
					}
					resolve();
				}, timeOut * 1000);
			}
		} catch (e) {
			console.error(e);
		}
	});
}

async function multiPrompt(
	inputConfigs = [
		{
			label: "Nama:",
			type: "text",
			placeholder: "Masukkan nama Anda",
			id: "name",
			value: "",
		},
	],
	selectConfigs = [
		{
			label: "Pilih Gender:",
			options: [
				{ value: "L", label: "Laki-laki" },
				{ value: "P", label: "Perempuan" },
			],
			default: "L",
			id: "gender",
		},
	],
	innerHTMLOnTopMessage = "",
	withCancelButton = true,
	isDOM = false,
	isDisabledAll = false,
	cancelText = "",
	withNextButton = true,
	runFunc = false,
	originalText = ""
) {
	console.log(ucapanGabungan, originalText, "AAAA");
	return new Promise((resolve) => {
		const modal = document.createElement("div");
		modal.className = "modal";
		Object.assign(modal.style, {
			position: "fixed",
			top: "0",
			left: "0",
			width: "100%",
			height: "100%",
			backgroundColor: "rgba(0,0,0,0.5)",
			display: "flex",
			alignItems: "center",
			justifyContent: "center",
		});

		const modalContent = document.createElement("div");
		modalContent.className = "modal-content";
		Object.assign(modalContent.style, {
			width: "75%",
			background: "#fff",
			padding: "20px",
			borderRadius: "5px",
			boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
		});

		const okBtn = document.createElement("button");
		const okBtnClassName = "btn btn-success btn-lg";
		const okBtnTextContent = "Cari";

		okBtn.className = isDOM
			? okBtnClassName.replace("success", "warning")
			: okBtnClassName;
		okBtn.textContent = isDisabledAll
			? "Lanjut"
			: isDOM
			? okBtnTextContent
			: "Ganti pesan";
		okBtn.style.marginRight = "10px";
		okBtn.style.display = withNextButton ? "" : "none";

		const cancelBtn = document.createElement("button");
		cancelBtn.className =
			"btn btn-danger btn-lg" + (withCancelButton ? "" : " d-none");
		cancelBtn.textContent = cancelText || "Batal";

		const innerHTMLOnTopMessageContent = document.createElement("div");
		innerHTMLOnTopMessageContent.innerHTML = innerHTMLOnTopMessage;

		const form = document.createElement("form");

		const inputElements = {};
		const selectElements = {};

		function changeOKBTN(isChange) {
			okBtn.textContent = isDisabledAll
				? "Lanjut"
				: isDOM
				? okBtnTextContent
				: isChange === false
				? "Ganti pesan"
				: "Ganti data";
			okBtn.className = isDOM
				? okBtnClassName.replace("success", "warning")
				: isChange === false
				? okBtnClassName
				: okBtnClassName.replace("success", "primary");
		}

		inputConfigs.forEach((config) => {
			const labelElem = document.createElement("label");
			labelElem.textContent = config.label;
			Object.assign(labelElem.style, {
				display: "block",
				marginTop: "10px",
			});
			form.appendChild(labelElem);

			const input = document.createElement("input");
			Object.assign(input, {
				type: config.type || "text",
				placeholder: config.placeholder || "",
				required: true,
				id: config.id,
			});
			Object.assign(input.style, {
				width: "100%",
				marginTop: "5px",
			});
			input.className = "form-control form-control-lg";
			input.value = config.value;
			inputElements[config.id] = input;
			form.appendChild(input);

			if (isDisabledAll) input.disabled = true;

			input.addEventListener("change", () => {
				changeOKBTN(inputElements[config.id].value !== config.value);
			});
		});

		selectConfigs.forEach((config) => {
			const labelElem = document.createElement("label");
			labelElem.textContent = config.label;
			Object.assign(labelElem.style, {
				display: "block",
				marginTop: "10px",
			});
			form.appendChild(labelElem);

			const selectElem = document.createElement("select");
			Object.assign(selectElem, {
				required: true,
				id: config.id,
			});
			Object.assign(selectElem.style, {
				width: "100%",
				marginTop: "5px",
			});
			selectElem.className = "form-select form-select-lg";

			config.options.forEach((opt) => {
				const optionElem = document.createElement("option");
				optionElem.value = opt.value;
				optionElem.textContent = opt.label;
				if (config.default === opt.value) optionElem.selected = true;
				selectElem.appendChild(optionElem);
			});

			selectElements[config.id] = selectElem;
			form.appendChild(selectElem);

			if (isDisabledAll) selectElem.disabled = true;

			selectElem.addEventListener("change", () => {
				changeOKBTN(selectElements[config.id].value !== config.default);
			});
		});

		const btnContainer = document.createElement("div");
		Object.assign(btnContainer.style, {
			marginTop: "20px",
			textAlign: "right",
		});

		btnContainer.appendChild(okBtn);
		btnContainer.appendChild(cancelBtn);
		form.appendChild(btnContainer);

		modalContent.appendChild(innerHTMLOnTopMessageContent);
		modalContent.appendChild(form);
		modal.appendChild(modalContent);
		document.body.appendChild(modal);

		console.log(runFunc);

		function initTypewriter() {
			async function typeWriterHTML(element, html, speed = 50) {
				let currentLength = renderedUcapanGabungan.length;
				for (let i = currentLength; i < html.length; i++) {
					renderedUcapanGabungan += html.charAt(i);
					element.innerHTML = renderedUcapanGabungan;
                    element.scrollIntoView({ behavior: "smooth", block: "end" });
                    await new Promise((resolve) => setTimeout(resolve, speed));

					okBtn.disabled = true;
					cancelBtn.disabled = true;
				}

				okBtn.disabled = false;
				cancelBtn.disabled = false;
			}

			const cardMessagess = document.querySelectorAll(".card-body");
			cardMessagess.forEach((cardMessages, index) => {
				if (index !== 0) {
					typeWriterHTML(
						cardMessages,
						marked.parse(originalText),
						25
					);
				}
			});
		}

		if (document.readyState === "loading") {
			document.addEventListener("DOMContentLoaded", initTypewriter);
		} else {
			initTypewriter();
		}

		form.addEventListener("submit", function (e) {
			e.preventDefault();

			let isValid = true;
			const inputValues = {};
			const selectValues = {};

			Object.entries(inputElements).forEach(([id, elem]) => {
				const value = elem.value.trim();
				inputValues[id] = value;
				if (value.length === 0) {
					elem.style.border = "1px solid red";
					isValid = false;
				} else {
					elem.style.border = "";
				}
			});

			Object.entries(selectElements).forEach(([id, elem]) => {
				const value = elem.value;
				selectValues[id] = value;
				if (!value) {
					elem.style.border = "1px solid red";
					isValid = false;
				} else {
					elem.style.border = "";
				}
			});

			if (isValid) {
				document.body.removeChild(modal);
				console.log(inputValues, selectValues);
				resolve({ inputValues, selectValues, isCancel: false });
			}
		});

		okBtn.addEventListener("click", () => {
			form.dispatchEvent(new Event("submit", { cancelable: true }));
		});

		cancelBtn.addEventListener("click", () => {
			document.body.removeChild(modal);
			resolve({
				inputValues: null,
				selectValues: null,
				isCancel: true,
			});
		});
	});
}

let isCustomMessage = false;

try {
	document
		.getElementById("btnGU")
		.addEventListener("click", async function () {
			const fromName = document.getElementById("fromName").value.trim();
			const targetName = document
				.getElementById("targetName")
				.value.trim();
			const option = parseInt(
				document.getElementById("relationshipOption").value.trim()
			);
			const message = document.getElementById("message").value.trim();

			const generatedUrl = (
				await generateUrl([
					fromName,
					targetName,
					option,
					isCustomMessage ? message : "",
				])
			)[0];

			document.getElementById(
				"generatedUrl"
			).innerHTML = `<div class='alert alert-success'>
					 <strong>URL Generated:</strong> <a href="${generatedUrl}" target="_blank">${generatedUrl}</a>
				 </div>`;
		});

	document
		.getElementById("isCustomMessage")
		.addEventListener("change", function () {
			const inputMessage = document.getElementById("inputMessage");
			if (this.checked) {
				inputMessage.setAttribute("class", "mt-3");
				isCustomMessage = true;
			} else {
				inputMessage.setAttribute("class", "mt-3 d-none");
				isCustomMessage = false;
			}
		});
} catch (error) {}

async function generateUrl([fromName, targetName, option, message = ""]) {
	let i = 0;
	let generatedUrl = "";

	while (true) {
		let queryUrl = "";

		if (!fromName || !targetName) {
			alert("Mohon isi semua field sebelum generate URL", false);
			return;
		}

		const fts = [fromName, targetName];

		fts.forEach((ft, indexs) => {
			let finalFN = "";

			let fNS = ft.split(" ");
			let fNSJ = fNS.join("");

			fNS.forEach((word, index) => {
				let wl = Math.round(word.length / (i + 2));
				finalFN +=
					(indexs === 0 && index === 0) ||
					(indexs === 1 && index === fNS.length - 1)
						? (word[i] || "x") +
						  (fNSJ[wl] || "y") +
						  (word[word.length - (i + 1)] || "z")
						: "";
			});

			queryUrl += finalFN + (indexs === 0 ? "X" : "Y");
		});

		const char = "abcdefghijklmnopqrstuvwxyz";

		queryUrl += char[option + i] || "Z";

		let data = await getURLSDATA(queryUrl);

		if (!data) {
			data = {
				from: fromName,
				target: targetName,
				option: option.toString(),
				message: message,
			};
		}

		console.log(queryUrl, data);

		let isSuccess = false;

		[isSuccess, urlsdatasDB] = await setURLSDATAData(queryUrl, data);

		i++;

		if (isSuccess) {
			generatedUrl = `${window.location.origin}?i=` + queryUrl;
			break;
		}
	}

	return [generatedUrl, urlsdatasDB];
}

try {
	function addStars(count) {
		for (let i = 0; i < count; i++) {
			const star = document.createElement("div");
			star.className = "star";
			// Atur posisi acak
			star.style.top = Math.random() * 100 + "%";
			star.style.left = Math.random() * 100 + "%";
			// Atur durasi animasi antara 2s hingga 5s
			star.style.animationDuration = 2 + Math.random() * 3 + "s";
			// Atur delay animasi antara 0s hingga 3s
			star.style.animationDelay = Math.random() * 3 + "s";
			document.body.appendChild(star);
		}
	}
	addStars(100);
} catch {}