<template>
    <div
        class="bs-warning bs-font-medium-2-semi-bold"
        :class="warningType"
        v-if="!hidden"
    >
        <BsIcon :name="iconName" :alt="iconAlt" size="20px" style="align-self: flex-start;" />
        <div class="bs-warning-text-container">
            {{ text }}
            <slot></slot>
        </div>
        <BsIcon
            name="close"
            alt="close message button"
            size="20px"
            v-if="closable"
            @click="hide"
            style="cursor: pointer"
        />
    </div>
</template>

<script lang="ts">
import { BsIcon  } from "quasar-ui-bs";
import { defineComponent } from "vue";

export default defineComponent({
    name: "BsWarning",
    props: {
        text: String,
        warningType: {
            type: String,
            default: "info", // default type is set to 'info'
        },
        closable: {
            type: Boolean,
            default: false,
        },
    },
    components: { BsIcon },
    data() {
        return { hidden: false };
    },
    computed: {
        iconName(): string {
            switch (this.warningType) {
                case "info":
                    return "mdi-information-outline";
                case "error":
                    return "mdi-close-circle-outline";
                case "success":
                    return "check";
                case "warning":
                    return "mdi-alert";
                default:
                    return "";
            }
        },
        iconAlt(): string {
            return this.warningType + " icon";
        },
    },
    methods: {
        hide() {
            this.hidden = true;
        },
    },
});
</script>

<style scoped>
.bs-warning {
    display: flex;
    max-width: 70%;
    justify-content: space-between;
    /* width: 100%; */
    padding: var(--bs-spacing-3, 12px) var(--bs-spacing-4, 16px);
    align-items: center;
    gap: var(--bs-spacing-2, 8px);
}

.bs-warning.info {
    color: var(--information-bs-color-information, #27468e);
    border-left: 4px solid var(--information-bs-color-information, #27468e);
    background-color: var(
        --information-bs-color-information-background,
        #d6e1fe
    );
}
.bs-warning-text-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: var(--bs-spacing-2, 8px);
}
.bs-warning.success {
    color: var(--status-bs-color-status-success, #0b590b);
    border-left: 4px solid var(--status-bs-color-status-success, #0B590B);
    background-color: rgba(0, 128, 0, 0.1);
}

.bs-warning.error {
    color: var(--status-bs-color-status-error, #ce1228);
    border-left: 4px solid var(--status-bs-color-status-error, #CE1228);
    background-color: rgba(233, 65, 43, 0.1);
}
.bs-warning.warning {
    color: var(--status-bs-color-status-warning, #A64D06);
    border-left: 4px solid var(--status-bs-color-status-warning, #A64D06);
    background-color: var(--status-bs-color-status-warning-background, #FDE5CA);
}
</style>
