import { spread, insert, effect, className, style, template } from 'solid-js/web';
import { mergeProps, createMemo } from 'solid-js';
import { OriginComponent, extendsEvent } from '@cn-ui/use';

const _tmpl$ = /*#__PURE__*/template(`<div></div>`, 2);
const defaultProps = {
  size: 'mini'
};
const spaceSize = {
  mini: 0.25,
  small: 0.5,
  medium: 0.75,
  large: 1,
  none: 0
};
const Space = OriginComponent(baseProps => {
  const props = mergeProps(defaultProps, baseProps);
  const style$1 = createMemo(() => {
    // 需要在 CSS 中进行层叠计算，故使用变量方式
    const size = (typeof props.size === 'string' ? spaceSize[props.size] : props.size) + 'em';
    return { ...props.style,
      '--space-size': size
    };
  });
  return (() => {
    const _el$ = _tmpl$.cloneNode(true);

    const _ref$ = props.ref;
    typeof _ref$ === "function" ? _ref$(_el$) : props.ref = _el$;

    spread(_el$, () => extendsEvent(props), false, true);

    insert(_el$, () => props.children);

    effect(_p$ => {
      const _v$ = props.class('cn-space', props.vertical && 'inline-flex flex-col', 'flex items-center', props.wrap && 'flex-wrap'),
            _v$2 = style$1();

      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined
    });

    return _el$;
  })();
});

export { Space };
