<script lang="ts">
    import { _, locale } from "svelte-i18n"
    import { getContent } from "../../api"
    import { generalInfo, currentLang } from "../../store"

    import Page from "./Page.svelte"

    export let path: string
    let pathLang: string

    let loading = true
    let content: Content
    let connectedContentNotFound: boolean = false
    $: currentDomain = window.location.origin

    const updateLang = () => {
        if (pathLang !== $currentLang) {
            let pathElements = path.split("/")

            // Update currentLang in store
            $currentLang = pathElements[0]

            // Update i18n language
            locale.set($currentLang)
        }
    }

    const loadContent = async (path: string) => {
        let apiParams: APIParams = {
            filter: {
                public: true,
                locale: $currentLang,
                path,
            },
        }

        loading = true
        const c = await getContent(apiParams)
        if (c) {
            content = c[0]
        } else {
            window.history.back()
        }

        loading = false
    }

    $: if (path) {
        updateLang()
        loadContent(path)
    }

    $: console.log(content)
</script>

<svelte:head>
    <title
        >{content?.name ? content?.name + " - " : ""}{content?.meta?.metaTitle
            ? content?.meta?.metaTitle
            : $generalInfo?.meta?.metaTitle}</title
    >
    <meta
        name="description"
        content="{content?.meta?.metaDescription
            ? content?.meta?.metaDescription
            : $generalInfo?.meta?.metaDescription}"
    />
    <meta
        name="keywords"
        content="{content?.meta?.metaKeywords
            ? content?.meta?.metaKeywords?.replaceAll(' ', '')
            : $generalInfo?.meta?.metaKeywords?.replaceAll(' ', '')}"
    />
    <meta
        name="robots"
        content="{content?.meta?.metaTagRobots ? content?.meta?.metaTagRobots : $generalInfo?.meta?.metaTagRobots}"
    />
    {#if $generalInfo?.person?.firstname || $generalInfo?.person?.lastname}
        <meta
            name="author"
            content="{$generalInfo?.person?.firstname ? $generalInfo?.person?.firstname : ''} {$generalInfo?.person
                ?.lastname
                ? $generalInfo?.person?.lastname
                : ''}"
        />
    {/if}
</svelte:head>

{#if loading}
    <!-- Loader -->
{:else if content}
    <!-- Content Page Router -->
    {#if content.type.includes("page")}
        <Page content="{content}" />
    {/if}
{:else}
    <div class="page-404">
        <h1>{$_("pageNotFound")}</h1>

        <p class="mb-md">
            {#if connectedContentNotFound}
                <div>
                    {@html $_("connectedContentNotFound", {
                        values: {
                            url: currentDomain + "/" + path,
                            lang: $_($currentLang) + ` (${$currentLang})`,
                        },
                    })}
                </div>
            {:else}
                <strong>
                    <a href="{currentDomain + '/' + path}">{currentDomain + "/" + path}</a>
                </strong>
            {/if}
        </p>
        <p>
            {@html $_("pageNotFoundInformation", {
                values: {
                    url: currentDomain,
                    backUrl: currentDomain + "/" + path,
                },
            })}
        </p>
    </div>
{/if}
