<script lang="ts">
    import { navigate } from "svelte-routing/src/history"
    import Boxlist from "../widgets/boxlist.svelte"
    import Events from "../widgets/events.svelte"
    import ExtendableBox from "../widgets/extendableBox.svelte"
    import IconBlock from "../widgets/iconBlock.svelte"
    import Image from "../widgets/image.svelte"
    import InfoBoard from "../widgets/infoBoard.svelte"
    import NestedCard from "../widgets/nestedCard.svelte"
    import PageLinkBlocks from "../widgets/pageLinkBlocks.svelte"
    import Persons from "../widgets/persons.svelte"
    import Publications from "../widgets/publications.svelte"
    import Text from "../widgets/text.svelte"
    import TextLink from "../widgets/textLink.svelte"
    import TopDown from "../widgets/topDown.svelte"
    import WorldCard from "../widgets/Worldcard/worldcard.svelte"
    import { modules, pages, rerender, team } from "../../store"
    import IconCycleCircle from "../widgets/iconCycleCircle.svelte"
    import IconCycleBox from "../widgets/iconCycleBox.svelte"
    import Module from "./Module.svelte"

    export let row: Row
    export let pageId: string
    export let bright: boolean
    export let isHP: boolean
    export let i: number
    export let page: Page
    export let personPage: boolean
    if (typeof window !== "undefined") {
        window.addEventListener("popstate", function (event) {
            $rerender = $rerender + 1
        })
    }
</script>

{#if Object.keys(row).length}
    {#if row.topTitle}
        <h3 class="{row.topTitleUpperCase ? 'hph3' : 'nmh3'}">
            {row.topTitle}
        </h3>
    {/if}
    {#if personPage}
        <div class="top-header" style="display: flex; width: 100%; justify-content: space-between;">
            <h3
                style="cursor: pointer; display: flex; align-items: center; gap: 10px; line-height: 1.4;"
                on:keydown
                on:click="{() => {
                    navigate('/' + location.pathname.split('/').at(1))

                    $rerender = $rerender + 1
                }}"
            >
                <img src="/media/arrow-l.svg" alt="arrow" /> Zurück zur Übersicht
            </h3>
            <h3
                style="cursor: pointer; display: flex; align-items: center; gap: 10px; line-height: 1.4;"
                on:keydown
                on:click="{() => {
                    let chefs = Object.values($team).filter((p) => p.personType == 'chef')
                    chefs = chefs.sort((a, b) => a.sort - b.sort)
                    let i = chefs.findIndex((p) => p.path == page.path)
                    if (i == chefs.length - 1) i = 0
                    else i++
                    navigate(chefs[i].path)

                    $rerender = $rerender + 1
                }}"
            >
                Zum nächsten Profil <img src="/media/arrowr.svg" alt="arrow" />
            </h3>
        </div>
    {/if}
    {#if page.pageTitle && i == 0}
        <h1>{page.pageTitle}</h1>
    {/if}
    {#if row.title}
        <h2 class="">{row.title}</h2>
    {/if}
    {#if row.subTitle}
        <h3 class="subheading">{row.subTitle}</h3>
    {/if}
    {#if row?.columns?.length}
        <div
            class="row"
            class:twoToThree="{row.twoToThree}"
            class:normalWrap="{row.flexWrapNormal}"
            class:dominant="{row.columns.some(
                (col) => col.contentType == 'moduleImport' && $modules?.[col.moduleImport]?.type == 'iconCycleCircle'
            )}"
        >
            {#each row?.columns as col}
                <div
                    class="col"
                    class:dominant="{col.contentType == 'moduleImport' &&
                        $modules?.[col.moduleImport]?.type == 'iconCycleCircle'}"
                >
                    {#if col?.contentType == "text"}
                        <Text text="{col?.text}" />
                    {:else if col?.contentType == "textLink"}
                        <TextLink
                            description="{col?.textLink?.text}"
                            path="{Object.values($pages)?.find((o) => o.id == col.textLink.link)?.path || '/'}"
                            bright="{bright}"
                        />
                    {:else if col.contentType == "moduleImport"}
                        <Module col="{col}" pageId="{pageId}" />
                    {:else if col.contentType == "image"}
                        <Image image="{col?.image}" col="{col}" pageId="{pageId}" />
                    {:else if col.contentType == "iconBlocks"}
                        <IconBlock pageId="{pageId}" col="{col}" />
                    {:else if col.contentType == "networkEvents"}
                        <Events col="{col}" pageId="{pageId}" />
                    {:else if col.contentType == "publications"}
                        <Publications col="{col}" pageId="{pageId}" />
                    {:else if col.contentType == "topDown"}
                        <TopDown col="{col}" />
                    {:else if col.contentType == "infoBoard"}
                        <InfoBoard col="{col}" pageId="{pageId}" />
                    {:else if col.contentType == "nestedCard"}
                        <NestedCard col="{col}" />
                    {/if}
                </div>
            {/each}
        </div>{/if}
{/if}

<style lang="less">
    @import "../../assets/css/main.less";
    .red {
        color: #fa00ff !important;
    }
    h3 {
        font-weight: 500;
        margin-bottom: 15px;
        @media @tablet {
            margin-bottom: 0px;
        }
    }
    h2 {
        font-weight: 500;
        font-size: 1.7rem !important;
    }
    h1 {
        font-weight: 500;
        font-size: 2rem;
        color: @signal-color;
    }
    .top-header {
        img {
            width: 20px;
        }
        font-size: 0.7rem;
        @media @tablet {
            font-size: 1.2rem;
            img {
                width: 48px;
            }
        }
    }
    @media @tablet {
        h3 {
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 10px;
            img {
                width: 40px;
                margin-right: 10px;
            }
            &.subheading {
                font-size: 1.8rem;
            }
        }
        h2 {
            font-size: 2rem !important;
            font-weight: 500;
        }
        h1 {
            font-size: 3.5rem;
            font-weight: 500;
        }
    }
    @media @desktop {
        h2 {
            font-size: 2.3rem !important;
        }
        h1 {
            font-size: 5rem;
        }
    }

    .row {
        padding-top: 40px;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 20px;

        &.dominant {
            @media (max-width: 1024px) {
                flex-direction: row-reverse;
            }
        }
        @media (max-width: 640px) {
            flex-direction: column-reverse;
            &.normalWrap {
                flex-direction: column;
            }
        }
        & > .col {
            max-width: 100%;
            &.dominant {
                @media (max-width: 1024px) {
                    min-width: 80% !important;
                }
                flex: 5 !important;
            }

            min-width: 40% !important;

            @media @desktop {
                min-width: 30% !important;
            }

            flex: 1;
            min-width: 0;
        }
        &.twoToThree {
            & > .col:nth-child(1) {
                flex: 2 !important;
            }
            & > .col:nth-child(2) {
                flex: 3 !important;
            }
        }
    }

    .hph3 {
        text-transform: uppercase;
        font-size: 0.7rem;
    }
    .nmh3 {
        font-size: 0.9rem;
        @media @tablet {
            font-size: 1.6rem;
        }
    }
</style>
