import { globalState } from '../../../app/global-state';
import { remove } from '../../../common/extensions/array-extensions';

if (globalState.__powerduckBreakpointHandler == null) {
	globalState.__powerduckBreakpointHandler = {
		_breakpointsBound: false,
		_handlers: [],
	};
}

export class BreakpointHandler {
	private static get handlers() {
		return globalState.__powerduckBreakpointHandler._handlers;
	}

	static addResizeHandler(handler: () => any) {
		BreakpointHandler.bindResizeHandler();
		BreakpointHandler.handlers.push(handler);
	}

	static removeResizeHandler(handler: () => any) {
		(BreakpointHandler.handlers as any[])[remove](handler);
	}

	static bindResizeHandler() {
		if (globalState.__powerduckBreakpointHandler._breakpointsBound == true) {
			return;
		}

		globalState.__powerduckBreakpointHandler._breakpointsBound = true;
		globalState.addEventListener('resize', BreakpointHandler.onWindowHasResized);
		BreakpointHandler.onWindowHasResized();
	}

	static getBreakpointsForElement(elem: Element): string {
		const clientWidth = elem.clientWidth;
		let newClass = 'inv-brkmax-max ';

		if (clientWidth < 1201) {
			newClass += 'inv-brkmax-1200 ';
		}

		// Ugly patch, but 992 should be included up..
		if (clientWidth < 992) {
			newClass += 'inv-brkmax-992 ';
		}

		// Ugly patch, but 768 should be included up..
		if (clientWidth < 768) {
			newClass += 'inv-brkmax-768 ';
		}

		if (clientWidth < 551) {
			newClass += 'inv-brkmax-550 ';
		}

		if (clientWidth < 451) {
			newClass += 'inv-brkmax-450 ';
		}

		if (clientWidth < 381) {
			newClass += 'inv-brkmax-380 ';
		}

		return newClass;
	}

	private static onWindowHasResized() {
		for (const handler of BreakpointHandler.handlers) {
			try {
				handler();
			} catch (error) {
				console.error(error);
			}
		}
	}
}