<template>
    <div>
        <div class="flex-column-20">
            <BsWarning :text="warningMsg" :closable="true" v-if="showWarning"></BsWarning>
            <div v-if="title" class="title">{{ title }}</div>
            <div class="main-cards-container">
                <div class="main-card" v-for="card in bigCards">
                    <BsCard
                        :title="card.title"
                        :items="card.items"
                        :infoText="card.infoText"
                        :subItems="card.subItems"
                    >
                        <template #content>
                            <div class="main-card-content">
                                <div
                                    v-for="[key, value] of Object.entries(
                                        card.items
                                    )"
                                    :key="key"
                                    class="card-content-item"
                                >
                                    <div
                                        class="bs-font-medium-3-normal bs-item-label"
                                    >
                                        {{ key }}
                                    </div>
                                    <div
                                        class="bs-font-large-1-bold bs-item-key"
                                    >
                                        {{ value }}
                                    </div>
                                    <div
                                        class="uplift-container bs-font-medium-3-bold"
                                        v-if="
                                            card.subItems && card.subItems[key]
                                        "
                                        :class="card.subItems[key].color"
                                    >
                                        <BsIcon
                                            :name="card.subItems[key].icon"
                                            v-if="card.subItems[key].icon"
                                            :color="card.subItems[key].color"
                                        ></BsIcon>
                                        {{
                                            card.subItems[key].color === "green"
                                                ? "+"
                                                : ""
                                        }}
                                        {{
                                            Object.values(card.subItems[key])[0]
                                        }}
                                        <BsInfoTooltip
                                            :text="card.subItems[key].infoText"
                                            v-if="card.subItems[key].infoText"
                                        ></BsInfoTooltip>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </BsCard>
                </div>
            </div>
            <slot></slot>
            <div class="small-cards-container">
                <div class="small-card" v-for="card in smallCards">
                    <BsCard
                        :title="card.title"
                        :items="card.items"
                        :subItems="card.subItems"
                    ></BsCard>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import BsWarning from "./BsWarning.vue";
import BsCard from "./BsCard.vue";
import BsInfoTooltip from "./BsInfoTooltip.vue";
export default defineComponent({
    name: "Summary",
    props: {
        warningMsg: {
            type: String,
            default: "",
        },
        title: {
            type: String,
            default: "",
        },
        bigCards: {
            type: Array<any>,
            required: true,
        },
        smallCards: {
            type: Array<any>,
            required: true,
        },
        showWarning: {
            type: Boolean,
            default: true,
        },
        cloasableWarning: {
            type: Boolean,
            default: true,
        },
    },
    components: { BsWarning, BsCard, BsInfoTooltip },
});
</script>
<style scoped>
.main-cards-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.title {
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.main-card,
.small-card {
    flex-grow: 1;
}
.small-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.small-card {
    flex: 1 1  calc(33.33% - 12px);
    max-width: calc(33.33% - 12px);
}
.main-card-content {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
}
.card-content-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card-content-item:not(:first-child) {
    border-left: 4px solid var(--base-colors-bs-color-border-light, #e5e5e5);
}
.uplift-container {
    display: flex;
    border-radius: 4px;
    padding: var(--bs-spacing-0, 0px) var(--bs-spacing-2, 8px);
    justify-content: center;
    align-items: center;
    gap: var(--bs-spacing-1, 4px);
}
:deep(.green){
    color: var(--status-bs-color-status-success, #0b590b);
}
:deep(.grey) {
    color: var(--text-and-icons-bs-color-text, #333e48);
}
:deep(.red) {
    color: var(--color-red-bs-red-medium-300, #ce1228);
}
.uplift-container.green {
    background: var(--status-bs-color-status-success-background, #d7f0d6);
}
.uplift-container.grey {
    background: var(--base-colors-bs-color-background-light-200, #eee);
}
.uplift-container.red {
    background: var(--color-pink-bs-pink-light-100, #f9e3e5);
}
</style>
