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

const _tmpl$ = /*#__PURE__*/template(`<div><div class="flex flex-col items-center overflow-hidden"><div class="my-2 font-bold text-slate-600"></div><div class="description text-sm font-thin text-slate-400"></div></div></div>`, 8);

/**
 * @zh Box 是将内部元素居中显示的展示组件, 一般用于空状态使用
 */
const Box = OriginComponent(props => {
  return (() => {
    const _el$ = _tmpl$.cloneNode(true),
          _el$2 = _el$.firstChild,
          _el$3 = _el$2.firstChild,
          _el$4 = _el$3.nextSibling;

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

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

    insert(_el$2, () => props.icon, _el$3);

    insert(_el$3, () => props.title);

    insert(_el$4, () => props.subTitle);

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

    effect(_p$ => {
      const _v$ = props.class('cn-box box-border flex h-full flex-col items-center justify-center'),
            _v$2 = props.style;

      _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$;
  })();
});

const CompMap = new Map([['success', () => createComponent(DefaultIcon, {
  "class": "shadow-lg shadow-green-500/50",
  name: "check_circle",
  color: "green",
  size: 50
})], ['error', () => createComponent(DefaultIcon, {
  "class": "shadow-lg shadow-red-500/50",
  name: "close",
  color: "red",
  size: 50
})], ['info', () => createComponent(DefaultIcon, {
  "class": "shadow-lg shadow-blue-500/50",
  name: "info",
  color: "blue",
  size: 50
})], ['warning', () => createComponent(DefaultIcon, {
  "class": "shadow-lg shadow-orange-500/50",
  name: "info",
  color: "orange",
  size: 50
})]]);
/**
 * @zh Result 是状态标识页面
 */

const Result = OriginComponent(props => {
  const IconComp = typeof props.icon === 'string' ? CompMap.get(props.icon) : props.icon;
  return createComponent(Box, mergeProps(props, {
    icon: IconComp
  }));
});

export { Box, Result };
