<template>
    <div class="tooltip__wrapper">
        <div class="tooltip__activator">
            <slot name="activator"></slot>
        </div>
        <div :class="tooltipClass">
            <div class="tooltip__content">
                <slot></slot>
            </div>
            <div class="tooltip__arrow">
                <ArrowIcon ignoreWhite :icon-color="themeVariables.$gray700" hoHover/>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {
        POSITION_BOTTOM,
        POSITION_BOTTOM_LEFT,
        POSITION_BOTTOM_RIGHT,
        POSITION_LEFT,
        POSITION_RIGHT,
        POSITION_TOP,
        POSITION_TOP_LEFT,
        POSITION_TOP_RIGHT,
        TOOLTIP_CLASS, TOOLTIP_FIXED_WIDTH_CLASS,
    } from "./constants";
    import ArrowIcon from "../icons/ArrowIcon.vue";
    // @ts-ignore
    import themeVariables from "../../assets/scss/colors.scss";

    export default Vue.extend({
        components: {
            ArrowIcon,
        },
        props: {
            position: {
                type: String,
                default: POSITION_RIGHT,
                validator(value: string): boolean {
                    return [
                        POSITION_TOP,
                        POSITION_TOP_LEFT,
                        POSITION_TOP_RIGHT,
                        POSITION_BOTTOM,
                        POSITION_BOTTOM_LEFT,
                        POSITION_BOTTOM_RIGHT,
                        POSITION_LEFT,
                        POSITION_RIGHT,
                    ].indexOf(value) !== -1;
                },
            },
            fixedWidth: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                themeVariables: themeVariables,
            };
        },
        computed: {
            tooltipClass(): object {
                return {
                    [TOOLTIP_CLASS]: true,
                    [TOOLTIP_FIXED_WIDTH_CLASS]: this.fixedWidth,
                    [POSITION_TOP]: this.position === POSITION_TOP,
                    [POSITION_TOP_LEFT]: this.position === POSITION_TOP_LEFT,
                    [POSITION_TOP_RIGHT]: this.position === POSITION_TOP_RIGHT,
                    [POSITION_BOTTOM]: this.position === POSITION_BOTTOM,
                    [POSITION_BOTTOM_LEFT]: this.position === POSITION_BOTTOM_LEFT,
                    [POSITION_BOTTOM_RIGHT]: this.position === POSITION_BOTTOM_RIGHT,
                    [POSITION_LEFT]: this.position === POSITION_LEFT,
                    [POSITION_RIGHT]: this.position === POSITION_RIGHT,
                };
            },
        },
        watch: {},
        methods: {},
    });
</script>

<style scoped lang="scss">
    @import "tooltip";

    .tooltip__wrapper {
        margin: 100px;
    }
</style>
