import { addEventListener, spread, insert, createComponent, memo, effect, className, style, setAttribute, delegateEvents, template } from 'solid-js/web';
import { Icon } from '@cn-ui/core';
import { mergeProps, Show } from 'solid-js';
import { OriginComponent, atomization, reflect, useEventController, emitEvent, extendsEvent } from '@cn-ui/use';

/** 专属于 Button 的颜色表 */
const Color = {
  white: 'bg-white text-black',
  slate: 'bg-slate-600 text-slate-50',
  gray: 'bg-gray-600 text-slate-50',
  zinc: 'bg-zinc-600 text-slate-50',
  neutral: 'bg-neutral-600 text-slate-50',
  stone: 'bg-stone-600 text-slate-50',
  red: 'bg-red-600 text-slate-50',
  orange: 'bg-orange-600 text-slate-50',
  amber: 'bg-amber-600 text-slate-50',
  yellow: 'bg-yellow-600 text-slate-50',
  lime: 'bg-lime-600 text-slate-50',
  green: 'bg-green-600 text-slate-50',
  emerald: 'bg-emerald-600 text-slate-50',
  teal: 'bg-teal-600 text-slate-50',
  cyan: 'bg-cyan-600 text-slate-50',
  sky: 'bg-sky-600 text-slate-50',
  blue: 'bg-blue-600 text-slate-50',
  indigo: 'bg-indigo-600 text-slate-50',
  violet: 'bg-violet-600 text-slate-50',
  purple: 'bg-purple-600 text-slate-50',
  fuchsia: 'bg-fuchsia-600 text-slate-50',
  pink: 'bg-pink-600 text-slate-50',
  rose: 'bg-rose-600 text-slate-50'
};
/** 专属于 Button 的颜色表 */

const TextColor = {
  white: 'bg-white text-black',
  slate: 'text-slate-600',
  gray: 'text-gray-600',
  zinc: 'text-zinc-600',
  neutral: 'text-neutral-600',
  stone: 'text-stone-600',
  red: 'text-red-600',
  orange: 'text-orange-600',
  amber: 'text-amber-600',
  yellow: 'text-yellow-600',
  lime: 'text-lime-600',
  green: 'text-green-600',
  emerald: 'text-emerald-600',
  teal: 'text-teal-600',
  cyan: 'text-cyan-600',
  sky: 'text-sky-600',
  blue: 'text-blue-600',
  indigo: 'text-indigo-600',
  violet: 'text-violet-600',
  purple: 'text-purple-600',
  fuchsia: 'text-fuchsia-600',
  pink: 'text-pink-600',
  rose: 'text-rose-600'
};
const SizeTrans = {
  mini: 'h-6 px-2 text-xs',
  small: 'h-8 px-3 text-sm',
  normal: 'h-10 px-4',
  large: 'h-12 px-4 text-lg'
};

const _tmpl$ = /*#__PURE__*/template(`<button><span></span></button>`, 4);
const defaultProps = {
  color: 'blue',
  size: 'normal'
};
const Button = OriginComponent(baseProps => {
  const props = mergeProps(defaultProps, baseProps);
  const loading = atomization(props.loading);

  const getColorSet = () => {
    if (props.text) return TextColor;
    return Color;
  };

  const radius = reflect(() => {
    if (props.round) return 'rounded-2xl';
    if (props.square) return 'rounded-none';
    return 'rounded';
  });
  const control = useEventController({});
  return (() => {
    const _el$ = _tmpl$.cloneNode(true),
          _el$2 = _el$.firstChild;

    addEventListener(_el$, "click", control([() => loading(true), emitEvent(props.onClick), () => loading(false)]), true);

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

    spread(_el$, () => extendsEvent(props, ['onClick']), false, true);

    insert(_el$, createComponent(Show, {
      get when() {
        return loading();
      },

      get children() {
        return memo(() => !!props.icon, true)() ? props.icon : createComponent(Icon, {
          name: "refresh",
          spin: true
        });
      }

    }), _el$2);

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

    effect(_p$ => {
      const _v$ = props.class('cn-btn', reflect(() => SizeTrans[props.size])(), reflect(() => getColorSet()[props.color])(), props.text && 'border-none hover:bg-slate-100/50', loading() && 'pointer-events-none', props.block && 'w-full', props.disabled && 'cursor-not-allowed opacity-70', radius(), 'inline-flex select-none items-center justify-center whitespace-nowrap px-4 py-2 text-sm ', ' transition-all duration-300 focus:outline-none focus:brightness-95 active:scale-95'),
            _v$2 = { ...props.style,
        'border-radius': props.round ? '4em' : props.square ? '0' : '0.6em'
      },
            _v$3 = props.type;

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

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

delegateEvents(["click"]);

export { Button };
