<script lang="ts">
    import * as animateScroll from "svelte-scrollto"

    import { generalInfo } from "../../store"

    // import ContactForm from "../widgets/ContactForm.svelte"
    // import GoogleMaps from "../widgets/GoogleMaps.svelte"
    import ScrollTo from "../widgets/ScrollTo.svelte"
    import GeneralMediaImage from "../widgets/GeneralMediaImage.svelte"
    import ArticlesList from "../widgets/ArticlesList.svelte"

    let expandedForm: string = "recipe"
</script>

<svelte:head>
    {#if $generalInfo?.meta?.metaTitle}
        <title>{$generalInfo?.meta?.metaTitle}</title>
    {/if}
    {#if $generalInfo?.meta?.metaDescription}
        <meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
    {/if}
    {#if $generalInfo?.meta?.metaKeywords}
        <meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
    {/if}
    {#if $generalInfo?.person?.firstname || $generalInfo?.person?.lastname}
        <meta
            name="author"
            content="{$generalInfo?.person?.firstname ? $generalInfo?.person?.firstname : ''} {$generalInfo?.person
                ?.lastname
                ? $generalInfo?.person?.lastname
                : ''}"
        />
    {/if}
    {#if $generalInfo?.meta?.metaTagRobots && $generalInfo?.meta?.metaTagRobots.length}
        <meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
    {/if}
    {#if $generalInfo?.media?.favicon}
        <link rel="shortcut icon" type="image/x-icon" href="{$generalInfo?.media?.favicon.src}" />
    {/if}
</svelte:head>

<ArticlesList pages="{['/']}" />

<!-- <GeneralMediaImage id="test1" /> -->

<!-- <ContactForm type="recipe" collapsed="{expandedForm !== 'recipe'}" /> -->
<!-- <ContactForm type="contact" collapsed="{expandedForm !== 'contact'}" /> -->
<!-- <GoogleMaps /> -->

<ScrollTo
    on:scrollTo="{(e) => {
        expandedForm = null
        animateScroll.scrollTo({
            delay: 100,
            element: '#' + e.detail.element,
            offset: -200,
            onDone: () => {
                expandedForm = e.detail.element
            },
        })
    }}"
/>
