import { defineComponent, h, ref } from "vue";
import { cx, iconNode } from "../utils.js";
import GnInput from "./GnInput.js";
import GnButton from "./GnButton.js";
import GnCheckbox from "./GnCheckbox.js";
import GnAlert from "./GnAlert.js";

export default defineComponent({
	name: "GnLoginCard",
	props: {
		title: { type: String, default: "Sign in" },
		logoSrc: { type: String, default: "" },
		logoIcon: { type: String, default: "" },
		usernameLabel: { type: String, default: "Username" },
		usernameIcon: { type: String, default: "ph-user" },
		passwordLabel: { type: String, default: "Password" },
		passwordIcon: { type: String, default: "ph-lock-key" },
		rememberMe: { type: Boolean, default: false },
		rememberLabel: { type: String, default: "Remember me" },
		submitText: { type: String, default: "Sign in" },
		submitVariant: { type: String, default: "primary" },
		loading: { type: Boolean, default: false },
		error: { type: String, default: "" },
		forgotHref: { type: String, default: "" },
		forgotText: { type: String, default: "Forgot password?" },
		signupHref: { type: String, default: "" },
		signupText: { type: String, default: "Create account" }
	},
	emits: ["submit"],
	setup(props, { emit }) {
		const username = ref("");
		const password = ref("");
		const remember = ref(false);

		const onSubmit = (event) => {
			event.preventDefault();
			emit("submit", {
				username: username.value,
				password: password.value,
				remember: remember.value
			});
		};

		return () => h("article", { class: "card login-card" }, [
			(props.title || props.logoSrc || props.logoIcon) && h("header", { class: "card-title login-card-header" }, [
				props.logoSrc && h("img", { src: props.logoSrc, alt: "", class: "login-card-logo" }),
				props.logoIcon && !props.logoSrc && iconNode(props.logoIcon, "login-card-logo-icon"),
				props.title && h("span", { class: "login-card-title" }, props.title)
			]),
			h("div", { class: "card-content" }, [
				props.error && h(GnAlert, { variant: "danger", class: "login-card-error" }, () => props.error),
				h("form", { class: "login-card-form", onSubmit }, [
					h(GnInput, {
						modelValue: username.value,
						"onUpdate:modelValue": (v) => { username.value = v; },
						label: props.usernameLabel,
						icon: props.usernameIcon,
						type: "text",
						autocomplete: "username"
					}),
					h(GnInput, {
						modelValue: password.value,
						"onUpdate:modelValue": (v) => { password.value = v; },
						label: props.passwordLabel,
						icon: props.passwordIcon,
						type: "password",
						autocomplete: "current-password"
					}),
					props.rememberMe && h(GnCheckbox, {
						modelValue: remember.value,
						"onUpdate:modelValue": (v) => { remember.value = v; }
					}, () => props.rememberLabel),
					h(GnButton, {
						variant: props.submitVariant,
						loading: props.loading,
						disabled: props.loading,
						type: "submit",
						class: "login-card-submit"
					}, () => props.submitText),
					(props.forgotHref || props.signupHref) && h("div", { class: "login-card-links" }, [
						props.forgotHref && h("a", { href: props.forgotHref, class: "login-card-link" }, props.forgotText),
						props.signupHref && h("a", { href: props.signupHref, class: "login-card-link" }, props.signupText)
					])
				])
			])
		]);
	}
});