<script lang="ts">
    import { apiBaseURL } from "../../../../config"

    export let card: Card
    export let properties: string[][]
    export let pageId: string
    export let selected: boolean[]
    let props
    $: {
        props = chunkArray([...card.properties], card.properties.length > 8 ? 5 : 4)
    }

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

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

        return results
    }
</script>

<div class="card">
    <img src="{apiBaseURL}page/{pageId}/{card.image.src}" alt="card" />

    <div class="content">
        <div
            class="container"
            style="align-items: {card.horizontalAlignment || 'center'}; justify-content: {card.verticalAlignment ||
                'center'};"
        >
            <div class="inner-container">
                <div
                    class="title"
                    class:active="{card.properties.some((v, i) => selected[v])}"
                    style="top: {card.verticalShift || 0}%; left: {card.horizontalShift || 0}%;"
                >
                    {card.title}
                </div>

                <div class="properties" style="top: {card.verticalShift || 0}%; left: {card.horizontalShift || 0}%;">
                    {#each props as propertyRow, i (i)}
                        <div class="property-row">
                            {#each propertyRow as property, j (j)}
                                <div class="collapsible-wrapper">
                                    <div class="property collapsible" class:selected="{selected[property]}">
                                        <div class="short">
                                            {properties[property][0]}
                                        </div>
                                        <div class="long">{properties[property][1]}</div>
                                    </div>
                                </div>
                            {/each}
                        </div>
                    {/each}
                </div>
            </div>
        </div>
    </div>
</div>

<style lang="less">
    @import "../../../assets/css/main.less";
    .card {
        position: relative;
        height: fit-content;
        img {
            display: block;
            width: 100%;
        }
        .short {
            font-weight: 700;
        }
        .content {
            position: absolute;
            &:hover {
                z-index: 10000;
            }
            padding: 10px;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            .container {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                .inner-container {
                    max-width: 200px;
                    &:hover {
                        max-width: fit-content;
                    }
                    display: flex;
                    width: fit-content;
                    flex-direction: column;
                    gap: 10px;
                    align-items: center;
                    .title {
                        font-size: min(1.6vw, 14px);
                        position: relative;
                        z-index: 200;
                        padding: 2px 5px;
                        text-transform: uppercase;
                        @media @tablet {
                            padding: 5px 10px;
                            font-size: min(1vw, 18px);
                        }
                        font-weight: bold;
                        color: @font-color-secondary;
                        background-color: @bg-color-secondary;
                        &.active {
                            background-color: @bg-color;
                            color: @font-color;
                        }
                    }

                    .properties {
                        display: none;
                        position: relative;
                        @media @desktop {
                            display: flex;
                        }
                        z-index: 200;
                        flex-direction: column;
                        gap: 5px;
                        .property-row {
                            display: flex;
                            gap: 5px;

                            .property {
                                cursor: pointer;
                                overflow: hidden;
                                width: 2vw;
                                max-width: 30px;
                                font-size: min(0.7vw, 14px);
                                height: 2vw;
                                max-height: 30px;
                                border-radius: 15px;
                                border: 2px solid #4f4f4f;
                                color: #4f4f4f;
                                background-color: @bg-color-secondary;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                transition: 0.5s width ease-in, 0.5s max-width ease-in, 0.5s background-color ease-in,
                                    0.5s color ease-in;
                                &.selected {
                                    background-color: @bg-color !important;
                                    color: @font-color !important;
                                }
                                .long {
                                    max-width: 0px;
                                    overflow: hidden;
                                    background-color: @bg-color-secondary;
                                    color: @font-color-secondary;
                                    transition: 0.5s width ease-in, 0.5s background-color ease-in, 0.5s color ease-in;
                                    white-space: nowrap;
                                }
                                &:hover {
                                    width: fit-content;
                                    max-width: 1000px;
                                    padding: 5px;
                                    background-color: white;
                                    .short {
                                        padding-left: 8px;
                                    }
                                    .long {
                                        padding-left: 15px;
                                        max-width: fit-content;
                                        background-color: @bg-color;
                                        color: @font-color;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
