@page "/users/create"

@using LucideBlazor
@using ShadcnBlazor.Buttons
@using ShadcnBlazor.Labels
@using ShadcnBlazor.Cards
@using ShadcnBlazor.Extras.FormHandlers
@using ShadcnBlazor.Extras.Toasts
@using ShadcnBlazor.Inputs
@using Moonlight.Shared.Http.Requests.Users

@inject HttpClient HttpClient
@inject NavigationManager Navigation
@inject ToastService ToastService

<div class="flex flex-row justify-between">
    <div class="flex flex-col">
        <h1 class="text-xl font-semibold">Create user</h1>
        <div class="text-muted-foreground">
            Create a new user
        </div>
    </div>
    <div class="flex flex-row gap-x-1.5">
        <Button Variant="ButtonVariant.Secondary">
            <Slot>
                <a href="/users" @attributes="context">
                    <ChevronLeftIcon/>
                    Back
                </a>
            </Slot>
        </Button>
        <Button @onclick="() => Form.SubmitAsync()">
            <CheckIcon/>
            Continue
        </Button>
    </div>
</div>

<div class="mt-8">
    <Card>
        <CardContent>
            <FormHandler @ref="Form" OnValidSubmit="OnSubmitAsync" Model="Request">
                <div class="flex flex-col gap-6">

                    <FormValidationSummary/>

                    <div class="grid gap-2">
                        <Label for="email">Email</Label>
                        <InputField
                            @bind-Value="Request.Email"
                            id="email"
                            Type="email"
                            placeholder="m@example.com"/>
                    </div>

                    <div class="grid gap-2">
                        <Label for="email">Username</Label>
                        <InputField
                            @bind-Value="Request.Username"
                            id="username"
                            Type="text"
                            placeholder="example_user"/>
                    </div>
                </div>
            </FormHandler>
        </CardContent>
    </Card>
</div>

@code
{
    private CreateUserRequest Request = new();

    private FormHandler Form;

    private async Task OnSubmitAsync()
    {
        await HttpClient.PostAsJsonAsync(
            "/api/users",
            Request,
            Constants.SerializerOptions
        );

        await ToastService.SuccessAsync(
            "User creation",
            $"Successfully created user {Request.Username}"
        );

        Navigation.NavigateTo("/users");
    }
}