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

const _tmpl$$3 = /*#__PURE__*/template(`<span></span>`, 2);

/** @zh 遮罩切割，可以切割为指定形状 */
const Mask = OriginComponent(props => {
  return (() => {
    const _el$ = _tmpl$$3.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-mask', props.squircle && 'mask-squircle', props.hexagon && 'mask-hexagon'),
            _v$2 = Object.assign(props.url ? {
        //! CSS Bug 直接使用 mask-image 属性无法下载到图片
        '--mask-image': `url('${props.url}')`
      } : {}, 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 _tmpl$$2 = /*#__PURE__*/template(`<div></div>`, 2);

const preCount = (count, maxCount = 99) => {
  return count > maxCount ? maxCount + '+' : count.toString();
};
/** @zh 小红点 */


const Badge = OriginComponent(props => {
  const className$1 = 'cn-badge flex justify-center items-center rounded-full select-none text-xs px-1 bg-red-400 text-white';
  return (() => {
    const _el$ = _tmpl$$2.cloneNode(true);

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

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

    insert(_el$, (() => {
      const _c$ = memo(() => !!(typeof props.count === 'string' || typeof props.count === 'number'), true);

      return () => _c$() ? preCount(props.count, props.maxCount) : props.children;
    })());

    effect(_p$ => {
      const _v$ = `${props.class(className$1) || ""} dot`,
            _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 _tmpl$$1 = /*#__PURE__*/template(`<span></span>`, 2);

/** @zh 将组件布局到指定的位置 */
const Position = OriginComponent(props => {
  const [style$1, others] = splitProps(props, ['left', 'right', 'top', 'bottom', 'z-index', 'inset']);
  const Style = reflect(() => {
    return Object.assign({}, style$1, others.style, {
      width: props.full && '100%',
      height: props.full && '100%'
    });
  });
  return (() => {
    const _el$ = _tmpl$$1.cloneNode(true);

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

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

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

    effect(_p$ => {
      const _v$ = others.class('cn-position absolute'),
            _v$2 = !!props.inactive,
            _v$3 = Style();

      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
      _v$2 !== _p$._v$2 && _el$.classList.toggle("pointer-events-none", _p$._v$2 = _v$2);
      _p$._v$3 = style(_el$, _v$3, _p$._v$3);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined,
      _v$3: undefined
    });

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

const _tmpl$ = /*#__PURE__*/template(`<div></div>`, 2);

/** @zh 将组件内部变为绝对定位, 可以配合 Position 实现角落位置 */
const Relative = OriginComponent(props => {
  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-relative', props.fixed ? 'fixed' : 'relative'),
            _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$;
  })();
});

export { Badge, Mask, Position, Relative };
