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

    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
    }
    let hovered = "-1"
</script>

<div class="card">
    <img
        src="{apiBaseURL}medialib/{card.image}/{$mediaLibrary?.[card?.image]?.file?.src}"
        alt="{$mediaLibrary[card?.image]?.alt || ''}"
        title="{$mediaLibrary[card?.image]?.title || ''}"
    />

    <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"
                            style="grid-template-columns: repeat({propertyRow.length}, min(25px, 1.8vw));"
                        >
                            {#each propertyRow as property, j (j)}
                                <div class="collapsible-wrapper">
                                    <div
                                        class="property collapsible"
                                        class:hovered="{hovered == j + ' ' + i}"
                                        class:selected="{selected[property]}"
                                        on:mouseenter="{() => {
                                            hovered = j + ' ' + i
                                        }}"
                                        on:mouseleave="{() => {
                                            hovered = '-1'
                                        }}"
                                    >
                                        <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;
            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;
                        }

                        flex-direction: column;
                        gap: 5px;
                        .property-row {
                            display: grid;
                            grid-gap: 5px;
                            @media (max-width: 1000px) {
                                grid-gap: 2px;
                            }
                            .property {
                                z-index: 99;
                                &:hover {
                                    z-index: 9999;
                                }
                                position: relative;
                                left: 0px;
                                cursor: pointer;
                                overflow: hidden;
                                width: 1.8vw;
                                max-width: 25px;
                                font-size: min(0.5vw, 11px);
                                height: 1.8vw;
                                max-height: 25px;
                                border-radius: 15px;
                                border: 2px solid #6b6868;
                                color: #6b6868;
                                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;
                                display: flex;

                                &.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,
                                        0.5s padding ease-in;
                                    white-space: nowrap;
                                }
                                &.hovered {
                                    width: fit-content;
                                    z-index: 9999;
                                    max-width: 1000px;
                                    padding: 5px;
                                    background-color: white;
                                    .short {
                                        padding-left: 8px;
                                    }
                                    .long {
                                        padding: 0px 10px;
                                        max-width: fit-content;
                                        background-color: @bg-color;
                                        color: @font-color;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
