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

const _tmpl$ = /*#__PURE__*/template(`<div></div>`, 2),
      _tmpl$2 = /*#__PURE__*/template(`<div><div></div><div></div></div>`, 6);
const Divider = OriginComponent(props => {
  return (() => {
    const _el$ = _tmpl$.cloneNode(true);

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

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

    effect(_p$ => {
      const _v$ = props.vertical,
            _v$2 = props.class('cn-divider flex items-center', props.vertical ? 'h-full flex-col' : 'w-full flex-row'),
            _v$3 = props.style;

      _v$ !== _p$._v$ && setAttribute(_el$, "vertical", _p$._v$ = _v$);
      _v$2 !== _p$._v$2 && className(_el$, _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$;
  })();
});
/**
 * @zh 借鉴 Tailwind 的分割线
 * @link https://tailwindui.com/components?ref=sidebar
 */

const StyleDivider = props => {
  const back = {
    'background-image': `linear-gradient(${props.vertical ? '0' : '90deg'},rgba(56,189,248,0) 0%,#0EA5E9 32.29%,rgba(236,72,153,0.3) 67.19%,rgba(236,72,153,0) 100%)`
  };
  return (() => {
    const _el$2 = _tmpl$2.cloneNode(true),
          _el$3 = _el$2.firstChild,
          _el$4 = _el$3.nextSibling;

    effect(_p$ => {
      const _v$4 = props.vertical ? '-ml-px flex h-full w-[2px] -scale-y-100' : '-mb-px flex h-[2px] w-full -scale-x-100',
            _v$5 = props.vertical ? 'h-full w-full flex-none blur-sm ' : 'w-full flex-none blur-sm ',
            _v$6 = back,
            _v$7 = props.vertical ? '-mt-[100%] h-full w-full flex-none blur-[1px] ' : '-ml-[100%] w-full flex-none blur-[1px] ',
            _v$8 = back;

      _v$4 !== _p$._v$4 && className(_el$2, _p$._v$4 = _v$4);
      _v$5 !== _p$._v$5 && className(_el$3, _p$._v$5 = _v$5);
      _p$._v$6 = style(_el$3, _v$6, _p$._v$6);
      _v$7 !== _p$._v$7 && className(_el$4, _p$._v$7 = _v$7);
      _p$._v$8 = style(_el$4, _v$8, _p$._v$8);
      return _p$;
    }, {
      _v$4: undefined,
      _v$5: undefined,
      _v$6: undefined,
      _v$7: undefined,
      _v$8: undefined
    });

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

export { Divider, StyleDivider };
