<template>
    <div ref="appWidget" class="appWidget" :style="[draggableStyle, sizeStyle]">
        <div ref="draggElement" :class="[draggable && 'draggElement']">
            <slot name="navbar" :class="[isDragging && 'isDragging']" />
        </div>
        <iframe class="appWidgetFrame" :src="src" frameborder="0"></iframe>
    </div>
</template>

<script>

import { defineComponent, ref, computed } from '@vue/composition-api'
import { useDraggable, useWindowSize } from '@vueuse/core'

export default defineComponent({
    name: 'AppWidget',
    props: {
        /**
         * @description Alias de la aplicación en Fieldeas
         */
        alias: String,
        /**
         * @description Ruta dentro de la aplicación
         */
        path: {
            type: String,
            default: ""
        },
        /**
         * @description URL completa que sustituye a alias y path
         */
        url: String,
        /**
         * @description Alto del widget en px
         */
        height: {
            type: Number,
            default: 350
        },
        /**
         * @description Ancho del widget en px
         */
        width: {
            type: Number,
            default: 350
        },
        /**
         * @description Habilita la opción de arrastrar el widget desde el slot 'navbar'
         */
        draggable: {
            type: Boolean,
            default: true
        },
    },
    setup(props, { slots }) {

        const { width: windowWidth, height: windowHeight } = useWindowSize()

        const appWidget = ref(null)
        const draggElement = ref(null)

        const { x, y, isDragging } = useDraggable(appWidget, {
            initialValue: { x: windowWidth.value - props.width - 10, y: windowHeight.value - props.height - 10 },
            draggingElement: props.draggable ? draggElement : null
        })

        const draggableStyle = computed(() => {

            if (!draggElement || !slots.navbar || !props.draggable) {
                return {
                    left: `${windowWidth.value - props.width - 10}px`,
                    top: `${windowHeight.value - props.height - 10}px`
                }
            }

            return {
                left: x.value + props.width > windowWidth.value - 10 ? `${windowWidth.value - props.width - 10}px` : `${x.value}px`,
                top: y.value + props.height > windowHeight.value - 10 ? `${windowHeight.value - props.height - 10}px` : `${y.value}px`,
            }
        })

        const sizeStyle = {
            width: `${props.width}px`,
            minWidth: `${props.width}px`,
            height: `${props.height}px`,
            minHeight: `${props.height}px`
        }

        const src = props.url || location.origin + location.pathname + "?Alias=" + props.alias + props.path

        return {
            appWidget,
            draggElement,
            draggableStyle,
            isDragging,
            sizeStyle,
            src
        }
    }
})
</script>
<style scoped lang="scss">
.appWidget {
    border: 2px solid black;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

    touch-action: none;
    position: fixed;
    user-select: none;

    background-color: #212121;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.draggElement {
    cursor: move;

    .isDragging {
        // padding: 200px;
    }
}

.appWidgetFrame {
    width: 100%;
    height: 100%;
}
</style>