@page "/theme-service/{version?}"
@inject NavigationManager NavigationManager
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    ThemeService
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The <code>ThemeService</code> allows you to change the theme of your application at runtime. It provides a set of methods to change the theme, get the current theme, and listen to theme changes.
</RadzenText>
<RadzenAlert AlertStyle="AlertStyle.Base" Variant="Variant.Flat" AllowClose="false" class="rz-mb-6">
The <strong>ThemeService</strong> is registered by the <strong>AddRadzenComponents()</strong> method and requires <strong>RadzenTheme</strong>. Check the <RadzenLink Path="/get-started" Text="Get started" /> instructions.
</RadzenAlert>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    In this demo a dropdown allows switching between all available themes (Material, Standard, Fluent, Default, Humanistic, Software), with toggles for <strong>Right-to-left</strong> direction and <strong>WCAG compliant colors</strong>, and <code>ThemeChanged</code> event logging theme changes to console.
</RadzenText>

<RadzenExample ComponentName="ThemeService" Example="ThemeServiceConfig">
    <ThemeServiceConfig />
</RadzenExample>
<RadzenText Anchor="theme-service#persist" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Persist the theme
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
The Radzen.Blazor library provides a built-in service that persists the current theme in a cookie. This means that the theme will be remembered even after the user closes the browser or navigates to a different page. The theme will be restored when the user returns to the application.
</RadzenText>
<RadzenTabs SelectedIndex=@selectedIndex Change="@OnTabChange">
    <Tabs>
        <RadzenTabsItem Text=".NET 8 &amp; 9 &amp; 10">
@RegisterService
@MainLayout
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-mt-12 rz-mb-4">3. Open the <code>App.razor</code> file of your application and add this code:</RadzenText>
<pre class="rz-p-4">
<code>
@@code {
    [CascadingParameter]
    private HttpContext HttpContext { get; set; }

    [Inject]
    private ThemeService ThemeService { get; set; }
    
    [Inject]
    private IOptions&lt;CookieThemeServiceOptions&gt; Options { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        if (HttpContext != null)
        {
            var theme = HttpContext.Request.Cookies["MyApplicationTheme"];

            if (!string.IsNullOrEmpty(theme))
            {
                ThemeService.SetTheme(theme, false);
            }
            else
            {
                HttpContext.Response.Cookies.Append("MyApplicationTheme", "material" , new CookieOptions { Secure = Options.Value.IsSecure, Expires = DateTimeOffset.Now.Add(Options.Value.Duration) });    
            }
        }
    }
}
</code>
</pre>
        </RadzenTabsItem>
        <RadzenTabsItem Text=".NET 7">
@RegisterService
@MainLayout
@Host
@Persist("_Host.cshtml")
        </RadzenTabsItem>
        <RadzenTabsItem Text=".NET 6">
@RegisterService
@MainLayout
@Host
@Persist("_Layout.cshtml")
        </RadzenTabsItem>
    </Tabs>
</RadzenTabs>

@code {
    private static readonly string[] versions = ["net8", "net7", "net6"];

    private int selectedIndex = 0;

    [Parameter]
    public string Version { get; set; }

    private string CurrentVersion => Version ?? "net8";

    protected override void OnParametersSet()
    {
        base.OnParametersSet();

        selectedIndex = Array.IndexOf(versions, CurrentVersion);
    }

    private void OnTabChange(int index)
    {
        NavigationManager.NavigateTo($"/theme-service/{versions[index]}#persist");
    }

    RenderFragment MainLayout => @<text>
        <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-mt-12 rz-mb-4">2. Open <code>MainLayout.razor</code> and inject the <code>CookieThemeService</code>:</RadzenText>
<pre class="rz-p-4">
<code>
@@inject CookieThemeService CookieThemeService
</code>
</pre>
    </text>;

    RenderFragment RegisterService => @<text>
        <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-mt-8 rz-mb-4">1. Open <code>Program.cs</code> file(s) and register the <code>CookieThemeService</code>:</RadzenText>
<pre class="rz-p-4">
<code>
builder.Services.AddRadzenCookieThemeService(options =&gt;
{
    options.Name = "MyApplicationTheme"; // The name of the cookie
    options.Duration = TimeSpan.FromDays(365); // The duration of the cookie
});
</code>
</pre>
<RadzenAlert AlertStyle="AlertStyle.Base" Variant="Variant.Flat" AllowClose="false" class="rz-mb-6">
Register CookieThemeService in all <code>Program.cs</code> files of your application.
</RadzenAlert>
        </text>;
    RenderFragment Host => @<text>
        <RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-mt-12 rz-mb-4">3. Open <code>_Host.cshtml</code> and add this code:</RadzenText>
<pre class="rz-p-4">
<code>
@@inject Radzen.ThemeService ThemeService
@@{
    var theme = HttpContext.Request.Cookies["MyApplicationTheme"];

    if (!string.IsNullOrEmpty(theme))
    {
        ThemeService.SetTheme(theme, true);
    }
}
</code>
</pre>
    </text>;

    RenderFragment<string> Persist => fileName => @<text>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-mt-12 rz-mb-4">4. Open <code>@fileName</code> and append the following code after the last <code>script</code> tag:</RadzenText>
<pre class="rz-p-4">
<code>
&lt;persist-component-state /&gt;
</code>
</pre>
    </text>;
}

<RadzenRow>
    <RadzenColumn Size="12">
        <RadzenText Anchor="theme-service#video-changing-themes-at-runtime" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
            Changing themes at runtime in Radzen Blazor Studio
        </RadzenText>
        <RadzenText TextStyle="TextStyle.Subtitle1" class="rz-mb-6">
            Use Radzen ThemeService and a RadzenDropDown to change the app’s theme at runtime.
        </RadzenText>
    <RadzenCard Variant="Variant.Outlined" class="rz-p-7">
        <div class="embed-container">
            <iframe src="https://www.youtube.com/embed/JWkYIAIyFFs?&rel=0" frameborder="0" allowfullscreen=""></iframe>
        </div>
    </RadzenCard>
    </RadzenColumn>
</RadzenRow>
