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

    import { currentLang } from "../../store"
    import { getArticles } from "../../api"

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

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

<section class="contact">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ArticlesList tag="home" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <GeneralMediaImage id="test1" />
            </div>
        </div>
        <div class="row nospace">
            <div class="col-md-6">
                <ContactForm type="recipe" collapsed="{expandedForm !== 'recipe'}" />
            </div>
            <div class="col-md-6">
                <ContactForm type="contact" collapsed="{expandedForm !== 'contact'}" />
            </div>
        </div>
    </div>
</section>

<section>
    <GoogleMaps />
</section>

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