import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
import classnames from "https://esm.sh/classnames";

const PRIORITIES = ['primary', 'secondary'];

function updateLogical(value) {
	switch(value) {
		case 'left':
		case 'top':
			return 'start';
		case 'right':
		case 'bottom':
			return 'end';
		default:
			return value;
	}
}

function createBox(TagName) {
	return function(props) {
		const {
			distribute,
			gap,
			inset,
			logical = true,
			outset,
			padding,
			priority,
			stack,
			standby,
			stretch,
			style: userStyle = {},
			wrap,
			...rest
		} = props;
		
		let innerLayout = [/* inline, block */];
		let outerLayout = [/* inline, block */];
		
		if (typeof inset === 'string') {
			innerLayout = [inset, inset];
		} else if (inset && typeof inset === 'object') {
			innerLayout = [inset.inline, inset.block];
		}
		
		if (typeof outset === 'string') {
			outerLayout = [outset, outset];
		} else if (outset && typeof outset === 'object') {
			outerLayout = [outset.inline, outset.block];
		}
		
		if (logical) {
			innerLayout.map(updateLogical);
			outerLayout.map(updateLogical);
		}
		
		if (stack) {
			innerLayout.reverse();
		}
		
		const style = {
			justifyContent: innerLayout.at(0),
			alignItems: innerLayout.at(1),
			display: stretch ? 'flex' : 'inline-flex',
			flex: stretch ? 1 : 'initial',
			flexDirection: stack ? 'column' : 'row',
			wrap: wrap ? 'wrap' : 'nowrap',
			justifySelf: outerLayout.at(0),
			alignSelf: outerLayout.at(1)
		}

	
		if (distribute) {
			style.justifyContent = `space-${distribute}`;
		}
		
		const className = classnames('ux-box', {
			'ux-box--gap': gap,
			'ux-box--padding': padding,
			[`ux-box--priority-${priority}`]: PRIORITIES.includes(priority)
		});
		
		return <TagName
				  { ...rest }
				  data-standby={ standby }
				  style={ Object.assign(userStyle, style) }
				  className={ className }/>
	}
}

const cache = new Map();
const box = new Proxy(createBox, {
	get: (_, tagName) => {
		if (!cache.has(tagName))
			cache.set(tagName, createBox(tagName));
		return cache.get(tagName);
	},
});

function Card(props) {
	const {
		description,
		image = '#',
		loading,
		title,
		...rest
	} = props;
	
	return (
		<box.div 
			padding
			gap
			stack
			stretch
			priority={ loading ? 'secondary' : 'primary' }>
			<img src={ image }/>
			<box.h2 standby={ loading }>{ title }</box.h2>
			<box.p standby={ loading }>{ description }</box.p>
		</box.div>
	);
}

function App() {	
	return (
		<box.div gap padding distribute='between'>
			<Card
				title='My Card'
				description='Lorem ipsum'
				image='https://baconmockup.com/400/300/'/>
			<Card loading/>
		</box.div>
	)
}

const root = ReactDOM.createRoot(document.body);
root.render(<App/>);