<!--
    Describe this component...
-->
<template>
    <div :class="bem()">
        <div :class="bem('selector-container', {})" :style="selectorStyle">
            <div :class="[bem('selector'), selectorClass]"></div>
        </div>
        <slot />
    </div>
</template>

<script>
import PxBaseResize from '../bases/PxBaseResize.vue';
import { getClientRect } from '../utils/utils';

export default {
    name: 'px-selection-bar',
    // components: { Component },
    mixins: [PxBaseResize],
    props: {
        // above, below, start | left, end | right
        placement: { type: String, default: 'below' },

        selectorClass: { type: String, default: null },

        selectedSelector: { type: String, default: '[data-selected]' },

        selectorThickness: { type: Number, default: 2 },

        // used only to create a watcher for when selection changes, the actual placement of the
        // selection is handled by finding the selected element using selectedSelector
        selectedIndex: { type: Number, default: null },
    },
    data() {
        return { selectionOffset: 0, selectionSize: 100 };
    },
    computed: {
        calcPlacement() {
            if (this.placement == 'start' || this.placement == 'left') {
                return 'start';
            } else if (this.placement == 'end' || this.placement == 'right') {
                return 'end';
            } else {
                return this.placement;
            }
        },
        isHorizontal() {
            return this.calcPlacement == 'above' || this.calcPlacement == 'below';
        },
        isVertical() {
            return !this.isHorizontal;
        },
        selectorStyle() {
            const style = {};

            style[this.isHorizontal ? 'left' : 'top'] = this.cssPx(this.selectionOffset);
            style[this.isHorizontal ? 'width' : 'height'] = this.cssPx(this.selectionSize);

            if (this.isHorizontal) {
                style.top = this.calcPlacement == 'above' ? 0 : 'auto';
                style.bottom = this.calcPlacement == 'below' ? 0 : 'auto';
                style.height = this.cssPx(this.selectorThickness);
            } else {
                style.left = this.calcPlacement == 'start' ? 0 : 'auto';
                style.right = this.calcPlacement == 'end' ? 0 : 'auto';
                style.width = this.cssPx(this.selectorThickness);
            }

            return style;
        },
    },
    watch: {
        selectionPlacement() {
            this.$nextTick(() => {
                this.updateSelection();
            });
        },
        selectedIndex() {
            this.$nextTick(() => {
                this.updateSelection();
            });
        },
    },
    mounted() {
        this.updateSelection();
    },
    methods: {
        resize() {
            this.updateSelection();
        },

        updateSelection() {
            const selected = this.$el.querySelector(this.selectedSelector);
            if (selected) {
                const rect = getClientRect(selected, this.$el);
                //const rect = selected.getBoundingClientRect();
                if (this.isHorizontal) {
                    this.selectionOffset = rect.left;
                    this.selectionSize = rect.width;
                } else {
                    this.selectionOffset = rect.top;
                    this.selectionSize = rect.height;
                }
            }
        },
    },
};
</script>

<style lang="scss">
@use '../styles/px.scss' as *;
.px-selection-bar {
    position: relative;
    width: 100%;
    height: 100%;

    &__selector-container {
        position: absolute;
        @include transition(top left width height);
    }

    &__selector {
        @include abs();
        background-color: currentColor;
    }
}
</style>
