import { playerContext } from "../../player/context.js";
import { MediaElement } from "../media-element.js";
import { PlayerController } from "../../player/player-controller.js";
import { sliderContext } from "../slider/context.js";
import { applyElementProps, applyStateDataAttrs, createSlider, getTimeSliderCSSVars, selectBuffer, selectTime } from "@videojs/core/dom";
import { ContextProvider } from "@videojs/element/context";
import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
import { applyStyles, isRTL } from "@videojs/utils/dom";
import { formatTime } from "@videojs/utils/time";

//#region src/ui/time-slider/time-slider-element.ts
var TimeSliderElement = class extends MediaElement {
	constructor(..._args) {
		super(..._args);
		this.label = TimeSliderCore.defaultProps.label;
		this.commitThrottle = TimeSliderCore.defaultProps.commitThrottle;
		this.step = TimeSliderCore.defaultProps.step;
		this.largeStep = TimeSliderCore.defaultProps.largeStep;
		this.orientation = TimeSliderCore.defaultProps.orientation;
		this.disabled = TimeSliderCore.defaultProps.disabled;
		this.thumbAlignment = TimeSliderCore.defaultProps.thumbAlignment;
	}
	static {
		this.tagName = "media-time-slider";
	}
	static {
		this.properties = {
			label: { type: String },
			commitThrottle: {
				type: Number,
				attribute: "commit-throttle"
			},
			step: { type: Number },
			largeStep: {
				type: Number,
				attribute: "large-step"
			},
			orientation: { type: String },
			disabled: { type: Boolean },
			thumbAlignment: {
				type: String,
				attribute: "thumb-alignment"
			}
		};
	}
	#core = new TimeSliderCore();
	#provider = new ContextProvider(this, { context: sliderContext });
	#timeState = new PlayerController(this, playerContext, selectTime);
	#bufferState = new PlayerController(this, playerContext, selectBuffer);
	#slider = null;
	#disconnect = null;
	connectedCallback() {
		super.connectedCallback();
		if (this.destroyed) return;
		this.#disconnect = new AbortController();
		const signal = this.#disconnect.signal;
		this.#slider = createSlider({
			getElement: () => this,
			getThumbElement: () => this.querySelector("media-slider-thumb"),
			getOrientation: () => this.orientation,
			isRTL: () => isRTL(this),
			isDisabled: () => this.disabled || !this.#timeState.value,
			getPercent: () => {
				const media = this.#timeState.value;
				if (!media) return 0;
				return this.#core.percentFromValue(media.currentTime);
			},
			getStepPercent: () => this.#core.getStepPercent(),
			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
			onValueCommit: (percent) => {
				const media = this.#timeState.value;
				if (media) media.seek(this.#core.rawValueFromPercent(percent));
			},
			commitThrottle: this.commitThrottle,
			onDragStart: () => {
				this.dispatchEvent(new CustomEvent("drag-start", { bubbles: true }));
			},
			onDragEnd: () => {
				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
			},
			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),
			onResize: () => this.requestUpdate()
		});
		applyElementProps(this, this.#slider.rootProps, { signal });
		applyStyles(this, this.#slider.rootStyle);
		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		this.#disconnect?.abort();
		this.#disconnect = null;
	}
	destroyCallback() {
		this.#slider?.destroy();
		super.destroyCallback();
	}
	willUpdate(_changed) {
		super.willUpdate(_changed);
		this.#core.setProps(this);
	}
	update(_changed) {
		super.update(_changed);
		if (!this.#slider) return;
		const time = this.#timeState.value;
		const buffer = this.#bufferState.value;
		if (!time) return;
		this.#core.setInput(this.#slider.input.current);
		const media = {
			...time,
			...buffer ?? {
				buffered: [],
				seekable: []
			}
		};
		this.#core.setMedia(media);
		const state = this.#core.getState();
		const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(state));
		applyStyles(this, cssVars);
		applyStateDataAttrs(this, state, TimeSliderDataAttrs);
		this.#provider.setValue({
			state,
			stateAttrMap: TimeSliderDataAttrs,
			pointerValue: this.#core.valueFromPercent(state.pointerPercent),
			thumbAttrs: this.#core.getAttrs(state),
			thumbProps: this.#slider.thumbProps,
			formatValue: (value) => formatTime(value, state.duration)
		});
	}
};

//#endregion
export { TimeSliderElement };
//# sourceMappingURL=time-slider-element.js.map