/* eslint no-unused-vars: warn */
/* eslint max-len: ["error", { "code": 160 }] */
/* eslint-disable no-trailing-spaces */
/* eslint-disable no-console */
/* eslint-env es6*/

import Debugger from './debugger';
let debug = new Debugger("p-sidebar");

export default {
    install(Vue /* ,options */) {
        Vue.component('p-sidebar', {
        props: {
            value: {
                type: Boolean,
                'default': true,
            },
            right: {
                type: Boolean,
                'default': false,
            },
            shadow: {
                type: Boolean,
                'default': false,
            },
            target: {
                type: String,
                'default': 'body',
            },
            offsetRef: {
                type: String,
                'default': '',
            }
        },
        data() {
            return {
                wrapper: null,
                contentwrapper: null,
                resizeobserver: null,
            };
        },
        computed: {
        },
        methods: {
            initWrappers(target) {
                let initializeWrapperContent = false;
                // First check if the sidebar wrapper already exists. 
                // Creating the wrappers over and over again is a recipe for disaster.
                this.wrapper = document.querySelector("#p-sidebar-wrapper");
                if (!this.wrapper) {
                    initializeWrapperContent = true;
                    // Otherwise, create it.
                    this.wrapper = document.createElement("div");
                    this.wrapper.setAttribute("id", "p-sidebar-wrapper");
                }
                // First check if the contentwrapper already exists
                this.contentwrapper = document.querySelector("#p-sidebar-contentwrapper");
                if (!this.contentwrapper) {
                    initializeWrapperContent = true;
                    // Otherwise, create it.
                    this.contentwrapper = document.createElement("div");
                    this.contentwrapper.setAttribute("id", "p-sidebar-contentwrapper");
                    this.wrapper.appendChild(this.contentwrapper);
                }

                if (initializeWrapperContent) {
                    // Find containing target (otherwise use body)
                    let targetEl = document.querySelector(target);
                        console.info(`Targeting '${target}' to `, targetEl);
                    if (!targetEl || targetEl.nodeType == "HTML") {
                        targetEl = document.querySelector("body");
                    }
                    debug.warn(`Initializing wrappers with content of target `, targetEl);
                    // Move all target content parts to content wrapper....
                    while (targetEl.childNodes.length > 0) {
                        this.contentwrapper.appendChild(targetEl.childNodes[0]);
                    }
                    // Add sidebar wrapper to target Element
                    targetEl.appendChild(this.wrapper);
                }
            
            },
            rePosition(right) {
                // Place the container elsewhere in the DOM.
                const el = this.$refs.container;
                if (right) {
                    this.wrapper.insertBefore(el, this.contentwrapper.nextSibling);
                } else {
                    this.wrapper.insertBefore(el, this.contentwrapper);
                }
            },
            setOffset(reference) {
                const ref = reference ? document.querySelector(reference) : null;
                console.info(`Setting offset from '${reference}'`, ref);
                let offsetTop = (ref ? ref.offsetTop : 0);
                offsetTop += (offsetTop != 0) ? "px" : "";
                const el = this.$refs.container;
                el.style.height = `calc( 100vh - ${offsetTop})`;
                el.style.marginTop = offsetTop;
            }

        },
        watch: {
            right(newVal) {
                this.rePosition(newVal);
            },
            offsetRef(reference) {
                this.setOffset(reference);
            }
        },
        mounted() {
            const self = this;
            const el = self.$refs.container;
            this.initWrappers(this.target);
            this.setOffset(this.offsetRef);
            this.rePosition(this.right, this.besides);
            this.resizeObserver = new ResizeObserver(() => {
                let wx = 0 - el.getBoundingClientRect().width;
                wx += (wx != 0) ? "px" : "";
                el.style.setProperty("--p-sidebar-hideoffset", wx);
            });
            this.resizeObserver.observe(el);
        },
        unmounted() {
            if (this.resizeObserver) {
                this.resizeObserver.disconnect();
            }
        },
        template: `
        <div>
            <div ref='container' 
                :class="'p-sidebar ' + (right?'p-sidebar-right ':'') + (shadow?'p-sidebar-shadow ':'') + (value?'shown ':'hidden ')"
            ><slot></slot></div>
        </div>
        `,
        });
    },
};