import { efContext } from "./efContext.js";
import { consume } from "@lit/context";
import { LitElement, css, html } from "lit";
import { customElement } from "lit/decorators.js";
import _decorate from "@oxc-project/runtime/helpers/decorate";
let EFTimeDisplay = class EFTimeDisplay$1 extends LitElement {
	constructor(..._args) {
		super(..._args);
		this._onTimeUpdate = () => {
			this.requestUpdate();
		};
	}
	static {
		this.styles = css`
    :host {
      display: inline-block;
      font-family: var(--ef-font-family, system-ui);
      font-size: var(--ef-font-size-xs, 0.75rem);
      color: var(--ef-text-color, rgb(75 85 99));
      white-space: nowrap;
    }
  `;
	}
	connectedCallback() {
		super.connectedCallback();
		this.context?.addEventListener("timeupdate", this._onTimeUpdate);
	}
	updated(changedProperties) {
		if (changedProperties.has("context")) {
			const oldContext = changedProperties.get("context");
			oldContext?.removeEventListener("timeupdate", this._onTimeUpdate);
			this.context?.addEventListener("timeupdate", this._onTimeUpdate);
		}
	}
	disconnectedCallback() {
		this.context?.removeEventListener("timeupdate", this._onTimeUpdate);
		super.disconnectedCallback();
	}
	formatTime(ms) {
		const totalSeconds = Math.floor(ms / 1e3);
		const minutes = Math.floor(totalSeconds / 60);
		const seconds = totalSeconds % 60;
		return `${minutes}:${seconds.toString().padStart(2, "0")}`;
	}
	render() {
		const currentTime = this.context?.currentTimeMs ?? 0;
		const totalTime = this.context?.targetTimegroup?.durationMs ?? 0;
		return html`
      <span part="time">
        ${this.formatTime(currentTime)} / ${this.formatTime(totalTime)}
      </span>
    `;
	}
};
_decorate([consume({
	context: efContext,
	subscribe: true
})], EFTimeDisplay.prototype, "context", void 0);
EFTimeDisplay = _decorate([customElement("ef-time-display")], EFTimeDisplay);
export { EFTimeDisplay };
