@page "/docs/customization"
@page "/docs/customization/theme"
@layout DocsContentLayout
@inject NavigationManager NavigationManager

<DocsSection Title="Overview">
    <p>
        A theme is a collection of design elements, including colors,
        typography, and component styles, that defines the visual appearance of a UI.
        It provides a consistent look and feel across all components, allowing developers to
        easily customize and align the UI with the app's brand identity or design preferences.
        By applying a theme, you can ensure uniformity in the presentation.
    </p>
</DocsSection>

<DocsSection Title="Theming in LumexUI">
    <p>
        In LumexUI, theming is designed with Blazor developers in mind,
        offering a flexible and powerful approach to UI customization.
    </p>
    <p>
        The theming system consists of two key parts: a <strong>C# object</strong> and a <strong>Tailwind CSS configuration</strong>,
        which together provide full control over your UI's design.
    </p>
    <ol>
        <li>
            <h4>C# Object for Customization</h4>
            <p class="mb-[0.25em]">
                LumexUI exports the <Code>@nameof( LumexTheme )</Code> that allows you to
                configure colors, fonts, layout settings, and more.
                This approach ensures that Blazor developers can define their
                theme programmatically, staying within the familiar environment.
                By using this model, you can easily specify global design variables,
                making your application highly customizable while keeping
                your theming logic within your Blazor code.
            </p>
        </li>
        <li>
            <h4>Extensible Tailwind CSS Configuration</h4>
            <p class="mb-[0.25em]">
                In addition to the C# object, LumexUI leverages Tailwind CSS for styling.
                The Tailwind CSS configuration is fully extensible,
                allowing you to build upon the base configurations set by the library.
                Developers can extend the default Tailwind setup to suit their specific needs,
                adding or modifying utility classes for more granular control over the design.
            </p>
            <LumexLink Href="https://tailwindcss.com/"
                       External="@true">
                Learn More
                <LumexIcon Icon="@Icons.Rounded.OpenInNew"
                           Size="@new("16")"
                           Class="mx-1 text-orange-400" />
            </LumexLink>
        </li>
        <li>
            <h4>Custom Tailwind CSS Plugin</h4>
            <p class="mb-[0.25em]">
                To ensure seamless integration between the <Code>@nameof( LumexTheme )</Code>
                configurations and Tailwind CSS, LumexUI exports a custom Tailwind plugin.
                This plugin takes the configurations defined in C# and injects them
                into the Tailwind config, automatically extending it with your custom styles and settings.
                This means that any C# theme adjustments you make will be reflected in your Tailwind styles,
                creating a smooth and cohesive theming experience for Blazor applications.
            </p>
            <LumexLink Href="https://tailwindcss.com/docs/plugins"
                       External="@true">
                Learn More
                <LumexIcon Icon="@Icons.Rounded.OpenInNew"
                           Size="@new("16")"
                           Class="mx-1 text-orange-400" />
            </LumexLink>
        </li>
    </ol>
</DocsSection>

<DocsSection Title="Setup">
    <p>
        The first step to using LumexUI's theming capabilities is adding
        the <Code>@nameof( LumexThemeProvider )</Code> component to your <Code>MainLayout.razor</Code> file.
    </p>
    <CodeSnippet Code="@(new CodeBlock(name: "MainLayout.razor", snippet: "installationThemeProvider"))" />

    <Callout Variant="@CalloutVariant.Warning">
        The following section assumes that you have already completed a basic setup of Tailwind CSS.
        If you haven't, please refer to the
        <LumexLink Href="https://tailwindcss.com/docs/installation"
                   External="@true"
                   Class="bordered-link">
            official documentation
            <LumexIcon Icon="@Icons.Rounded.OpenInNew"
                       Size="@new("16")"
                       Class="mx-1" />
        </LumexLink>
        to complete the setup before proceeding.
    </Callout>

    <p>
        The last step is adding the LumexUI plugin to your <Code>tailwind.config.js</Code> file.
    </p>
    <CodeSnippet Code="@(new CodeBlock(name: "tailwind.config.js", snippet: "installationConfig"))" />
</DocsSection>

<DocsSection Title="Usage">
    <p>
        After setup, the default theme will be automatically utilized.
        However, if you would like to customize it, you can either override the defaults or create a completely new one.
    </p>
    <CodeSnippet Code="@(new CodeBlock(name: "MyTheme.cs", snippet: "themeUsageCreate"))" />

    <p>Then, pass it as the <Code>Theme</Code> parameter into the <Code>LumexThemeProvider</Code>.</p>
    <CodeSnippet Code="@(new CodeBlock(name: "MainLayout.razor", snippet: "themeUsageCustom"))" />
</DocsSection>

<DocsSection Title="Types">
    <DocsSection Title="LumexTheme">
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "themeTypesLumexTheme"))" />
    </DocsSection>

    <DocsSection Title="ThemeConfig">
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "themeTypesThemeConfig"))" />
    </DocsSection>

    <DocsSection Title="LayoutConfig">
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "themeTypesLayoutConfig"))" />
    </DocsSection>

    <DocsSection Title="ThemeColors">
        <CodeSnippet Code="@(new CodeBlock(name: null, snippet: "themeTypesThemeColors"))" />
    </DocsSection>
</DocsSection>

@code {
    [CascadingParameter] private DocsContentLayout Layout { get; set; } = default!;

    private readonly Heading[] _headings = new Heading[]
    {
        new("Overview"),
        new("Theming in LumexUI"),
        new("Setup"),
        new("Usage"),
        new("Types", [
            new("LumexTheme"),
            new("ThemeConfig"),
            new("LayoutConfig"),
            new("ThemeColors")
        ])
    };

    protected override void OnInitialized()
    {
        if( !NavigationManager!.Uri.Contains( "/docs/customization/theme" ) )
        {
            NavigationManager.NavigateTo( "/docs/customization/theme" );
        }

        Layout.Initialize(
            title: "Theme",
            category: "Customization",
            description: "Theming allows customizing the components' look and feel with global styles.",
            _headings
        );
    }
}
