<template>
    <div class="hy-tooltip">
        <hy-popover v-model="visible" v-bind="popoverOptions">
            <template #header v-if="$slots.header">
                <slot name="header"></slot>
            </template>

            <template #content>
                <slot></slot>
                <slot name="content"></slot>
            </template>

            <template #footer v-if="$slots.footer">
                <slot name="footer" />
            </template>
        </hy-popover>
    </div>
</template>

<script>
import Popover from "./Popover.vue";

export default {
    name: "HyTooltip",
    props: {
        reference: {
            type: [HTMLElement, String, Object],
            default: null,
        },
        hoverDelay: {
            type: Number,
            default: 500,
        },
        minWidth: {
            type: String,
            default: "0",
        },
        maxWidth: {
            type: String,
            default: "unset",
        },
        maxHeight: {
            type: String,
            default: "unset",
        },
        variant: {
            type: String,
            default: "match",
            validator(value) {
                return ["match", "contrast"].includes(value);
            },
        },
        zIndex: {
            type: Number,
            default: 10,
        },
        placement: {
            type: String,
            default: "bottom",
        },
        offsetMainAxis: {
            type: Number,
            default: 15,
        },
        offsetCrossAxis: {
            type: Number,
            default: 0,
        },
        headline: {
            type: String,
            default: null,
        },
        description: {
            type: String,
            default: null,
        },
    },
    data() {
        return {
            visible: false,
        };
    },
    computed: {
        popoverOptions() {
            return {
                reference: this.reference,
                doOpenOnHover: true,
                hoverDelay: this.hoverDelay,
                hideOnClickOutside: false,
                minWidth: this.minWidth,
                maxWidth: this.maxWidth,
                maxHeight: this.maxHeight,
                variant: this.variant,
                zIndex: this.zIndex,
                placement: this.placement,
                offsetMainAxis: this.offsetMainAxis,
                offsetCrossAxis: this.offsetCrossAxis,
                headline: this.headline,
                description: this.description,
            };
        },
    },
    components: {
        Popover,
    },
};
</script>

<style lang="scss">
.hy-tooltip {
}
</style>
