import { Observable, of } from "rxjs";
import { map } from "rxjs/operators";
import { createResizeObservable } from "@hydecorp/component";
import { ComplexAttributeConverter } from "lit";

export {
	applyMixins,
	subscribeWhen,
	filterWhen,
	tween,
} from "@hydecorp/component";

export function easeOutSine(t: number, b: number, c: number, d: number) {
	return c * Math.sin((t / d) * (Math.PI / 2)) + b;
}

export function observeWidth(el: HTMLElement) {
	// This component should have at least basic support without `ResizeObserver` support,
	// so we pass a one-time measurement when it's missing. Obviously this won't update, so BYO polyfill.
	const resize$: Observable<{ contentRect: { width: number } }> =
		"ResizeObserver" in window
			? createResizeObservable(el)
			: of({ contentRect: { width: el.clientWidth } });
	return resize$.pipe(map((rect) => rect.contentRect.width));
}

export const rangeConverter: ComplexAttributeConverter<number[]> = {
	fromAttribute(attr) {
		return (attr ?? "")
			.replace(/[\[\]]/g, "")
			.split(",")
			.map(Number);
	},

	toAttribute(range) {
		return range.join(",");
	},
};

export function rangeHasChanged(curr: number[], prev: number[] = []) {
	return curr.length !== prev.length || curr.some((v, i) => v !== prev[i]);
}