import { spread, insert, effect, className, style, template, createComponent, classList } from 'solid-js/web';
import { OriginComponent, extendsEvent } from '@cn-ui/use';
import { createMemo } from 'solid-js';
import '@fontsource/material-icons-rounded/index.css';

const _tmpl$$1 = /*#__PURE__*/template(`<nav></nav>`, 2);
const Icon = OriginComponent(props => {
  const fontSize = createMemo(() => {
    return typeof props.size === 'number' ? props.size + 'px' : props.size;
  });
  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$, () => props.name, null);

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

    effect(_p$ => {
      const _v$ = props.class('cn-icon-font inline-flex origin-center select-none items-center justify-center align-bottom', {
        spin: props.spin ?? false
      }),
            _v$2 = { ...props.style,
        'font-size': fontSize()
      };

      _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$ = /*#__PURE__*/template(`<span></span>`, 2);
const DefaultIcon = OriginComponent(props => {
  const fontSize = createMemo(() => {
    return typeof props.size === 'number' ? props.size + 'px' : props.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$, createComponent(Icon, {
      get name() {
        return props.name;
      },

      get size() {
        return props.size;
      },

      get spin() {
        return props.spin;
      }

    }));

    effect(_p$ => {
      const _v$ = props.class('cn-icon-wrapper inline-flex h-[1.5em] w-[1.5em] cursor-pointer items-center justify-center rounded-full p-2'),
            _v$2 = { ...props.style,
        'font-size': fontSize()
      },
            _v$3 = {
        'bg-red-50 text-red-500': props.color === 'red',
        'bg-green-50 text-green-500': props.color === 'green',
        'bg-orange-50 text-orange-500': props.color === 'orange',
        'bg-slate-50 text-slate-500': props.color === 'gray',
        'bg-blue-50 text-blue-500': props.color === 'blue'
      };

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

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

export { DefaultIcon, Icon };
