import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import { BreakpointHandler } from './ts/breakpoint-handler';

interface ContainerWithBreakpointsArgs {
	cssClass?: string;
}

@Component
class ContainerWithBreakpointsComponent extends TsxComponent<ContainerWithBreakpointsArgs> implements ContainerWithBreakpointsArgs {
	@Prop() cssClass: string;
	breakpointClass: string = null;
	_handler: any;

	mounted() {
		this._handler = () => {
			const newClass = BreakpointHandler.getBreakpointsForElement(this.$el);
			if (newClass != this.breakpointClass) {
				this.breakpointClass = newClass;
			}
		};

		BreakpointHandler.addResizeHandler(this._handler);
		this._handler();
	}

	beforeUnmount() {
		BreakpointHandler.removeResizeHandler(this._handler);
		this._handler = null;
	}

	render(h) {
		return <div class={`${this.cssClass != null ? `${this.cssClass} ` : ''}${this.breakpointClass}`}>{this.$slots.default?.()}</div>;
	}
}

const ContainerWithBreakpoints = toNative(ContainerWithBreakpointsComponent);
export default ContainerWithBreakpoints;