@using Moonlight.Frontend.Mappers
@using Moonlight.Frontend.UI.Admin.Components
@using Moonlight.Shared.Http.Requests.Roles
@using Moonlight.Shared.Http.Responses.Admin
@using ShadcnBlazor.Buttons
@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 @Role.Name
    </DialogTitle>
    <DialogDescription>
        Update name, description and the permissions the role should grant to its members
    </DialogDescription>
</DialogHeader>

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

        <FormValidationSummary/>

        <div class="grid gap-2">
            <Label for="roleName">Name</Label>
            <InputField
                @bind-Value="Request.Name"
                id="roleName"
                placeholder="My fancy role"/>
        </div>

        <div class="grid gap-2">
            <Label for="roleDescription">Description</Label>
            <textarea
                @bind="Request.Description"
                id="roleDescription"
                maxlength="100"
                class="border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
                placeholder="Describe what the role should be used for">
                
            </textarea>
        </div>
        
        <div class="grid gap-2">
            <Label>Permissions</Label>
            <PermissionSelector Permissions="Permissions" />
        </div>
    </div>
</FormHandler>

<DialogFooter ClassName="justify-end gap-x-1">
    <WButtom OnClick="SubmitAsync">Save changes</WButtom>
</DialogFooter>

@code
{
    [Parameter] public Func<UpdateRoleDto, Task> OnSubmit { get; set; }
    [Parameter] public RoleDto Role { get; set; }
    
    private UpdateRoleDto Request;
    private List<string> Permissions;
    private FormHandler FormHandler;

    protected override void OnInitialized()
    {
        Request = RoleMapper.ToUpdate(Role);
        Permissions = Role.Permissions.ToList();
    }

    private async Task SubmitAsync()
    {
        Request.Permissions = Permissions.ToArray();
        await FormHandler.SubmitAsync();
    }

    private async Task OnSubmitAsync()
    {
        await OnSubmit.Invoke(Request);
        await CloseAsync();
    }
}