import { Component, createSignal } from "solid-js";
import { GM_getValue, GM_setValue } from "vite-plugin-monkey/dist/client";

export function OTISSettingsPage() {
	console.debug("settings page fired")

	const settingsElement = document.getElementById('settings');
	const ot_settings = settingsElement.getElementsByTagName('hr').item(0);

	const OTISSettings : Component = () => {

		const [SauceKey,setSauceKey] = createSignal(GM_getValue('DunkOatmeal_SNKey',''));

		return <>
			<hr />
			<h1>Old Twitter Image Search Settings</h1>
			<br/>
			<span> Userscript made by SoberOatmeal </span >
			<br />
			<br />
			<span> SauceNAO API Key </span>
			<br />
			<span>
				Can be acquired by signing up to SauceNAO then go to  <b>Account > api </b> and then grab the generated api key.
			</span>
			<div class={"setting"}>
				<input
					type={"text"}
					style={{"height":"25px", "width":"550px"}}
					value={SauceKey()}
					oninput={(i)  => GM_setValue("DunkOatmeal_SNKey",i.target.value) }
					placeholder={"Put SauceNAO API key here"} />
			</div>
			<br />
		</>
	}
	ot_settings.before(...<OTISSettings />);
}