@page "/admin/system/themes/{Id:int}"

@using Microsoft.AspNetCore.Authorization
@using Moonlight.Shared
@using LucideBlazor
@using Moonlight.Frontend.Mappers
@using Moonlight.Shared.Http.Requests.Themes
@using Moonlight.Shared.Http.Responses.Themes
@using ShadcnBlazor.Buttons
@using ShadcnBlazor.Labels
@using ShadcnBlazor.Cards
@using ShadcnBlazor.Extras.Common
@using ShadcnBlazor.Extras.Editors
@using ShadcnBlazor.Extras.FormHandlers
@using ShadcnBlazor.Extras.Toasts
@using ShadcnBlazor.Inputs
@using ShadcnBlazor.Switches

@attribute [Authorize(Policy = Permissions.Themes.Edit)]

@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">Update theme</h1>
        <div class="text-muted-foreground">
            Update the theme
        </div>
    </div>
    <div class="flex flex-row gap-x-1.5">
        <Button Variant="ButtonVariant.Secondary">
            <Slot>
                <a href="/admin/system?tab=themes" @attributes="context">
                    <ChevronLeftIcon/>
                    Back
                </a>
            </Slot>
        </Button>
        <Button @onclick="SubmitAsync">
            <CheckIcon/>
            Continue
        </Button>
    </div>
</div>

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

                        <FormValidationSummary/>

                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
                            <div class="col-span-1 grid gap-2">
                                <Label for="themeName">Name</Label>
                                <InputField
                                    @bind-Value="Request.Name"
                                    id="themeName"
                                    placeholder="My cool theme"/>
                            </div>

                            <div class="col-span-1 grid gap-2">
                                <Label for="themeVersion">Version</Label>
                                <InputField
                                    @bind-Value="Request.Version"
                                    id="themeVersion"
                                    Type="text"
                                    placeholder="1.0.0"/>
                            </div>

                            <div class="col-span-1 grid gap-2">
                                <Label for="themeAuthor">Author</Label>
                                <InputField
                                    @bind-Value="Request.Author"
                                    id="themeAuthor"
                                    Type="text"
                                    placeholder="Your name"/>
                            </div>

                            <div class="col-span-1 grid gap-2">
                                <Label for="themeAuthor">Is Enabled</Label>
                                <Switch @bind-Value="Request.IsEnabled" />
                            </div>
                        </div>

                        <style>
                            .cm-editor {
                                max-height: 400px;
                                min-height: 400px;
                            }
                        </style>

                        <div class="grid gap-2">
                            <Label for="themeAuthor">CSS Content</Label>
                            <Editor @ref="Editor" Language="EditorLanguage.Css" InitialValue="@Request.CssContent"/>
                        </div>
                    </div>
                </FormHandler>
            </LazyLoader>
        </CardContent>
    </Card>
</div>

@code
{
    [Parameter] public int Id { get; set; }
    
    private UpdateThemeDto Request;
    private ThemeDto Theme;
    
    private FormHandler Form;
    private Editor Editor;
    
    private async Task LoadAsync(LazyLoader _)
    {
        var theme = await HttpClient.GetFromJsonAsync<ThemeDto>($"api/admin/themes/{Id}");

        Theme = theme!;
        Request = ThemeMapper.ToUpdate(Theme);
    }

    private async Task SubmitAsync()
    {
        Request.CssContent = await Editor.GetValueAsync();
        await Form.SubmitAsync();
    }

    private async Task OnSubmitAsync()
    {
        await HttpClient.PatchAsJsonAsync(
            $"/api/admin/themes/{Theme.Id}",
            Request,
            Constants.SerializerOptions
        );

        await ToastService.SuccessAsync(
            "Theme update",
            $"Successfully updated theme {Request.Name}"
        );

        Navigation.NavigateTo("/admin/system?tab=themes");
    }
}