<template>
    <div style="margin-bottom: 10px;">
        <div class="bs-title-container" @click="toggleSection">
            {{ headerText }}
            <q-icon
                :name="expanded ? 'expand_less' : 'expand_more'"
                class="bs-toggle-icon"
                size="16px"
                v-if="expandable"
            ></q-icon>
        </div>
        <div class="bs-selection-section" v-if="expanded">
            <div
                class="bs-selection-section-title"
                v-if="selectorLabel"
                :class="{ disable: disabled }"
            >
                {{ selectorLabel }}
                <BsInfoTooltip :text="infoText" v-if="infoText"></BsInfoTooltip>
            </div>
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import BsInfoTooltip from "./BsInfoTooltip.vue";

export default defineComponent({
    name: "BsExpandableSection",
    components: {
        BsInfoTooltip,
    },
    props: {
        headerText: {
            type: String,
            required: true,
        },
        selectorLabel: {
            type: String,
            required: true,
        },
        expandable: {
            type: Boolean,
            default: false,
        },
        infoText: String,
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            expanded: true,
        };
    },
    methods: {
        toggleSection() {
            if (this.expandable) {
                this.expanded = !this.expanded;
            }
        },
    },
});
</script>

<style scoped>
.bs-title-container {
    background-color: #333e48;
    color: white;
    padding: 10px 15px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.bs-selection-section {
    padding: 12px;
    padding-left: 17px;
    padding-bottom: 20px;
    overflow-y: scroll;
    max-height: 100%;
    height: 100%;
}

.bs-selection-section-title {
    font-weight: normal;
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bs-toggle-icon {
    margin-left: 10px;
}
</style>
