@using Moonlight.Frontend.Mappers
@using Moonlight.Shared.Http.Requests.Users
@using Moonlight.Shared.Http.Responses.Users
@using ShadcnBlazor.Dialogs
@using ShadcnBlazor.Extras.Common
@using ShadcnBlazor.Extras.FormHandlers
@using ShadcnBlazor.Inputs
@using ShadcnBlazor.Labels

@inherits ShadcnBlazor.Extras.Dialogs.DialogBase

<DialogHeader>
    <DialogTitle>
        Update @User.Username
    </DialogTitle>
    <DialogDescription>
        Update the user by giving it a username and an email address
    </DialogDescription>
</DialogHeader>

<FormHandler @ref="FormHandler" Model="Request" OnValidSubmit="SubmitAsync">
    <div class="flex flex-col gap-6">

        <FormValidationSummary/>

        <div class="grid gap-2">
            <Label for="username">Username</Label>
            <InputField
                @bind-Value="Request.Username"
                id="username"
                placeholder="Name of the user"/>
        </div>

        <div class="grid gap-2">
            <Label for="emailAddress">Email Address</Label>
            <InputField
                @bind-Value="Request.Email"
                id="emailAddress"
                Type="email"
                placeholder="email@of.user"/>
        </div>
    </div>
</FormHandler>

<DialogFooter ClassName="justify-end gap-x-1">
    <WButtom OnClick="_ => FormHandler.SubmitAsync()">Save changes</WButtom>
</DialogFooter>

@code
{
    [Parameter] public Func<UpdateUserDto, Task> OnSubmit { get; set; }
    [Parameter] public UserDto User { get; set; }
    
    private UpdateUserDto Request;
    private FormHandler FormHandler;

    protected override void OnInitialized()
    {
        Request = UserMapper.ToUpdate(User);
    }

    private async Task SubmitAsync()
    {
        await OnSubmit.Invoke(Request);

        await CloseAsync();
    }
}