const template = document.createElement('template');
template.innerHTML = `
	<style>
		.container {
			padding: 2rem;
			border-radius: 1rem;
			background: lightgray;
		}

		.top ::slotted(*) {
			margin-top: 0;
		}

		.bottom ::slotted(*) {
			margin-bottom: 0;
		}
	</style>
	<div class="container"></div>
`;

class XComponent extends HTMLElement {
	constructor() {
		super();

		// Init shadow DOM with template.
		this.attachShadow({ mode: 'open' });
		this.shadowRoot.appendChild(template.content.cloneNode(true));

		// Save reference to container element.
		this._container = this.shadowRoot.querySelector('div');

		// Track container size and breakpoints.
		// TODO: Make breakpoints configurable.
		this._width = this._container.getBoundingClientRect().width;
		this._breakpoints = [{ name: 'small', max: 499 }, { name: 'large' }];
		this._breakpoint = this.getBreakpoint();

		// Render once (to avoid infinite resize loops).
		this._render();

		// Declare resize observer.
		this._resizeObserver = new ResizeObserver(this.onResize.bind(this));
	}
	
	connectedCallback() {
		// On load, init resize observer.
		this._resizeObserver.observe(this._container);
	}

	getBreakpoint() {
		return this._breakpoints.find((bp) => {
			// Min & Max.
			if (bp.min && bp.max) {
				return this._width >= bp.min && this._width <= bp.max;
			}

			// Min only.
			if (bp.min && !bp.max) {
				return this._width >= bp.min;
			}

			// Max only.
			if (!bp.min && bp.max) {
				return this._width <= bp.max;
			}

			// Default.
			return true;
		});
	}

	onResize(entries) {
		// Assume first entry is container element.
		const entry = entries[0];

		// Has the container width changed?
		const { width } = entry.contentRect;

		if (this._width === width) {
			return;
		}

		this._width = width;

		// Is this a new breakpoint?
		const breakpoint = this.getBreakpoint();

		if (this._breakpoint === breakpoint.name) {
			return;
		}
		
		this._breakpoint = breakpoint.name;
		
		// Render the component.
		this._render();
	}
	
	_render() {
		console.log(this._width, this._breakpoint);

		if (this._breakpoint === 'small') {
			// Small
			this._container.innerHTML = `
				<div class="top"><slot name="description"></slot></div>
				<div class="bottom"><slot name="heading"></slot></div>
			`;
		} else {
			// Large
			this._container.innerHTML = `
				<div class="top"><slot name="heading"></slot></div>
				<div class="bottom"><slot name="description"></slot></div>
			`;
		}
	}
}

customElements.define('x-component', XComponent);