package auth

import (
	"github.com/labstack/echo/v4"
	"github.com/onsonr/sonr/pkg/common/middleware/session"
	"github.com/onsonr/sonr/pkg/webapp/components/ui"
)

// RegisterModal returns the Register Modal.
templ RegisterModal() {
	@ui.OpenModal(session.GetData(ctx).Id, "Sign up") {
		<div class="flex flex-col-reverse sm:flex-row sm:justify-between sm:space-x-2">
			<button @click="modalOpen=false" type="button" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors border rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-100 focus:ring-offset-2">Cancel</button>
			<button @click="modalOpen=false" type="button" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 bg-neutral-950 hover:bg-neutral-900">Next</button>
		</div>
	}
}

templ RegisterCredentialForm() {
	<div class="border rounded-lg shadow-sm bg-card text-zinc-900">
		<div class="flex flex-col space-y-1.5 p-6"></div>
		<div class="p-6 pt-0 space-y-2">
			<div class="space-y-1"><label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">Name</label><input type="text" id="name" placeholder="Adam Wathan" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/></div>
			<div class="space-y-1"><label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="username">Handle</label><input type="text" id="handle" placeholder="angelo.snr" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/></div>
		</div>
	</div>
}

templ NavigatorCredentialsCreate(c echo.Context) {
	<script>
	function createCredential() {
		navigator.credentials.create({
			publicKey: {
				rp: {
					name: "Sonr",
				},
				user: {
					id: new Uint8Array(0),
					name: "Sonr",
					displayName: "Sonr",
				},
				challenge: new Uint8Array(0),
				pubKeyCredParams: [{
					type: "public-key",
					alg: -7,
				}],
				timeout: 60000,
				excludeCredentials: [],
				authenticatorSelection: {
					requireResidentKey: false,
					userVerification: "discouraged",
				},
			},
		})
			.then((assertion) => {
				console.log("Assertion:", assertion);
			})
			.catch((error) => {
				console.error("Error:", error);
			});
		}
	</script>
}