import { useStorage } from "@tensamin/storage/context";
import { Button, Input, Label } from "@tensamin/ui";
import { useEffect, useState } from "react";

export default function Page() {
  const { save, load } = useStorage();
  const [draftOmegaUrl, setDraftOmegaUrl] = useState("");
  const [currentOmegaUrl, setCurrentOmegaUrl] = useState("");
  const [draftForcedOmikronUrl, setDraftForcedOmikronUrl] = useState("");
  const [currentForcedOmikronUrl, setCurrentForcedOmikronUrl] = useState("");
  const [draftForcedOmikronPublicKey, setDraftForcedOmikronPublicKey] = useState("");
  const [currentForcedOmikronPublicKey, setCurrentForcedOmikronPublicKey] = useState("");

  useEffect(() => {
    load("omega_url").then((value) => { setDraftOmegaUrl(value); setCurrentOmegaUrl(value); });
    load("forced_omikron_url").then((value) => { setDraftForcedOmikronUrl(value || ""); setCurrentForcedOmikronUrl(value || ""); });
    load("forced_omikron_public_key").then((value) => { setDraftForcedOmikronPublicKey(value || ""); setCurrentForcedOmikronPublicKey(value || ""); });
  }, [load]);

  return <div className="flex flex-col gap-8">
    <p className="text-destructive">It's best not to touch these settings! They can be exploited to gain access to your account!</p>
    <div className="flex flex-col gap-2"><Label>Omega Url</Label><div className="flex gap-1"><Input value={draftOmegaUrl} onChange={(event) => setDraftOmegaUrl(event.target.value)} /><Button disabled={currentOmegaUrl === draftOmegaUrl} onClick={() => save("omega_url", draftOmegaUrl).then(() => setCurrentOmegaUrl(draftOmegaUrl))}>Save</Button></div></div>
    <div className="flex flex-col gap-2"><Label>Forced Omikron</Label><div className="flex gap-1"><Input placeholder="URL..." value={draftForcedOmikronUrl} onChange={(event) => setDraftForcedOmikronUrl(event.target.value)} /><Input placeholder="Public Key..." value={draftForcedOmikronPublicKey} onChange={(event) => setDraftForcedOmikronPublicKey(event.target.value)} /><Button disabled={currentForcedOmikronUrl === draftForcedOmikronUrl && currentForcedOmikronPublicKey === draftForcedOmikronPublicKey} onClick={() => { save("forced_omikron_url", draftForcedOmikronUrl).then(() => setCurrentForcedOmikronUrl(draftForcedOmikronUrl)); save("forced_omikron_public_key", draftForcedOmikronPublicKey).then(() => setCurrentForcedOmikronPublicKey(draftForcedOmikronPublicKey)); }}>Save</Button></div></div>
  </div>;
}