import React from "https://esm.sh/react@18.2.0";
import ReactDOM from "https://esm.sh/react-dom@18.2.0";
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/>);