<script lang="ts">
    import Card from "./card.svelte"
    import Selectbox from "./selectbox.svelte"

    export let worldCard: WorldCard
    export let pageId: string

    let availableProperties = [
        ["A", "Aktien"],
        ["PE", "Private Equity"],
        ["IN", "Infrastruktur"],
        ["W", "Waldwirtschaft"],
        ["IE", "Immobilien-Entwicklung"],
        ["R", "Renten"],
        ["VC", "Venture Capital"],
        ["PD", "Private Debt"],
        ["LW", "Landwirtschaft"],
        ["IB", "Immobilien-Bestand"],
    ]
    let selected = []
    availableProperties.forEach((e) => selected.push(false))
    let props
    $: {
        props = chunkArray([...availableProperties], 5)
    }

    function chunkArray(myArray, chunk_size): string[][] {
        var results = []

        while (myArray.length) {
            results.push(myArray.splice(0, chunk_size))
        }

        return results
    }
</script>

<div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
    <div class="worldcard">
        <div class="worldcard">
            {#each worldCard?.row as row}
                <div class="wc-row">
                    {#each row?.cards as card}
                        <Card
                            card="{card}"
                            properties="{availableProperties}"
                            pageId="{pageId}"
                            selected="{selected}"
                        />
                    {/each}
                </div>
            {/each}
        </div>

        <div class="selectboxes">
            <h3>WÄHLEN SIE IHRE ANLAGEKLASSEN</h3>
            {#each props as propertyRow, i}
                <div class="prop-row">
                    {#each propertyRow as property, j}
                        <Selectbox
                            abbriviation="{property[0]}"
                            name="{property[1]}"
                            on:click="{(e) => {
                                selected[availableProperties.indexOf(property)] = e.detail
                            }}"
                        />
                    {/each}
                </div>
            {/each}
        </div>
    </div>
</div>

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

    .worldcard {
        line-height: 1 !important;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 1170px;
        max-width: 95vw;

        & > .worldcard {
            gap: 0px !important;
            display: flex;
            flex-direction: column;
            .wc-row {
                display: flex;
                max-width: 100%;
                height: fit-content;
            }
        }

        .selectboxes {
            width: 100%;
            max-width: 95vw;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            @media @tablet {
                align-items: center;
            }
            margin-bottom: 20px;
            gap: 10px;

            .prop-row {
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                gap: 10px;
            }
        }
    }
</style>
