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

@using Microsoft.AspNetCore.Authorization
@using Moonlight.Shared
@using LucideBlazor
@using Moonlight.Frontend.Helpers
@using Moonlight.Frontend.Mappers
@using Moonlight.Frontend.Services
@using Moonlight.Shared.Http
@using Moonlight.Shared.Http.Requests.Admin.Themes
@using Moonlight.Shared.Http.Responses.Admin.Themes
@using ShadcnBlazor.Buttons
@using ShadcnBlazor.Cards
@using ShadcnBlazor.Extras.Common
@using ShadcnBlazor.Extras.Editors
@using ShadcnBlazor.Extras.Forms
@using ShadcnBlazor.Extras.Toasts
@using ShadcnBlazor.Fields
@using ShadcnBlazor.Inputs
@using ShadcnBlazor.Switches

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

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

<LazyLoader Load="LoadAsync">
    <EnhancedEditForm Model="Request" OnValidSubmit="OnSubmitAsync" Context="editFormContext">
        <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>
                <SubmitButton>
                    <CheckIcon/>
                    Continue
                </SubmitButton>
            </div>
        </div>

        <div class="mt-8">
            <Card>
                <CardContent>
                    <FieldGroup>
                        <FormValidationSummary/>
                        <DataAnnotationsValidator/>

                        <FieldSet ClassName="grid grid-cols-1 lg:grid-cols-2">
                            <Field>
                                <FieldLabel for="themeName">Name</FieldLabel>
                                <TextInputField
                                    @bind-Value="Request.Name"
                                    id="themeName"
                                    placeholder="My cool theme"/>
                            </Field>

                            <Field>
                                <FieldLabel for="themeVersion">Version</FieldLabel>
                                <TextInputField
                                    @bind-Value="Request.Version"
                                    id="themeVersion"
                                    Type="text"
                                    placeholder="1.0.0"/>
                            </Field>

                            <Field>
                                <FieldLabel for="themeAuthor">Author</FieldLabel>
                                <TextInputField
                                    @bind-Value="Request.Author"
                                    id="themeAuthor"
                                    Type="text"
                                    placeholder="Your name"/>
                            </Field>

                            <Field>
                                <FieldLabel for="themeAuthor">Is Enabled</FieldLabel>
                                <FieldContent>
                                    <Switch @bind-Value="Request.IsEnabled"/>
                                </FieldContent>
                            </Field>
                        </FieldSet>
                        <Field>
                            <style>
                                .cm-editor {
                                    max-height: 400px;
                                    min-height: 400px;
                                }
                            </style>

                            <FieldLabel for="themeAuthor">CSS Content</FieldLabel>
                            <FieldContent>
                                <Editor @ref="Editor" Language="EditorLanguage.Css"
                                        InitialValue="@Request.CssContent"/>
                            </FieldContent>
                        </Field>
                    </FieldGroup>
                </CardContent>
            </Card>
        </div>
    </EnhancedEditForm>
</LazyLoader>

@code
{
    [Parameter] public int Id { get; set; }

    private UpdateThemeDto Request;
    private ThemeDto Theme;

    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<bool> OnSubmitAsync(EditContext editContext, ValidationMessageStore validationMessageStore)
    {
        Request.CssContent = await Editor.GetValueAsync();

        var response = await HttpClient.PatchAsJsonAsync(
            $"/api/admin/themes/{Theme.Id}",
            Request,
            SerializationContext.Default.Options
        );
        
        if (!response.IsSuccessStatusCode)
        {
            await ProblemDetailsHelper.HandleProblemDetailsAsync(response, Request, validationMessageStore);
            return false;
        }

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

        await FrontendService.ReloadAsync();

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

        return true;
    }
}