import { __decorate } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.60.1_tslib@2.8.1_typescript@6.0.2/node_modules/tslib/tslib.es6.js';
import { css, LitElement, html } from 'lit';
import { property, state, customElement } from 'lit/decorators.js';

const ORIGINAL_WIDTH = 153;
const ORIGINAL_HEIGHT = 69;
const ASPECT_RATIO = ORIGINAL_WIDTH / ORIGINAL_HEIGHT;
const COLORS = [
    "#7aa2f7",
    "#bb9af7",
    "#9ece6a",
    "#73daca",
    "#7dcfff",
    "#f7768e",
    "#e0af68",
    "#2ac3de",
];
function pickNextColor(current) {
    if (COLORS.length === 0) {
        return current ?? "#ffffff";
    }
    if (COLORS.length === 1) {
        return COLORS[0];
    }
    let next = COLORS[0];
    while (next === current) {
        next = COLORS[Math.floor(Math.random() * COLORS.length)];
    }
    return next;
}
let FwDvdLogo = class FwDvdLogo extends LitElement {
    constructor() {
        super(...arguments);
        this.parentRef = null;
        this.scale = 0.15;
        this._position = { top: 0, left: 0 };
        this._dimensions = { width: ORIGINAL_WIDTH, height: ORIGINAL_HEIGHT };
        this._color = pickNextColor();
        this._velocity = { x: 1.8, y: 1.6 };
        this._animationFrame = null;
        this._resizeObserver = null;
        this._lastTimestamp = performance.now();
    }
    connectedCallback() {
        super.connectedCallback();
        this._startAnimation();
    }
    firstUpdated() {
        this._attachResizeObserver();
        this._recalculateDimensions();
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this._stopAnimation();
        this._detachResizeObserver();
    }
    updated(changed) {
        if (changed.has("parentRef") || changed.has("scale")) {
            this._attachResizeObserver();
            this._recalculateDimensions();
        }
    }
    _getParent() {
        return this.parentRef ?? this.parentElement;
    }
    _attachResizeObserver() {
        this._detachResizeObserver();
        const parent = this._getParent();
        if (!parent || typeof ResizeObserver === "undefined") {
            return;
        }
        this._resizeObserver = new ResizeObserver(() => this._recalculateDimensions());
        this._resizeObserver.observe(parent);
    }
    _detachResizeObserver() {
        this._resizeObserver?.disconnect();
        this._resizeObserver = null;
    }
    _recalculateDimensions() {
        const parent = this._getParent();
        if (!parent) {
            return;
        }
        const parentWidth = parent.clientWidth;
        const parentHeight = parent.clientHeight;
        if (parentWidth <= 0 || parentHeight <= 0) {
            return;
        }
        const maxWidth = parentWidth * this.scale;
        const maxHeight = parentHeight * this.scale;
        let width = maxWidth;
        let height = width / ASPECT_RATIO;
        if (height > maxHeight) {
            height = maxHeight;
            width = height * ASPECT_RATIO;
        }
        const nextDimensions = {
            width: Math.max(20, width),
            height: Math.max(20, height),
        };
        this._dimensions = nextDimensions;
        const maxTop = Math.max(0, parentHeight - nextDimensions.height);
        const maxLeft = Math.max(0, parentWidth - nextDimensions.width);
        this._position = {
            top: Math.random() * maxTop,
            left: Math.random() * maxLeft,
        };
        const baseSpeed = Math.max(1.2, Math.min(nextDimensions.width, nextDimensions.height) / 70);
        this._velocity = {
            x: baseSpeed * (Math.random() > 0.5 ? 1 : -1),
            y: baseSpeed * (Math.random() > 0.5 ? 1 : -1),
        };
    }
    _startAnimation() {
        if (this._animationFrame != null) {
            return;
        }
        const tick = (timestamp) => {
            const parent = this._getParent();
            const dims = this._dimensions;
            if (!parent || dims.width <= 0 || dims.height <= 0) {
                this._animationFrame = requestAnimationFrame(tick);
                return;
            }
            const deltaMs = timestamp - this._lastTimestamp;
            this._lastTimestamp = timestamp;
            const speedMultiplier = Math.min(deltaMs / 16, 2);
            const maxTop = parent.clientHeight - dims.height;
            const maxLeft = parent.clientWidth - dims.width;
            let { top, left } = this._position;
            let { x, y } = this._velocity;
            let bounced = false;
            top += y * speedMultiplier;
            left += x * speedMultiplier;
            if (top <= 0 || top >= maxTop) {
                y = -y;
                top = Math.max(0, Math.min(maxTop, top));
                bounced = true;
            }
            if (left <= 0 || left >= maxLeft) {
                x = -x;
                left = Math.max(0, Math.min(maxLeft, left));
                bounced = true;
            }
            this._velocity = { x, y };
            this._position = { top, left };
            if (bounced) {
                this._color = pickNextColor(this._color);
            }
            this._animationFrame = requestAnimationFrame(tick);
        };
        this._animationFrame = requestAnimationFrame(tick);
    }
    _stopAnimation() {
        if (this._animationFrame != null) {
            cancelAnimationFrame(this._animationFrame);
            this._animationFrame = null;
        }
    }
    render() {
        return html `
      <div
        style="
          position:absolute;
          top:${this._position.top}px;
          left:${this._position.left}px;
          width:${this._dimensions.width}px;
          height:${this._dimensions.height}px;
        "
      >
        <svg width="100%" height="100%" viewBox="0 0 153 69" fill=${this._color}>
          <g>
            <path
              d="M140.186,63.52h-1.695l-0.692,5.236h-0.847l0.77-5.236h-1.693l0.076-0.694h4.158L140.186,63.52L140.186,63.52z M146.346,68.756h-0.848v-4.545l0,0l-2.389,4.545l-1-4.545l0,0l-1.462,4.545h-0.771l1.924-5.931h0.695l0.924,4.006l2.078-4.006 h0.848V68.756L146.346,68.756z M126.027,0.063H95.352c0,0-8.129,9.592-9.654,11.434c-8.064,9.715-9.523,12.32-9.779,13.02 c0.063-0.699-0.256-3.304-3.686-13.148C71.282,8.7,68.359,0.062,68.359,0.062H57.881V0L32.35,0.063H13.169l-1.97,8.131 l14.543,0.062h3.365c9.336,0,15.055,3.747,13.467,10.354c-1.717,7.24-9.91,10.416-18.545,10.416h-3.24l4.191-17.783H10.502 L4.34,37.219h20.578c15.432,0,30.168-8.13,32.709-18.608c0.508-1.906,0.443-6.67-0.764-9.527c0-0.127-0.063-0.191-0.127-0.444 c-0.064-0.063-0.127-0.509,0.127-0.571c0.128-0.062,0.383,0.189,0.445,0.254c0.127,0.317,0.19,0.57,0.19,0.57l13.083,36.965 l33.344-37.6h14.1h3.365c9.337,0,15.055,3.747,13.528,10.354c-1.778,7.24-9.972,10.416-18.608,10.416h-3.238l4.191-17.783h-14.481 l-6.159,25.976h20.576c15.434,0,30.232-8.13,32.709-18.608C152.449,8.193,141.523,0.063,126.027,0.063L126.027,0.063z M71.091,45.981c-39.123,0-70.816,4.512-70.816,10.035c0,5.59,31.693,10.034,70.816,10.034c39.121,0,70.877-4.444,70.877-10.034 C141.968,50.493,110.212,45.981,71.091,45.981L71.091,45.981z M68.55,59.573c-8.956,0-16.196-1.523-16.196-3.365 c0-1.84,7.239-3.303,16.196-3.303c8.955,0,16.195,1.463,16.195,3.303C84.745,58.050,77.505,59.573,68.55,59.573L68.55,59.573z"
            />
          </g>
        </svg>
      </div>
    `;
    }
};
FwDvdLogo.styles = css `
    :host {
      position: absolute;
      pointer-events: none;
      user-select: none;
      display: block;
      z-index: 6;
    }
  `;
__decorate([
    property({ attribute: false })
], FwDvdLogo.prototype, "parentRef", void 0);
__decorate([
    property({ type: Number })
], FwDvdLogo.prototype, "scale", void 0);
__decorate([
    state()
], FwDvdLogo.prototype, "_position", void 0);
__decorate([
    state()
], FwDvdLogo.prototype, "_dimensions", void 0);
__decorate([
    state()
], FwDvdLogo.prototype, "_color", void 0);
FwDvdLogo = __decorate([
    customElement("fw-dvd-logo")
], FwDvdLogo);

export { FwDvdLogo };
//# sourceMappingURL=fw-dvd-logo.js.map
