<script lang="ts">
	import Button from "$lib/components/ui/button/button.svelte";
	import LabelWrapper from "$lib/components/atoms/label-wrapper.svelte";
	import Input from "$lib/components/ui/input/input.svelte";
	import type { UserModel } from "@pkg/logic/domains/user/data/entities";
	import { userVM } from "./user.vm.svelte";
	import Checkbox from "$lib/components/ui/checkbox/checkbox.svelte";

	let { user }: { user?: UserModel } = $props();
</script>

<form
	onsubmit={(ev) => {
		userVM.onUserInfoUpdateFormSubmit(ev);
	}}
	action="#"
	class="flex flex-col gap-4"
>
	<LabelWrapper label="Username">
		<Input
			disabled
			name="username"
			value={user?.username}
			required
			min={2}
			max={64}
		/>
	</LabelWrapper>

	<LabelWrapper label="Email">
		<Input
			name="email"
			type="email"
			value={user?.email}
			required
			min={6}
			max={128}
		/>
	</LabelWrapper>

	<div class="flex items-center gap-2">
		<Checkbox name="banned" checked={user?.banned} />
		<label for="banned">Disable user</label>
	</div>

	<Button disabled={userVM.savingUsersInfo} type="submit">
		{userVM.savingUsersInfo ? "Saving..." : "Save changes"}
	</Button>
</form>
