<script lang="ts">
    import { navigate } from "svelte-routing/src/history"
    import { navigation, pages, rerender } from "../store"
    let nextpage = $navigation?.pages[0]
    $: nextpage = $navigation?.pages[0]
    function getNextPage(pages) {
        if (location.pathname == "/" || location.pathname == "") {
            $navigation?.pages?.length > 1 ? (nextpage = $navigation?.pages[1]) : (nextpage = $navigation?.pages[0])
            return
        }
        let currPage = pages.find(
            (page) => Object.values($pages)?.find((o) => o.id == page.page)?.path == location.pathname
        )

        let currIndex = pages.indexOf(currPage)
        let nextIndex
        if (pages.length - 1 == currIndex) {
            nextIndex = 0
        } else {
            nextIndex = currIndex + 1
        }
        nextpage = pages[nextIndex]
    }
    let blackBg = false
    if (typeof window !== "undefined") {
        setInterval(() => {
            if (location.pathname == "/") {
                blackBg = true
            } else {
                blackBg = false
            }

            getNextPage($navigation.pages)

            if (location.pathname.split("/").filter((s) => s).length >= 2) {
                showNext = false
            } else {
                showNext = true
            }
        }, 1000)
    }
    let showNext = true
    $: {
        if (typeof window !== "undefined") {
            if ($rerender) {
                if (location.pathname != "/") {
                    getNextPage($navigation.pages)
                }
            }
            if (location.pathname.split("/").filter((s) => s).length >= 2) {
                showNext = false
            } else {
                showNext = true
            }
        }
    }
</script>

<div class="footer" class:black-bg="{blackBg}">
    {#if showNext}
        <button
            class="upper-part"
            on:click="{() => {
                $rerender = $rerender + 1
                navigate(Object.values($pages)?.find((o) => o.id == nextpage.page)?.path || '/')
            }}"
        >
            <div class="upper"><img src="/media/arrow-right.svg" alt="arrow" /> Weiter</div>
            <div class="lower">{nextpage?.name}</div>
        </button>{/if}
    <div class="lower-part">
        <div class="container" style="">
            <div class="links">
                <button
                    on:click="{() => {
                        $rerender = $rerender + 1
                        navigate('/datenschutz')
                    }}">Datenschutz</button
                >
                <button
                    on:click="{() => {
                        $rerender = $rerender + 1
                        navigate('/impressum')
                    }}">Impressum</button
                >
                <button
                    on:click="{() => {
                        $rerender = $rerender + 1
                        navigate('/contact')
                    }}">Contact (EN)</button
                >
            </div>
            <div class="contact">
                <button>+49 (0) 711 655 700-0</button>

                <button>
                    <a href="mailto:info@fontis.de" class="button" style="text-decoration: none;">
                        info@fontis.de</a
                    ></button
                >
            </div>
        </div>
    </div>
</div>

<style lang="less">
    @import "../assets/css/main.less";
    .footer {
        padding-top: 80px;
        display: flex;
        position: relative;
        z-index: 1000;
        flex-direction: column;
        align-items: flex-end;
        color: @font-color-secondary;
        &.black-bg {
            margin-top: -10px;
            background-color: @bg-color-secondary;
        }
        .upper-part {
            background-color: @bg-color-secondary;
            padding: 10px 40px;
            display: flex;
            flex-direction: column;
            width: fit-content;
            .upper {
                color: @font-color-secondary;
                font-size: 12px;
                display: flex;
                gap: 10px;
                @media @tablet {
                    font-size: 14px;
                }
            }
            .lower {
                color: @font-color-secondary;
                font-size: 22px;
                font-family: "Libre Caslon Text", serif;
                @media @tablet {
                    font-size: 24px;
                }
            }
        }

        .lower-part {
            padding: 40px 20px;
            background-color: @bg-color-secondary;
            width: 100%;
            display: flex;
            justify-content: center;
            .container {
                max-width: 1400px;
                width: 100%;
                display: flex;

                flex-direction: column;
                margin: 15px 0px;
                padding: 15px 10px;
                @media @tablet {
                    margin: 40px 0px;
                    padding: 30px 10px;
                }
                .links,
                .contact {
                    display: flex;
                    justify-content: space-between;
                    padding: 10px 0px;
                }
                button {
                    color: @font-color-secondary;
                    a {
                        color: @font-color-secondary;
                        font-weight: normal;
                    }
                }
                @media @tablet {
                    flex-direction: row;
                    justify-content: space-between;
                    .links,
                    .contact {
                        display: flex;
                        justify-content: flex-start;
                        gap: 40px;
                        padding: 0px;
                    }
                }
            }
        }
    }
</style>
