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

const _tmpl$ = /*#__PURE__*/template(`<div><div class="content"></div></div>`, 4);

const COLORS = ['slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
const defaultProps = {
  size: 'default',
  visible: true,
  checked: false
};
const Tag = OriginComponent(baseProps => {
  const props = mergeProps(defaultProps, baseProps);
  const visible = typeof props.visible === 'boolean' ? atom(props.visible) : props.visible;
  const checked = typeof props.checked === 'boolean' ? atom(props.checked) : props.checked;
  const closing = atom(false);

  const Close = async e => {
    closing(true);
    if (props.onClose) await props.onClose(e);
    visible(false);
    closing(false);
  };

  const _color = createMemo(() => {
    const color = props.color;
    return color ? COLORS.indexOf(color) !== -1 ? color : '' : '';
  });

  const control = useEventController({});
  return createComponent(Show, {
    get when() {
      return visible();
    },

    get children() {
      const _el$ = _tmpl$.cloneNode(true),
            _el$2 = _el$.firstChild;

      addEventListener(_el$, "click", control([emitEvent(props.onClick), () => {
        if (props.checkable) {
          const state = !checked();
          checked(state);
          props.onCheck && props.onCheck(state);
        }
      }]), true);

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

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

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

      insert(_el$, createComponent(Switch, {
        get children() {
          return [createComponent(Match, {
            get when() {
              return closing();
            },

            get children() {
              return createComponent(Icon, {
                name: "refresh",
                spin: true,
                "class": "loading-icon"
              });
            }

          }), createComponent(Match, {
            get when() {
              return props.closable && props.closeIcon !== null;
            },

            get children() {
              return createComponent(Icon, {
                name: "close",
                "class": `close-icon`,
                onClick: Close
              });
            }

          })];
        }

      }), null);

      effect(_p$ => {
        const _v$ = props.style,
              _v$2 = props.class('cn-tag', 'box-border inline-flex cursor-pointer select-none items-center rounded-md px-2 py-1 text-sm font-light leading-none ', {
          [`loading`]: closing(),
          [`checked`]: checked(),
          [`bordered`]: props.bordered
        }, props.size, props.className, _color());

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

      return _el$;
    }

  });
});

delegateEvents(["click"]);

export { COLORS, Tag };
