<template>
    <div
        class="hy-notes"
        :class="[variantParsed, borderRadiusVariant, { hideContent: loading, hasNoContent: $slots.default == undefined }]"
    >
        <div class="content">
            <slot></slot>
        </div>

        <transition name="hy-fade-transition">
            <HyLoader v-if="loading && progress == null" :width="25" :height="25" :line="3" />
        </transition>
        <transition name="hy-fade-transition">
            <HyProgressBar
                v-if="loading && isNaN(progress) == false && typeof progress == 'number'"
                :progress="progress"
                :width="progressWidth"
            />
        </transition>
    </div>
</template>

<script>
import HyLoader from "./Loader.vue";
import HyProgressBar from "./ProgressBar.vue";

export default {
    name: "HyNotes",
    props: {
        variant: {
            type: String,
            default: "note",
        },
        loading: {
            type: Boolean,
            default: false,
        },
        progress: {
            type: Number,
            default: null,
        },
        progressWidth: {
            type: String,
            default: "calc(100% - 2 * var(--hy-element-padding))",
        },
        borderRadiusVariant: {
            type: String,
            default: "section",
            validator: (value) => {
                return ["section", "element"].includes(value);
            },
        },
    },
    computed: {
        variantParsed() {
            // Filter for only ghost variants + trim "ghost" from the name
            let allowed = [
                "note",
                ...this.hy_brand_theme.availableVariants
                    .filter((v) => v.includes("ghost") && v.includes("ghost-bg") == false)
                    .map((v) => v.replace("ghost-", "")),
            ];

            let variant = this.variant ?? this.hy_defaults.variant;

            if (allowed.includes(variant)) return variant;
            else return "note";
        },
        backgroundColor() {
            if (this.variant == "note") null;
            else return `var(--hy-variant-ghost-${this.variant.replace("-bg", "")}-bg-color)`;
        },
        borderColor() {
            if (this.variant == "note") return null;
            else return `var(--hy-variant-ghost-${this.variant.replace("-bg", "")}-border-color)`;
        },
    },
    data() {
        return {};
    },
    components: {
        HyLoader,
        HyProgressBar,
    },
};
</script>

<style lang="scss">
.hy-notes {
    position: relative;
    margin: var(--hy-element-margin);
    padding: var(--hy-element-padding);
    border: var(--hy-element-border-secondary);

    // Content
    .content {
        transition: var(--hy-element-transition);
        transition-property: opacity;
        display: flex;
        justify-content: center;
        gap: var(--hy-flex-gap);
        flex-wrap: wrap;

        & > * {
            margin: 0 !important;
            flex: 1;
        }
    }

    &.hideContent > .content {
        opacity: 0;
    }

    &.hasNoContent {
        min-height: 51px; // Give it a minimum height to show the loader/progress bar
    }

    // Border radius variant
    &.section {
        border-radius: var(--hy-section-border-radius);
    }

    &.element {
        border-radius: var(--hy-element-border-radius);
    }

    // Styles
    &.note {
        background-color: var(--hy-color-gray-3);
        color: var(--hy-font-color-gray);
        border-style: dashed;
    }

    &:not(.note) {
        background-color: v-bind(backgroundColor);
        color: var(--hy-font-color-contrast);
        border-style: solid;
        border-color: v-bind(borderColor);
    }

    // Loading / Progress
    .hy-loader {
        position: absolute;
        top: calc(50% - 12.5px);
        left: calc(50% - 12.5px);
    }

    .hy-progress-bar {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>
