<template>
    <div
        class="poi"
        :class="{ active }"
        :style="pos"
        @touchstart.stop="$emit('click')"
        @click.stop="$emit('click')"
    >
        <div v-if="active" class="point-label">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'FuggerPoi360',
    props: {
        position: {
            type: Object,
            default: () => {},
        },
        active: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        pos() {
            return {
                left: this.position.x + '%',
                top: this.position.y + '%',
            }
        },
    },
}
</script>

<style lang="scss" scoped>
@import 'assets/scss/variables';
@import 'assets/scss/buttons';
@import 'assets/scss/global';

.poi {
    position: absolute;
    height: 26px;
    width: 26px;
    z-index: 99;
    background-color: rgba(255, 255, 255, 1) !important;
    border-radius: 50%;
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.5),
        1px 1px 15px 15px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, -50%);

    pointer-events: all !important;

    &.active {
        border-color: var(--primary);
        border-width: 3px;
        background-color: var(--primary) !important;
    }

    .point-label {
        position: absolute;
        background: rgba(255, 255, 255, 0.9);
        bottom: 50%;
        left: 100%;
        color: #000;
        font-size: 1.5rem;
        padding: 0.5rem 1rem;
        transform: translate(15px, 50%);
        border: 1px solid #666;
        display: flex;
        z-index: 10;
        align-items: center;
        min-width: 100px;

        &:after {
            $size: 10px;
            content: '';
            display: block;
            width: $size;
            height: $size;
            border: $size solid transparent;
            border-right-color: rgba(255, 255, 255, 1);
            position: absolute;
            left: -$size + 1px;
            top: 50%;
            z-index: 11;
            transform: translate(-50%, -50%);
        }

        &:before {
            $size: 10px;
            content: '';
            display: block;
            width: $size;
            height: $size;
            border: $size solid transparent;
            border-right-color: #666;
            position: absolute;
            left: -$size;
            top: 50%;
            z-index: 11;
            transform: translate(-50%, -50%);
        }
    }
}
</style>
