<template>
    <div
        class="poi d-flex"
        :class="[
            active,
            bgcolor,
            iconpos === 'left' ? '' : 'flex-row-reverse right',
        ]"
        :style="pos"
        @click="$emit('click')"
    >
        <div
            class="icon-wrap d-flex justify-content-center align-items-center"
            :class="iconbg"
        >
            <fugger-icons
                :width="30"
                :height="30"
                :primary="isPrimaryColor"
                :name="iconname"
            />
        </div>
        <div class="label d-flex font-primary align-items-center">
            <slot><p>Frauenvorstadt</p></slot>
        </div>
    </div>
</template>

<script>
import FuggerIcons from './FuggerIcons.vue'

export default {
    name: 'FuggerPoi',
    components: {
        FuggerIcons,
    },
    props: {
        position: {
            type: Object,
            default: () => {},
        },
        active: {
            type: Boolean,
            default: false,
        },
        iconname: {
            type: String,
            default: 'pin-icon',
        },
        iconbg: {
            type: String,
            default: 'white',
        },
        iconpos: {
            type: String,
            default: 'left',
        },
        bgcolor: {
            type: String,
            default: '',
        },
    },
    computed: {
        isPrimaryColor() {
            if (this.iconbg === 'white') {
                return true
            }
            return false
        },
        pos() {
            return {
                left: this.position ? this.position.x + '%' : '',
                top: this.position ? this.position.y + '%' : '',
                position: this.position ? 'absolute' : 'relative',
            }
        },
    },
}
</script>

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

.poi {
    transition: all 0.25s ease-in-out;
    height: calc(46vw * var(--pxToVw));
    width: fit-content;
    z-index: 99;
    pointer-events: all;
    background-size: 100% 100%;
    background: radial-gradient(
        circle at calc(23vw * var(--pxToVw)),
        transparent calc(23vw * var(--pxToVw)),
        white calc(0vw * var(--pxToVw))
    );
    border-radius: calc(23vw * var(--pxToVw)) 0 0 calc(23vw * var(--pxToVw));
    transform: translateX(calc(-23vw * var(--pxToVw)));

    &.right {
        transform: translateX(calc(-100% + 23vw * var(--pxToVw)));
        background: radial-gradient(
            circle at calc(100% - 23vw * var(--pxToVw)),
            transparent calc(23vw * var(--pxToVw)),
            white calc(0vw * var(--pxToVw))
        );
        border-radius: 0 calc(23vw * var(--pxToVw)) calc(23vw * var(--pxToVw)) 0;
    }

    .icon-wrap {
        height: calc(46vw * var(--pxToVw));
        width: calc(46vw * var(--pxToVw));
        border-radius: 100%;
        border: calc(3vw * var(--pxToVw)) solid white;
        &.blue {
            background-color: var(--primary);
            border: 0;
        }

        &.white {
            background-color: white;
            border: 0;
        }
    }
    .label {
        padding-left: calc(9vw * var(--pxToVw));
        padding-right: calc(9vw * var(--pxToVw));
        p {
            margin: 0;
        }
    }

    &:active {
        border: none;
        svg {
            fill: var(--primary-active);
        }
        background: radial-gradient(
            circle at calc(23vw * var(--pxToVw)),
            transparent calc(23vw * var(--pxToVw)),
            var(--primary-active) calc(0vw * var(--pxToVw))
        );
        &.right {
            background: radial-gradient(
                circle at calc(100% - 23vw * var(--pxToVw)),
                transparent calc(23vw * var(--pxToVw)),
                var(--primary-active) calc(0vw * var(--pxToVw))
            );
        }
        .icon-wrap {
            border: calc(3vw * var(--pxToVw)) solid var(--primary-active);
            &.blue {
                background-color: var(--primary-active);
            }
            &.white {
                background-color: var(--primary-active);
            }
        }
        .label {
            background-color: var(--primary-active);

            p {
                color: #fff;
            }
        }
    }
}
</style>
