DOM mixin

import { constructors, artefact } from '../core/library.js';
import { mergeOver, pushUnique, removeItem, isa_obj, isa_dom, isa_quaternion, xt, xta, λnull, Ωempty, isa_fn } from '../core/utilities.js';
import { uiSubscribedElements, currentCorePosition, applyCoreResizeListener, addLocalMouseMoveListener, removeLocalMouseMoveListener } from '../core/userInteraction.js';
import { addDomShowElement, setDomShowRequired, domShow } from '../core/document.js';

import { makeQuaternion, requestQuaternion, releaseQuaternion } from '../factory/quaternion.js';

import positionMix from '../mixin/position.js';
import deltaMix from './delta.js';
import pivotMix from './pivot.js';
import mimicMix from './mimic.js';
import pathMix from './path.js';
import anchorMix from '../mixin/anchor.js';

export default function (P = Ωempty) {

    P = positionMix(P);
    P = deltaMix(P);
    P = pivotMix(P);
    P = mimicMix(P);
    P = pathMix(P);
    P = anchorMix(P);

    let defaultAttributes = {

        domElement: '',

        pitch: 0,
        yaw: 0,

        offsetZ: 0,

        css: null,

        classes: '',

        position: 'absolute',

        smoothFont: true,

        checkForResize: false,

        trackHere: '',

        activePadding: 5,

        includeInTabNavigation: false,

        moreContrastAction: null,
        otherContrastAction: null,
        reduceMotionAction: null,
        noPreferenceMotionAction: null,
        colorSchemeLightAction: null,
        colorSchemeDarkAction: null,
        reduceTransparencyAction: null,
        noPreferenceTransparencyAction: null,
        reduceDataAction: null,
        noPreferenceDataAction: null,
    };
    P.defs = mergeOver(P.defs, defaultAttributes);

    P.packetExclusions = pushUnique(P.packetExclusions, ['domElement', 'pathCorners', 'rotation']);
    P.packetFunctions = pushUnique(P.packetFunctions, ['onEnter', 'onLeave', 'onDown', 'onUp']);

    P.processDOMPacketOut = function (key, value, includes) {

        return this.processFactoryPacketOut(key, value, includes);
    };

    P.processFactoryPacketOut = function (key, value, includes) {

        let result = true;

        if(includes.indexOf(key) < 0 && value === this.defs[key]) result = false;

        return result;
    };

    P.finalizePacketOut = function (copy, items) {

        if (isa_dom(this.domElement)) {

            let el = this.domElement;

            let mynode = el.cloneNode(true);

            let kids = mynode.querySelectorAll('[data-scrawl-corner-div="sc"]');
            kids.forEach(kid => mynode.removeChild(kid));

            copy.outerHTML = mynode.outerHTML;
            copy.host = el.parentElement.id;
        }

        copy = this.handlePacketAnchor(copy, items);

        return copy;
    };

    P.postCloneAction = function(clone, items) {

        if (this.onEnter) clone.onEnter = this.onEnter;
        if (this.onLeave) clone.onLeave = this.onLeave;
        if (this.onDown) clone.onDown = this.onDown;
        if (this.onUp) clone.onUp = this.onUp;

        return clone;
    };

    let S = P.setters,
        D = P.deltaSetters;

S.trackHere = function(val) {

    if (xt(val)) {

        if (val) {

            pushUnique(uiSubscribedElements, this.name);

            if (val === 'local') addLocalMouseMoveListener(this);
        }
        else {

            removeItem(uiSubscribedElements, this.name);
            removeLocalMouseMoveListener(this);
        }
        this.trackHere = val;
    }
};

    S.position = function (item) {

        this.position = item;
        this.dirtyPosition = true;
    };

    S.smoothFont = function (item) {

        this.smoothFont = item;
        this.dirtySmoothFont = true;
    };

    S.visibility = function (item) {

        this.visibility = item;
        this.dirtyVisibility = true;
    };

    S.offsetZ = function (item) {

        this.offsetZ = item;
        this.dirtyOffsetZ = true;
    };

    D.offsetZ = function (item) {

        this.offsetZ += item;
        this.dirtyOffsetZ = true;
    };

    S.roll = function (item) {

        this.roll = this.checkRotationAngle(item);
        this.dirtyRotation = true;
    };
    D.roll = function (item) {

        this.roll = this.checkRotationAngle(this.roll + item);
        this.dirtyRotation = true;
    };

    S.pitch = function (item) {

        this.pitch = this.checkRotationAngle(item);
        this.dirtyRotation = true;
    };
    D.pitch = function (item) {

        this.pitch = this.checkRotationAngle(this.pitch + item);
        this.dirtyRotation = true;
    };

    S.yaw = function (item) {

        this.yaw = this.checkRotationAngle(item);
        this.dirtyRotation = true;
    };
    D.yaw = function (item) {

        this.yaw = this.checkRotationAngle(this.yaw + item);
        this.dirtyRotation = true;
    };

    S.css = function (item) {

        this.css = (this.css) ? mergeOver(this.css, item) : item;

        this.dirtyCss = true;
    };

    S.classes = function (item) {

        this.classes = item;

        this.dirtyClasses = true;
    };

    S.domAttributes = function (item) {

        this.updateDomAttributes(item);
    };

    S.includeInTabNavigation = function (item) {

        const el = this.domElement;

        if (el) {

            this.includeInTabNavigation = item;

            if (item) el.setAttribute('tabindex', 0);
            else el.setAttribute('tabindex', -1);
        }
    };

    P.checkRotationAngle = function (angle) {

        if (angle < -180 || angle > 180) {
            angle += (angle > 0) ? -360 : 360;
        }

        return angle;
    };

    P.updateDomAttributes = function (items, value) {

        if (this.domElement) {

            let el = this.domElement;

            if (items.substring && xt(value)) {

                if (value) el.setAttribute(items, value);
                else el.removeAttribute(items);
            }
            else if (isa_obj(items)) {

                Object.entries(items).forEach(([item, val]) => {

                    if (val) el.setAttribute(item, val);
                    else el.removeAttribute(item);
                });
            }
        }
        return this;
    };

    P.initializeDomLayout = function (items) {

        let el = items.domElement,
            elStyle = el.style;

        elStyle.boxSizing = 'border-box';

        if (el && items.setInitialDimensions) {

            let dims = el.getBoundingClientRect(),
                trans = el.style.transform,
                transOrigin = el.style.transformOrigin,
                host = false,
                hostDims;

            if (items && items.host) {

                host = items.host;

                if (host.substring && artefact[host]) host = artefact[host];
            }

            this.currentDimensions[0] = dims.width;
            this.currentDimensions[1] = dims.height;
            items.width = dims.width;
            items.height = dims.height;

            if (el.className) items.classes = el.className;

            if (host && host.domElement) {

                hostDims = host.domElement.getBoundingClientRect();

                if (hostDims) {

                    items.startX = dims.left - hostDims.left;
                    items.startY = dims.top - hostDims.top;
                }
            }

            if (this.type === 'Stack') {

                if (!xt(items.perspective) && !xt(items.perspectiveZ)) {

                    items.perspectiveZ = (xt(elStyle.perspective) && elStyle.perspective) ? parseFloat(elStyle.perspective) : 0;
                }

                let perspectiveOrigin = elStyle.perspectiveOrigin;

                if (perspectiveOrigin.length) {

                    perspectiveOrigin = perspectiveOrigin.split(' ');

                    if (perspectiveOrigin.length > 0 && !xt(items.perspective) && !xt(items.perspectiveX)) items.perspectiveX = perspectiveOrigin[0];

                    if (!xt(items.perspective) && !xt(items.perspectiveY)) {

                        if (perspectiveOrigin.length > 1) items.perspectiveY = perspectiveOrigin[1];
                        else items.perspectiveY = perspectiveOrigin[0];
                    }
                }
            }
        }
    };

    P.addClasses = function (item) {

        if (item.substring) {

            let classes = this.classes;

            classes += ` ${item}`;
            classes = classes.trim();
            classes = classes.replace(/[\s\uFEFF\xA0]+/g, ' ');

            if (classes !== this.classes) {

                this.classes = classes;
                this.dirtyClasses = true;
            }
        }
        return this;
    };

    P.removeClasses = function (item) {

        if (item.substring) {

            let classes = this.classes,
                targets = item.split(),
                search;

            targets.forEach(cls => {

                search = new RegExp(' ?' + cls + ' ?');
                classes = classes.replace(search, ' ');
                classes = classes.trim();
                classes = classes.replace(/[\s\uFEFF\xA0]+/g, ' ');
            });

            if (classes !== this.classes) {

                this.classes = classes;
                this.dirtyClasses = true;
            }
        }
        return this;
    };

    P.emptyElementTagNames = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'CANVAS'];
    P.addPathCorners = function () {

        if (this.domElement && 
            !this.noUserInteraction && 
            this.emptyElementTagNames.indexOf(this.domElement.tagName) < 0) {

            let pointMaker = function () {

                let p = document.createElement('div');

                p.style.width = 0;
                p.style.height = 0;
                p.style.position = 'absolute';
                p.style.margin = 0;
                p.style.border = 0;
                p.style.padding = 0;

                return p;
            };

            let tl = pointMaker(),
                tr = pointMaker(),
                br = pointMaker(),
                bl = pointMaker();

            tl.style.top = '0%';
            tl.style.left = '0%';
            tl.setAttribute('data-scrawl-corner-div', 'sc');

            tr.style.top = '0%';
            tr.style.left = '100%';
            tr.setAttribute('data-scrawl-corner-div', 'sc');

            br.style.top = '100%';
            br.style.left = '100%';
            br.setAttribute('data-scrawl-corner-div', 'sc');

            bl.style.top = '100%';
            bl.style.left = '0%';
            bl.setAttribute('data-scrawl-corner-div', 'sc');

            let el = this.domElement;

            el.appendChild(tl);
            el.appendChild(tr);
            el.appendChild(br);
            el.appendChild(bl);

            this.pathCorners.push(tl);
            this.pathCorners.push(tr);
            this.pathCorners.push(br);
            this.pathCorners.push(bl);

            if (!this.currentCornersData) this.currentCornersData = [];
        }
        return this;
    };

    P.checkCornerPositions = function (corner) {

        let pathCorners = this.pathCorners;

        if (pathCorners.length === 4) {

            let here = this.getHere(),
                x = currentCorePosition.scrollX - (here.offsetX || 0),
                y = currentCorePosition.scrollY - (here.offsetY || 0),
                round = Math.round,
                results = [],
                client;

            const cornerPush = function (c) {

                let coord = c[0];

                if (coord) {

                    results.push(round(coord.left + x));
                    results.push(round(coord.top + y));
                }
                else results.push(0, 0);
            };

            switch (corner) {

                case 'topLeft' :

                    client = pathCorners[0].getClientRects();
                    cornerPush(client);
                    return results;

                case 'topRight' :

                    client = pathCorners[1].getClientRects();
                    cornerPush(client);
                    return results;

                case 'bottomRight' :

                    client = pathCorners[2].getClientRects();
                    cornerPush(client);
                    return results;

                case 'bottomLeft' :

                    client = pathCorners[3].getClientRects();
                    cornerPush(client);
                    return results;

                default :

                    pathCorners.forEach(point => {

                        if (isa_dom(point)) {

                            client = point.getClientRects();
                            cornerPush(client);
                        }
                    });
                    return results;
            }
        }
    }

    const cornerCoordinateLabels = ['topLeft', 'topRight', 'bottomRight', 'bottomLeft'];
    P.getCornerCoordinate = function (corner) {

        if (cornerCoordinateLabels.indexOf(corner) >= 0) return this.checkCornerPositions(corner);
        else return [].concat(this.currentStampPosition);
    };

    P.cleanPathObject = function () {

        this.dirtyPathObject = false;

        if (this.domElement && !this.noUserInteraction) {

            if (!this.pathCorners.length) this.addPathCorners();

            if (this.pathCorners.length) {

                if (!this.currentCornersData) this.currentCornersData = [];

                let cornerData = this.currentCornersData;
                cornerData.length = 0;
                cornerData.push(...this.checkCornerPositions());

                let p = this.pathObject = new Path2D();
                p.moveTo(cornerData[0], cornerData[1]);
                p.lineTo(cornerData[2], cornerData[3]);
                p.lineTo(cornerData[4], cornerData[5]);
                p.lineTo(cornerData[6], cornerData[7]);
                p.closePath();
            }
            else {
                let p = this.pathObject = new Path2D();
                p.moveTo(0, 0);
                p.lineTo(10, 0);
                p.lineTo(0, 10);
                p.lineTo(-10, 0);
                p.closePath();
            }
        }
    };

    P.checkHit = function (items = [], mycell) {

        if (this.noUserInteraction) return false;

        if (!this.pathObject || this.dirtyPathObject) this.cleanPathObject();

        let tests = (!Array.isArray(items)) ?  [items] : items,
            poolCellFlag = false;

        if (!mycell) {

            mycell = requestCell();
            poolCellFlag = true;
        }

        let engine = mycell.engine,
            stamp = this.currentStampPosition,
            x = stamp[0],
            y = stamp[1],
            tx, ty;

        if (tests.some(test => {

            if (Array.isArray(test)) {

                tx = test[0];
                ty = test[1];
            }
            else if (xta(test, test.x, test.y)) {

                tx = test.x;
                ty = test.y;
            }
            else return false;

            if (!tx.toFixed || !ty.toFixed || isNaN(tx) || isNaN(ty)) return false;

            return engine.isPointInPath(this.pathObject, tx, ty);

        }, this)) {

            if (poolCellFlag) releaseCell(mycell);

            return {
                x: tx,
                y: ty,
                artefact: this,
            };
        }
        
        if (poolCellFlag) releaseCell(mycell);
        
        return false;
    };

    P.cleanRotation = function () {

        this.dirtyRotation = false;

        if (!this.rotation || !isa_quaternion(this.rotation)) this.rotation = makeQuaternion();

        if (!this.currentRotation || !isa_quaternion(this.rotation)) this.currentRotation = makeQuaternion();

        let calculatedRotation = this.rotation;

        calculatedRotation.setFromEuler({
            pitch: this.pitch || 0,
            yaw: this.yaw || 0,
            roll: this.roll || 0,
        });

        if (calculatedRotation.getMagnitude() !== 1) calculatedRotation.normalize();

        let processedRotation = requestQuaternion(),
            path = this.path,
            mimic = this.mimic,
            pivot = this.pivot,
            lock = this.lockTo;

        if (path && lock.indexOf('path') >= 0) {

            processedRotation.set(calculatedRotation);

        }
        else if (mimic && this.useMimicRotation && lock.indexOf('mimic') >= 0) {

            if (xt(mimic.currentRotation)) {

                processedRotation.set(mimic.currentRotation);
                if (this.addOwnRotationToMimic) processedRotation.quaternionRotate(calculatedRotation);
            }
            else this.dirtyMimicRotation = true;
        } 
        else {

            processedRotation.set(calculatedRotation);

            if (pivot && this.addPivotRotation && lock.indexOf('pivot') >= 0) {

                if (xt(pivot.currentRotation)) processedRotation.quaternionRotate(pivot.currentRotation);
                else this.dirtyPivotRotation = true;
            }
        }

        this.currentRotation.set(processedRotation);

        releaseQuaternion(processedRotation);

        this.dirtyPositionSubscribers = true;
        
        if (this.mimicked && this.mimicked.length) this.dirtyMimicRotation = true;
    };

    P.cleanOffsetZ = function () {

        this.dirtyOffsetZ = false;
    };

    P.cleanContent = function () {

        this.dirtyContent = false;

        let el = this.domElement;

        if (el) this.dirtyDimensions = true;
    };

    P.cleanDisplayShape = λnull;

    P.cleanDisplayArea = λnull;

    P.prepareStamp = function () {

        if (this.dirtyScale || this.dirtyDimensions || this.dirtyStart || this.dirtyOffset || this.dirtyHandle || this.dirtyRotation) this.dirtyPathObject = true;

        if (this.dirtyContent) this.cleanContent();
        if (this.dirtyScale) this.cleanScale();
        if (this.dirtyDimensions) this.cleanDimensions();
        if (this.dirtyDisplayArea) this.cleanDisplayArea();
        if (this.dirtyDisplayShape) this.cleanDisplayShape();
        if (this.dirtyLock) this.cleanLock();
        if (this.dirtyStart) this.cleanStart();
        if (this.dirtyOffset) this.cleanOffset();
        if (this.dirtyOffsetZ) this.cleanOffsetZ();
        if (this.dirtyHandle) this.cleanHandle();
        if (this.dirtyRotation) this.cleanRotation();

        if (this.isBeingDragged || this.lockTo.indexOf('mouse') >= 0 || this.lockTo.indexOf('particle') >= 0) {

            this.dirtyStampPositions = true;
            this.dirtyStampHandlePositions = true;
        }

        if (this.pivoted.length) this.dirtyStampPositions = true;

        if (this.dirtyStampPositions) this.cleanStampPositions();
        if (this.dirtyStampHandlePositions) this.cleanStampHandlePositions();

        if (this.dirtyPathObject) this.cleanPathObject();
    };

    P.stamp = function () {

        if (!this.domElement) return false;

        let [stampX, stampY] = this.currentStampPosition,
            [handleX, handleY] = this.currentStampHandlePosition,
            scale = this.currentScale;

        let rotation = this.currentRotation,
            v, vx, vy, vz, angle;

        let nTransformOrigin = `${handleX}px ${handleY}px 0`,
            nTransform = `translate(${stampX - handleX}px,${stampY - handleY}px)`;

        if (this.yaw || this.pitch || this.roll || (this.pivot && this.addPivotRotation) || (this.mimic && this.useMimicRotation) || (this.path && this.addPathRotation)) {

            v = rotation.v;
            vx = v.x;
            vy = v.y;
            vz = v.z;
            angle = rotation.getAngle(false);

            nTransform += ` rotate3d(${vx},${vy},${vz},${angle}rad)`;
        }

        if (this.offsetZ) nTransform += ` translateZ(${this.offsetZ}px)`;

        if (scale !== 1) nTransform += ` scale(${scale},${scale})`;

        if (nTransform !== this.currentTransformString) {

            this.currentTransformString = nTransform;
            this.dirtyTransform = true;
        }

        if (nTransformOrigin !== this.currentTransformOriginString) {

            this.currentTransformOriginString = nTransformOrigin;
            this.dirtyTransformOrigin = true;
        }

        if (this.dirtyTransform || this.dirtyPerspective || this.dirtyPosition || this.dirtyDomDimensions || this.dirtyTransformOrigin || this.dirtyVisibility || this.dirtySmoothFont || this.dirtyCss || this.dirtyClasses || this.domShowRequired) {

            this.domShowRequired = false;
            addDomShowElement(this.name);
            setDomShowRequired(true);
        }

        if (this.dirtyPositionSubscribers) this.updatePositionSubscribers();

        if(this.dirtyMimicRotation || this.dirtyPivotRotation) {

            this.dirtyMimicRotation = false;
            this.dirtyPivotRotation = false;
            this.dirtyRotation = true;
        }

        if(this.dirtyMimicScale) {

            this.dirtyMimicScale = false;
            this.dirtyScale = true;
        }
    };

    P.initializeAccessibility = function () {

        this.reduceMotionAction = λnull;
        this.noPreferenceMotionAction = λnull;
        this.colorSchemeLightAction = λnull;
        this.colorSchemeDarkAction = λnull;
        this.reduceTransparencyAction = λnull;
        this.noPreferenceTransparencyAction = λnull;
        this.reduceDataAction = λnull;
        this.noPreferenceDataAction = λnull;
        this.moreContrastAction = λnull;
        this.otherContrastAction = λnull;
    };

    S.moreContrastAction = function (item) {
        if (isa_fn(item)) this.moreContrastAction = item;
    };
    P.setMoreContrastAction = function (item) {
        if (isa_fn(item)) this.moreContrastAction = item;
    };
    S.otherContrastAction = function (item) {
        if (isa_fn(item)) this.otherContrastAction = item;
    };
    P.setOtherContrastAction = function (item) {
        if (isa_fn(item)) this.otherContrastAction = item;
    };
    P.contrastActions = function () {

        const here = this.here;

        if (xt(here)) {

            const accessibilityFlag = here.prefersContrast;

            if (xt(accessibilityFlag)) {

                if (accessibilityFlag) this.moreContrastAction();
                else this.otherContrastAction();
            }
        }
    };

    S.reduceMotionAction = function (item) {
        if (isa_fn(item)) this.reduceMotionAction = item;
    };
    P.setReduceMotionAction = function (item) {
        if (isa_fn(item)) this.reduceMotionAction = item;
    };
    S.noPreferenceMotionAction = function (item) {
        if (isa_fn(item)) this.noPreferenceMotionAction = item;
    };
    P.setNoPreferenceMotionAction = function (item) {
        if (isa_fn(item)) this.noPreferenceMotionAction = item;
    };
    P.reducedMotionActions = function () {

        const here = this.here;

        if (xt(here)) {

            const accessibilityFlag = here.prefersReducedMotion;

            if (xt(accessibilityFlag)) {

                if (accessibilityFlag) this.reduceMotionAction();
                else this.noPreferenceMotionAction();
            }
        }
    };

    S.colorSchemeLightAction = function (item) {
        if (isa_fn(item)) this.colorSchemeLightAction = item;
    };
    P.setColorSchemeLightAction = function (item) {
        if (isa_fn(item)) this.colorSchemeLightAction = item;
    };
    S.colorSchemeDarkAction = function (item) {
        if (isa_fn(item)) this.colorSchemeDarkAction = item;
    };
    P.setColorSchemeDarkAction = function (item) {
        if (isa_fn(item)) this.colorSchemeDarkAction = item;
    };
    P.colorSchemeActions = function () {

        const here = this.here;

        if (xt(here)) {

            const accessibilityFlag = here.prefersDarkColorScheme;

            if (xt(accessibilityFlag)) {

                if (accessibilityFlag) this.colorSchemeDarkAction();
                else this.colorSchemeLightAction();
            }
        }
    };

    S.reduceTransparencyAction = function (item) {
        if (isa_fn(item)) this.reduceTransparencyAction = item;
    };
    P.setReduceTransparencyAction = function (item) {
        if (isa_fn(item)) this.reduceTransparencyAction = item;
    };
    S.noPreferenceTransparencyAction = function (item) {
        if (isa_fn(item)) this.noPreferenceTransparencyAction = item;
    };
    P.setNoPreferenceTransparencyAction = function (item) {
        if (isa_fn(item)) this.noPreferenceTransparencyAction = item;
    };
    P.reducedTransparencyActions = function () {

        const here = this.here;

        if (xt(here)) {

            const accessibilityFlag = here.prefersReduceTransparency;

            if (xt(accessibilityFlag)) {

                if (accessibilityFlag) this.reduceTransparencyAction();
                else this.noPreferenceTransparencyAction();
            }
        }
    };

    S.reduceDataAction = function (item) {
        if (isa_fn(item)) this.reduceDataAction = item;
    };
    P.setReduceDataAction = function (item) {
        if (isa_fn(item)) this.reduceDataAction = item;
    };
    S.noPreferenceDataAction = function (item) {
        if (isa_fn(item)) this.noPreferenceDataAction = item;
    };
    P.setNoPreferenceDataAction = function (item) {
        if (isa_fn(item)) this.noPreferenceDataAction = item;
    };
    P.reducedDataActions = function () {

        const here = this.here;

        if (xt(here)) {

            const accessibilityFlag = here.prefersReduceData;

            if (xt(accessibilityFlag)) {

                if (accessibilityFlag) this.reduceDataAction();
                else this.noPreferenceDataAction();
            }
        }
    };

    P.checkAccessibilityValues = function () {

        this.contrastActions();
        this.reducedMotionActions();
        this.colorSchemeActions();
        this.reducedTransparencyActions();
        this.reducedDataActions();
    }

    P.apply = function() {

        applyCoreResizeListener();

        this.prepareStamp();
        this.stamp()

        domShow(this.name);

        this.dirtyPathObject = true;
        this.cleanPathObject();
    };

    return P;
};