Floater (extends KompElement)

import { computePosition, offset, flip, shift, arrow, size, autoPlacement, inline, autoUpdate } from '@floating-ui/dom';
import { css, createElement } from 'dolla';

import KompElement from './element.js';

class Floater extends KompElement {
    static tagName = 'komp-floater';
    
    static assignableAttributes = {
        content: null,
        anchor: null,
        placement: undefined,
        strategy: 'absolute',
        flip: null,
        offset: null,
        shift: true,
        arrow: null,
        autoPlacement: true,
        inline: null,
        autoUpdate: {},
        removeOnBlur: false,
        container: null,
        timeout: 0,
        onHide: null,
        onShow: null,
        scope: null
    }
    static bindMethods = ['show', 'hide', 'checkFocus', 'checkEscape']
    static middlewares = {
        size: size,
        shift: shift,
        autoPlacement: autoPlacement,
        flip: flip,
        inline: inline,
        arrow: arrow,
        offset: offset
    }
    
    showing = false
    
    initialize () {
        super.initialize()
        if (typeof this.anchor == "string") {
            this.anchor = this.getRootNode().querySelector(this.anchor);
        } else if (!(this.anchor instanceof Element)) {
            const coords = this.anchor
            this.anchor = {
                getBoundingClientRect() {
                    return {
                        width: 0,
                        height: 0,
                        x: coords.x,
                        y: coords.y,
                        left: coords.x,
                        right: coords.x,
                        top: coords.y,
                        bottom: coords.y
                    };
                }
            }
        }
        
        this.middleware = []
        Object.keys(this.constructor.middlewares).forEach(key => {
            if (this[key]) {
                if (key == "arrow") {
                    this.classList.add('komp-floater-arrow')
                    this.middleware.push(arrow({element: this.initializeArrow()}))
                } else {
                    this.middleware.push(this.constructor.middlewares[key](this[key] === true ? {} : this[key]))
                }
            }
        })
    }

    connected () {
        this.style.position = this.strategy
        
        if (!this.anchor) { throw 'Floater needs anchor to position to.' }
        
        this._cleanupCallbacks.push(autoUpdate(
            this.anchor,
            this,
            this.updatePosition.bind(this),
            this.autoUpdate
        ))
        
        this.classList.add('-in')
        this.addEventListener('animationend', () => {
            this.classList.remove('-in')
        }, {once: true})
        
        if (this.removeOnBlur) {
            this.cleanupEventListenerFor(this.getRootNode().body, 'focusin', this.checkFocus)
            this.cleanupEventListenerFor(this.getRootNode().body, 'click', this.checkFocus)
            this.cleanupEventListenerFor(this.getRootNode().body, 'keyup', this.checkEscape)
        }
    }
    
    initializeArrow () {
        if (this.querySelector('komp-floater-arrow-locator')) {
            return this.querySelector('komp-floater-arrow-locator')
        }
        
        const el = createElement('komp-floater-arrow-locator')
        this.prepend(el)
        if (typeof this.arrow == "number") {
            this.style.setProperty('--arrow-size', this.arrow + "px")
        } 
        if (!this.offset) {
            this.offset = this.arrow === true ? 10 : this.arrow
        }
        if (css(this, 'box-shadow') != "none") {
            this.style.filter = css(this, 'box-shadow').split(/(?<!\([^\)]*),/).map(shadow => {
                return `drop-shadow(${shadow.trim().split(/(?<!\([^\)]*)\s/).slice(0,4).join(" ")})`
            }).join(" ")
            this.style.boxShadow = 'none'
        }
        
        return el
    }
    
    updatePosition () {
        computePosition(this.anchor, this, {
            strategy: this.strategy,
            placement: this.placement,
            middleware: this.middleware,
        }).then(this.computePosition.bind(this))
    }
    
    computePosition({x, y, placement, middlewareData, ...args}) {
        this.style.left = `${x}px`;
        this.style.top = `${y}px`;
        this.classList.remove('-top', '-left', '-bottom', '-right')
        this.classList.add('-' + placement.split('-')[0]);

        if (middlewareData.arrow) {
            const {x, y} = middlewareData.arrow;
            if (x != null) {
                this.style.setProperty('--arrow-left', `${x}px`)
                this.querySelector('komp-floater-arrow-locator').style.setProperty('left', `${x}px`)
            }
            if (y != null) {
                this.style.setProperty('--arrow-top', `${y}px`)
                this.querySelector('komp-floater-arrow-locator').style.setProperty('top', `${x}px`)
            }
        }
    }
    
    checkFocus (e) {
        if (e.defaultPrevented) { return }
        if (e.target == this) { return }
        if (e.target == this.anchor) { return }
        if (this.contains(e.target)) { return }
        if (this.anchor.contains && this.anchor.contains(e.target)) { return }
        this.hide()
    }
    
    checkEscape (e) {
        if (e.which != 27) return;
        this.hide();
    }
    
    remove () {
        return new Promise(resolve => {
            this.classList.add('-out')
        
            const done = () => {
                this.classList.remove('-out')
                super.remove().then(resolve)
            }
            if (css(this, 'animation-name') != "none") {
                this.addEventListener('animationend', done, {once: true})
            } else {
                done()
            }
        })
    }
    
    show () {
        if (this._hideTimeout) {
            clearTimeout(this._hideTimeout);
            delete this._hideTimeout;
        }
        if (this._removing) {
            return this._removing.then(this.show)
        }
        if (typeof this.container == "string") {
            this.container = this.closest(this.container) || (this.anchor.closest && this.anchor.closest(this.container))
        }
        if (this.container == null) {
            this.container = this.parentElement || this.anchor.parentElement;
        }
        if (!this.parentElement) {
            this.showing = true
            if (this.onShow && this.onShow() == false) return

            if (this.scope) {
                if (!window.activeTooltips) window.activeTooltips = {}
                if (window.activeTooltips[this.scope] && window.activeTooltips[this.scope] != this) {
                    window.activeTooltips[this.scope].hideNow()
                }
                window.activeTooltips[this.scope] = this
            }
            this.container.append(this)
            this.trigger('shown')
        }
        return this;
    }
    
    hideNow () {
        this.hideAfterTimeout()
    }
    
    hide () {
        if (this._hideTimeout) { return }
        if (this._hiding) { return }
        
        return new Promise(resolve => {
            this._hideTimeout = setTimeout(() => {
                this.hideAfterTimeout()
                resolve()
            }, this.timeout)
        })
    }
    
    hideAfterTimeout () {
        if (this.parentElement) {
            return this._removing = this.remove().then(() => {
                this.showing = false
                this.trigger('hidden')
                if (this.onHide) this.onHide()
                delete this._hideTimeout;
                delete this._removing;
            })
        }
        return this;
    }
    
    toggle (shouldHide) {
        if (typeof shouldHide !== 'boolean') {
            shouldHide = this.offsetParent !== null
        }
        this[shouldHide ? 'hide' : 'show']()
        return this;
    }
    
    static style = `
        .komp-floater-arrow {
            --arrow-size: 0.5em;
            --arrow-left: 0;
            --arrow-top: 0;
        }
        .komp-floater-arrow:after{
            content: '';
            clip-path: polygon(0 0, 50% 100%, 100% 0);
            z-index: 1;
            position:absolute;
            top: calc(var(--arrow-top) - var(--arrow-size));
            left: calc(var(--arrow-left) - var(--arrow-size));
            width: calc(var(--arrow-size) * 2);
            height: var(--arrow-size);
            overflow: hidden;
            border-style: solid;
            border-width: inherit;
            box-shadow: inherit;
            background: inherit;
            border: inherit;
        }
        .komp-floater-arrow.-top:after{
            top: 100%;
        }
        .komp-floater-arrow.-bottom:after{
            top: auto;
            bottom: 100%;
            transform: rotate(180deg);
        }
        .komp-floater-arrow.-left:after,
        .komp-floater-arrow.-right:after {
            clip-path: polygon(0 0, 100% 50%, 0 100%);
            width: var(--arrow-size);
            height: calc(var(--arrow-size) * 2);
        }
        .komp-floater-arrow.-left:after{
            left: 100%;
        }
        .komp-floater-arrow.-right:after{
            left: auto;
            right: 100%;
            transform: rotate(180deg);
        }
        komp-floater-arrow-locator {
            position: absolute;
            left: 0;
            top: 0;
            width: var(--arrow-size, 1px);
            height: var(--arrow-size, 1px);
        }
    `
}
if (!window.customElements.get('komp-floater')) {
window.customElements.define('komp-floater', Floater);
}