@namespace Oqtane.UI
@inject IJSRuntime JsRuntime
@inject NavigationManager NavigationManager
@inject SiteState SiteState

@DynamicComponent

@code {
    [CascadingParameter] PageState PageState { get; set; }

    RenderFragment DynamicComponent { get; set; }

    protected override void OnParametersSet()
    {
        // handle page redirection
        if (!string.IsNullOrEmpty(PageState.Page.Url))
        {
            NavigationManager.NavigateTo(PageState.Page.Url);
            return;
        }

        // set page title
        if (!string.IsNullOrEmpty(PageState.Page.Title))
        {
            SiteState.Properties.PageTitle = PageState.Page.Title;
        }
        else
        {
            SiteState.Properties.PageTitle = PageState.Site.Name + " - " + PageState.Page.Name;
        }

        // set page head content
        var headcontent = "";
        // favicon
        var favicon = "favicon.ico";
        if (PageState.Site.FaviconFileId != null)
        {
            favicon = Utilities.FileUrl(PageState.Alias, PageState.Site.FaviconFileId.Value);
        }
        headcontent += $"<link id=\"app-favicon\" rel=\"shortcut icon\" type=\"image/x-icon\" href=\"{favicon}\" />\n";
        // PWA manifest
        if (PageState.Site.PwaIsEnabled && PageState.Site.PwaAppIconFileId != null && PageState.Site.PwaSplashIconFileId != null)
        {
            headcontent += "<link id=\"app-manifest\" rel=\"manifest\" />";
        }
        // meta
        headcontent += PageState.Page.Meta ?? "";
        SiteState.Properties.HeadContent = headcontent;

        // set page body content
        var bodycontent = "";
        if (PageState.Site.PwaIsEnabled && PageState.Site.PwaAppIconFileId != null && PageState.Site.PwaSplashIconFileId != null)
        {
            bodycontent += CreatePWAScript(PageState.Alias, PageState.Site, PageState.Route);
        }
        if (bodycontent != "")
        {
            SiteState.Properties.BodyContent = bodycontent;
        }

		DynamicComponent = builder =>
		{
			var themeType = Type.GetType(PageState.Page.ThemeType);
			builder.OpenComponent(0, themeType);
			builder.CloseComponent();
		};
	}

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		var interop = new Interop(JsRuntime);

        // manage stylesheets for this page 
		string batch = DateTime.UtcNow.ToString("yyyyMMddHHmmssfff");
		var links = new List<object>();
		foreach (Resource resource in PageState.Page.Resources.Where(item => item.ResourceType == ResourceType.Stylesheet))
		{
			var prefix = "app-stylesheet-" + resource.Level.ToString().ToLower();
			var url = (resource.Url.Contains("://")) ? resource.Url : PageState.Alias.BaseUrl + resource.Url;
			links.Add(new { id = prefix + "-" + batch + "-" + (links.Count + 1).ToString("00"), rel = "stylesheet", href = url, type = "text/css", integrity = resource.Integrity ?? "", crossorigin = resource.CrossOrigin ?? "", insertbefore = prefix });
        }
        if (links.Any())
        {
            await interop.IncludeLinks(links.ToArray());
        }
		await interop.RemoveElementsById("app-stylesheet-page-", "", "app-stylesheet-page-" + batch + "-00");
		await interop.RemoveElementsById("app-stylesheet-module-", "", "app-stylesheet-module-" + batch + "-00");
	}

    private string CreatePWAScript(Alias alias, Site site, Route route)
    {
        return
        "<script>" + Environment.NewLine +
        "    // PWA Manifest" + Environment.NewLine +
        "    setTimeout(() => {" + Environment.NewLine +
        "        var manifest = {" + Environment.NewLine +
        "            \"name\": \"" + site.Name + "\"," + Environment.NewLine +
        "            \"short_name\": \"" + site.Name + "\"," + Environment.NewLine +
        "            \"start_url\": \"" + route.SiteUrl + "/\"," + Environment.NewLine +
        "            \"display\": \"standalone\"," + Environment.NewLine +
        "            \"background_color\": \"#fff\"," + Environment.NewLine +
        "            \"description\": \"" + site.Name + "\"," + Environment.NewLine +
        "            \"icons\": [{" + Environment.NewLine +
        "                \"src\": \"" + route.RootUrl + Utilities.FileUrl(alias, site.PwaAppIconFileId.Value) + "\"," + Environment.NewLine +
        "                \"sizes\": \"192x192\"," + Environment.NewLine +
        "                \"type\": \"image/png\"" + Environment.NewLine +
        "                }, {" + Environment.NewLine +
        "                \"src\": \"" + route.RootUrl + Utilities.FileUrl(alias, site.PwaSplashIconFileId.Value) + "\"," + Environment.NewLine +
        "                \"sizes\": \"512x512\"," + Environment.NewLine +
        "                \"type\": \"image/png\"" + Environment.NewLine +
        "            }]" + Environment.NewLine +
        "       };" + Environment.NewLine +
        "       const serialized = JSON.stringify(manifest);" + Environment.NewLine +
        "       const blob = new Blob([serialized], {type: 'application/javascript'});" + Environment.NewLine +
        "       const url = URL.createObjectURL(blob);" + Environment.NewLine +
        "       document.getElementById('app-manifest').setAttribute('href', url);" + Environment.NewLine +
        "    }, 1000);" + Environment.NewLine +
        "</script>" + Environment.NewLine +
        "<script>" + Environment.NewLine +
        "    // PWA Service Worker" + Environment.NewLine +
        "    if ('serviceWorker' in navigator) {" + Environment.NewLine +
        "        navigator.serviceWorker.register('/service-worker.js').then(function(registration) {" + Environment.NewLine +
        "            console.log('ServiceWorker Registration Successful');" + Environment.NewLine +
        "        }).catch (function(err) {" + Environment.NewLine +
        "            console.log('ServiceWorker Registration Failed ', err);" + Environment.NewLine +
        "        });" + Environment.NewLine +
        "    };" + Environment.NewLine +
        "</script>";
    }
}