"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const makeup_expander_1 = __importDefault(require("makeup-expander"));
const makeup_focusables_1 = __importDefault(require("makeup-focusables"));
const dom_1 = require("@floating-ui/dom");
const constants_1 = require("./constants");
class TooltipBase {
    handleExpand() {
        this.emit("base-expand");
        if (this.hostEl && this.overlayEl) {
            this.updateTip();
        }
    }
    handleCollapse() {
        this.emit("base-collapse");
    }
    onMount() {
        this._setupBaseTooltip();
    }
    onUpdate() {
        this._setupBaseTooltip();
    }
    onInput(input) {
        if (input.open === true) {
            this.action = "expand";
        }
        else if (input.open === false) {
            this.action = "collapse";
        }
    }
    onRender() {
        if (typeof window !== "undefined") {
            this._cleanupMakeup();
        }
    }
    collapse() {
        this._expander.expanded = false;
    }
    expand() {
        this._expander.expanded = true;
    }
    isExpanded() {
        return this._expander.expanded;
    }
    onDestroy() {
        this._cleanupMakeup();
    }
    _setupExpander(host, hostSelector) {
        const { input } = this;
        const { type } = input;
        const container = this.getEl("container");
        const isTooltip = type === "tooltip";
        const isInfotip = type === "infotip";
        const isTourtip = type === "tourtip";
        const expanderEl = container === null || container === void 0 ? void 0 : container.getElementsByClassName(type)[0];
        if (host && !isTourtip) {
            this._expander = new makeup_expander_1.default(expanderEl, {
                hostSelector: hostSelector,
                contentSelector: `.${type}__overlay`,
                expandedClass: `${type}--expanded`,
                focusManagement: null,
                expandOnFocus: isTooltip,
                expandOnHover: isTooltip && !input.noHover,
                expandOnClick: isInfotip,
                autoCollapse: isTooltip,
            });
            if (isTooltip && !host.hasAttribute("aria-describedby")) {
                host.setAttribute("aria-describedby", input.overlayId);
            }
        }
        if (this.hostEl && this.overlayEl) {
            this.updateTip();
            this.cleanup = (0, dom_1.autoUpdate)(this.hostEl, this.overlayEl, this.update.bind(this));
        }
    }
    updateTip() {
        var _a;
        (0, dom_1.computePosition)(this.hostEl, this.overlayEl, {
            placement: this.input.placement ||
                constants_1.pointerStyles[(_a = this.input.pointer) !== null && _a !== void 0 ? _a : "bottom"],
            middleware: [
                (0, dom_1.offset)(this.input.offset || 6),
                !this.input.notInline && (0, dom_1.inline)(),
                !this.input.noFlip && (0, dom_1.flip)(),
                !this.input.noShift && (0, dom_1.shift)(),
                (0, dom_1.arrow)({
                    element: this.arrowEl,
                    padding: 20,
                }),
            ],
        }).then(({ x, y, placement, middlewareData }) => {
            var _a, _b, _c, _d;
            Object.assign(((_a = this.overlayEl) === null || _a === void 0 ? void 0 : _a.style) || {}, {
                left: `${x}px`,
                top: `${y}px`,
            });
            // Accessing the data
            const arrowX = (_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
            const arrowY = (_c = middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.y;
            const staticSide = {
                top: "bottom",
                strategy: "fixed",
                right: "left",
                bottom: "top",
                left: "right",
            }[placement.split("-")[0]];
            Object.assign(((_d = this.arrowEl) === null || _d === void 0 ? void 0 : _d.style) || {}, {
                left: arrowX != null ? `${arrowX}px` : "",
                top: arrowY != null ? `${arrowY}px` : "",
                right: "",
                bottom: "",
                [staticSide || ""]: "-4px",
            });
        });
    }
    _setupBaseTooltip() {
        var _a, _b, _c;
        const { type } = this.input;
        const hostClass = `${type}__host`;
        const hostSelector = `.${hostClass}`;
        this.hostEl = ((_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector(hostSelector)) || null;
        this.overlayEl = ((_b = this.el) === null || _b === void 0 ? void 0 : _b.querySelector(`.${type}__overlay`)) || null;
        this.arrowEl = ((_c = this.el) === null || _c === void 0 ? void 0 : _c.querySelector(`.${type}__pointer`)) || null;
        if (this.input.type !== "dialog--mini") {
            this._setupMakeup();
        }
        if (this.action && this._expander) {
            if (this.action === "expand") {
                this.expand();
            }
            else if (this.action === "collapse") {
                this.collapse();
            }
            this.action = null;
        }
    }
    _setupMakeup() {
        const { input } = this;
        const { type } = input;
        const container = this.getEl("container");
        const hostClass = `${type}__host`;
        const hostSelector = `.${hostClass}`;
        let host = container === null || container === void 0 ? void 0 : container.querySelector(hostSelector);
        if (!host) {
            if (this.cancelFocus) {
                this.cancelFocus();
            }
            this.cancelFocus = (0, makeup_focusables_1.default)(container, false, (curFocusables) => {
                const curFocusable = curFocusables[0];
                if (curFocusable) {
                    host = curFocusable;
                    if (!curFocusable.classList.contains(hostClass)) {
                        curFocusable.classList.add(hostClass);
                    }
                }
                this._setupExpander(host, hostSelector);
            });
        }
        else {
            this._setupExpander(host, hostSelector);
        }
    }
    _cleanupMakeup() {
        if (this.cancelFocus) {
            this.cancelFocus();
        }
        if (this._expander) {
            this._expander.destroy();
            this._expander = undefined;
        }
        if (this.cleanup) {
            this.cleanup();
            this.cleanup = undefined;
        }
    }
}
module.exports = TooltipBase;
