import { MediaElement } from "../media-element.js";
import { sliderContext } from "./context.js";
import { applyElementProps, applyStateDataAttrs, createSlider, getSliderCSSVars } from "@videojs/core/dom";
import { ContextProvider } from "@videojs/element/context";
import { SliderCore, SliderDataAttrs } from "@videojs/core";
import { applyStyles, isRTL } from "@videojs/utils/dom";

//#region src/ui/slider/slider-element.ts
var SliderElement = class extends MediaElement {
	constructor(..._args) {
		super(..._args);
		this.label = SliderCore.defaultProps.label;
		this.value = SliderCore.defaultProps.value;
		this.min = SliderCore.defaultProps.min;
		this.max = SliderCore.defaultProps.max;
		this.step = SliderCore.defaultProps.step;
		this.largeStep = SliderCore.defaultProps.largeStep;
		this.orientation = SliderCore.defaultProps.orientation;
		this.disabled = SliderCore.defaultProps.disabled;
		this.thumbAlignment = SliderCore.defaultProps.thumbAlignment;
	}
	static {
		this.tagName = "media-slider";
	}
	static {
		this.properties = {
			label: { type: String },
			value: { type: Number },
			min: { type: Number },
			max: { type: Number },
			step: { type: Number },
			largeStep: {
				type: Number,
				attribute: "large-step"
			},
			orientation: { type: String },
			disabled: { type: Boolean },
			thumbAlignment: {
				type: String,
				attribute: "thumb-alignment"
			}
		};
	}
	#core = new SliderCore();
	#provider = new ContextProvider(this, { context: sliderContext });
	#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,
			getPercent: () => this.#core.percentFromValue(this.value),
			getStepPercent: () => this.#core.getStepPercent(),
			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
			onValueChange: (percent) => {
				this.value = this.#core.valueFromPercent(percent);
				this.dispatchEvent(new CustomEvent("value-change", {
					detail: { value: this.value },
					bubbles: true
				}));
			},
			onValueCommit: (percent) => {
				this.value = this.#core.valueFromPercent(percent);
				this.dispatchEvent(new CustomEvent("value-commit", {
					detail: { value: this.value },
					bubbles: true
				}));
			},
			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;
		this.#core.setInput(this.#slider.input.current);
		const state = this.#core.getSliderState(this.value);
		const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));
		applyStyles(this, cssVars);
		applyStateDataAttrs(this, state, SliderDataAttrs);
		this.#provider.setValue({
			state,
			stateAttrMap: SliderDataAttrs,
			pointerValue: this.#core.valueFromPercent(state.pointerPercent),
			thumbAttrs: this.#core.getAttrs(state),
			thumbProps: this.#slider.thumbProps
		});
	}
};

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