<template>
    <div class="popover__wrapper" v-click-outside="hidePopover">
        <div class="popover__activator" @click="showPopover" v-if="!!$slots.activator">
            <slot name="activator"></slot>
        </div>
        <div :class="popoverClass" v-if="isVisible">
            <div class="popover__header">
                <div class="popover__title">
                    <slot name="title"></slot>
                </div>
                <div class="popover__cross" @click="hidePopover">
                    <CrossIcon/>
                </div>
            </div>
            <div class="popover__content">
                <slot></slot>
            </div>
            <div class="popover__arrow">
                <ArrowIcon noHover :icon-color="themeVariables.gray30"/>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from "vue";
    import vClickOutside from 'v-click-outside';
    import {
        POPOVER_CLASS,
        POSITION_BOTTOM,
        POSITION_BOTTOM_LEFT,
        POSITION_BOTTOM_RIGHT,
        POSITION_LEFT,
        POSITION_LEFT_BOTTOM,
        POSITION_LEFT_TOP,
        POSITION_RIGHT,
        POSITION_RIGHT_BOTTOM,
        POSITION_RIGHT_TOP,
        POSITION_TOP,
        POSITION_TOP_LEFT,
        POSITION_TOP_RIGHT,
    } from "./constants";
    import ArrowIcon from "../icons/ArrowIcon.vue";
    // @ts-ignore
    import themeVariables from "../../assets/scss/colors.scss";
    import CrossIcon from "../../components/icons/CrossIcon.vue";

    export default Vue.extend({
        name: "Popover",
        components: {
            ArrowIcon,
            CrossIcon,
        },
        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_LEFT_TOP,
                        POSITION_LEFT_BOTTOM,
                        POSITION_RIGHT,
                        POSITION_RIGHT_TOP,
                        POSITION_RIGHT_BOTTOM,
                    ].indexOf(value) !== -1;
                },
            },
        },
        directives: {
            clickOutside: vClickOutside.directive,
        },
        data() {
            return {
                isVisible: false,
                themeVariables: themeVariables,
            };
        },
        computed: {
            popoverClass(): object {
                return {
                    [POPOVER_CLASS]: true,
                    [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_LEFT_TOP]: this.position === POSITION_LEFT_TOP,
                    [POSITION_LEFT_BOTTOM]: this.position === POSITION_LEFT_BOTTOM,
                    [POSITION_RIGHT]: this.position === POSITION_RIGHT,
                    [POSITION_RIGHT_TOP]: this.position === POSITION_RIGHT_TOP,
                    [POSITION_RIGHT_BOTTOM]: this.position === POSITION_RIGHT_BOTTOM,
                };
            },
        },
        methods: {
            showPopover(): void {
                this.isVisible = true;
            },
            hidePopover(): void {
                this.isVisible = false;
            },
        },
    });
</script>

<style scoped lang="scss">
    @import "popover";
</style>
