import type { JSX } from 'solid-js';
import { createMemo } from 'solid-js';
import { useUnion } from './useUnion.js';
import { styleGroupToUnionStyleProps } from '@union-web/core';

type Props = {
  children?: JSX.Element;
  spacing?: number;
  style?: JSX.CSSProperties;
};

export function RowLayout(props: Props) {
  const { current, UnionProvider } = useUnion({ role: 'rowlayout' });
  const layoutStyle = createMemo(() => {
    const u = styleGroupToUnionStyleProps(current());
    const s: JSX.CSSProperties = {
      display: 'flex',
      'flex-direction': 'row',
      'box-sizing': 'border-box',
    };
    if (u.padding !== undefined) s.padding = u.padding;
    if (u.paddingTop !== undefined) s['padding-top'] = u.paddingTop;
    if (u.paddingRight !== undefined) s['padding-right'] = u.paddingRight;
    if (u.paddingBottom !== undefined) s['padding-bottom'] = u.paddingBottom;
    if (u.paddingLeft !== undefined) s['padding-left'] = u.paddingLeft;
    const gap = props.spacing ?? u.spacing;
    if (gap !== undefined) s.gap = typeof gap === 'number' ? `${gap}px` : gap;
    return { ...s, ...props.style };
  });
  return (
    <UnionProvider>
      <div style={layoutStyle()}>
        {props.children}
      </div>
    </UnionProvider>
  );
}