<template>
    <section class="hy-sub-section" :class="{ collapsable: collapsable_, collapsed: collapsed_ }">
        <div
            id="titleContainer"
            v-if="title || collapsable_"
            @click="if (collapsable_) $emit('update:modelValue', !modelValue);"
        >
            <h4 id="title" v-if="title">{{ title }}</h4>

            <span class="chevron" v-if="collapsable_">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000" width="16" height="16">
                    <path
                        d="M102.406+249.281C80.8052+248.6+59.077+257.194+43.6875+274.688C16.3284+305.787+19.3688+353.203+50.4688+380.562L450.062+732.062C478.366+756.962+520.734+756.995+549.062+732.125L949.469+380.594C980.596+353.266+983.703+305.878+956.375+274.75C929.047+243.622+881.659+240.547+850.531+267.875L499.656+575.906L149.531+267.938C135.925+255.968+119.207+249.811+102.406+249.281Z"
                    />
                </svg>
            </span>
        </div>

        <p id="pre" v-if="pre && collapsed_ == false">{{ pre }}</p>

        <slot v-if="collapsed_ == false" />

        <p id="post" v-if="post && collapsed_ == false">{{ post }}</p>
    </section>
</template>

<script>
export default {
    name: "HySubSection",
    props: {
        title: {
            type: String,
            default: null,
        },
        pre: {
            type: String,
            default: null,
        },
        post: {
            type: String,
            default: null,
        },
        modelValue: {
            type: Boolean,
            default: null,
        },
    },
    computed: {
        collapsable_() {
            if (this.modelValue != true && this.modelValue != false) return false;
            if (this.title == null) return false;

            return true;
        },
        collapsed_() {
            if (this.collapsable_ == false) return false;
            return this.modelValue;
        },
    },
};
</script>

<style lang="scss">
.hy-sub-section {
    background-color: var(--hy-color-gray-3);
    border-radius: var(--hy-element-border-radius);
    margin: var(--hy-element-margin);
    padding: var(--hy-element-padding);

    #titleContainer {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;

        #title {
            flex: 1;
        }

        .chevron {
            place-items: center;
            margin: 0;
            fill: var(--hy-font-color-contrast);
            rotate: -180deg;
            transition: var(--hy-element-transition);
            transition-property: rotate;
            display: none;
            height: 23px; // line height font-size
        }
    }

    #title,
    #pre,
    #post {
        margin: 0 !important;
    }

    #pre,
    #post {
        font-size: var(--hy-font-size-small);
        color: var(--hy-font-color-gray);
    }

    & > *:first-child {
        margin-top: 0;
    }

    & > *:last-child {
        margin-bottom: 0;
    }

    &.collapsable {
        #titleContainer {
            cursor: pointer;

            .chevron {
                display: grid;
            }
        }
    }

    &.collapsed {
        #titleContainer .chevron {
            rotate: -90deg;
        }
    }
}
</style>
