<script lang="ts">
    import { pages, scrollToRowNr } from "../../store"
    import Homepage from "./Homepage.svelte"
    import Pagebuilder from "./Pagebuilder.svelte"
    import { apiBaseURL } from "../../../config"
    import { onMount } from "svelte"

    export let path
    export let homepage = false
    export let image: FileField
    let page: Page
    function initPage() {
        page = $pages[path]
    }

    onMount(() => {
        if ($scrollToRowNr !== -1) {
            console.log("test321-", $scrollToRowNr)
            if (!$scrollToRowNr) {
                $scrollToRowNr = -1
                return
            }
            let element = document.getElementById("row-" + $scrollToRowNr)
            console.log(element)
            if (!element) {
                $scrollToRowNr = -1
                return
            }

            element?.scrollIntoView({
                behavior: "smooth",
            })
            $scrollToRowNr = -1
        }
    })

    $: {
        if (Object.keys($pages).length) {
            initPage()
        }
    }
</script>

<div class="rows" class:HP="{path == '/'}">
    {#if page}
        {#if path == "/"}<Homepage />{/if}
        {#each page.rows as row, i}
            <div class="row" id="row-{i}">
                {#if row.row.backgroundImage}
                    <div class="background-image">
                        <img src="{`${apiBaseURL}page/${page.id}/${row.row.backgroundImage?.src}`}" alt="img" />
                    </div>
                {/if}
                <div class="content" class:bright="{row.row.backgroundImage}">
                    <Pagebuilder row="{row.row}" pageId="{page.id}" bright="{!!row.row.backgroundImage}" />
                </div>
            </div>
        {/each}
    {/if}
</div>

<style lang="less">
    @import "../../assets/css/main.less";

    .rows {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        position: relative;

        overflow-x: hidden;
        gap: 10px;

        & > .row {
            padding: 10px;
            padding-top: 30px;
            @media @tablet {
                padding-top: 80px;
            }
            width: 100%;
            position: relative;
            display: flex;
            justify-content: center;

            .background-image {
                position: absolute;
                width: 100%;
                z-index: 1;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }

            & > .content {
                width: 100%;
                max-width: 1800px;
                padding: 0px 2.5vw;
                position: relative;
                &.bright {
                    color: @font-color-secondary !important;
                }
                z-index: 2;
            }
        }
    }
</style>
