import { insert, memo, createComponent, effect, className, style, template } from 'solid-js/web';
import { For } from 'solid-js';
import { DefaultIcon, getOutSpace, Position, Space, Anime } from '@cn-ui/core';
import 'animate.css/source/fading_entrances/fadeInDown.css';
import 'animate.css/source/fading_exits/fadeOutUp.css';
import { createStore } from 'solid-js/store';
import { OriginComponent } from '@cn-ui/use';

const _tmpl$ = /*#__PURE__*/template(`<div><span></span><span></span></div>`, 6);
/** 渲染存在的数据 */

const [MessageQueue, setMessage] = createStore([]);

/** 渲染消息卡片 */
const MessageCard = OriginComponent(props => {
  const close = () => setMessage(list => list.filter(i => i.id !== props.id));

  return (() => {
    const _el$ = _tmpl$.cloneNode(true),
          _el$2 = _el$.firstChild,
          _el$3 = _el$2.nextSibling;

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

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

    insert(_el$3, () => props.content);

    insert(_el$, (() => {
      const _c$ = memo(() => !!props.closable, true);

      return () => _c$() && createComponent(DefaultIcon, {
        "class": "h-5 w-5",
        name: "close",
        color: "gray",
        onClick: close
      });
    })(), null);

    effect(_p$ => {
      const _v$ = props.class('cn-message pointer-events-auto relative flex flex-row items-center justify-evenly overflow-hidden rounded-lg border border-solid border-slate-200 bg-white px-4 py-1 text-center leading-none shadow-md'),
            _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 Root = () => {
  return createComponent(Position, {
    left: "50%",
    top: "10%",
    style: {
      transform: 'translate(-50%, -5%)',
      height: '100vh'
    },

    get children() {
      return createComponent(Space, {
        transition: {
          enterActiveClass: 'animated fadeInDown',
          exitActiveClass: 'animated fadeOutUp'
        },
        vertical: true,
        className: "animated",
        size: "mini",

        get children() {
          return createComponent(Anime, {
            group: true,
            "in": "fadeInDown",
            out: "fadeOutUp",

            get children() {
              return createComponent(For, {
                each: MessageQueue,
                children: props => {
                  return createComponent(MessageCard, props);
                }
              });
            }

          });
        }

      });
    }

  });
};

const sendMessage = (config, ...over) => {
  const _config = Object.assign({
    id: Math.random().toString()
  }, ...over, typeof config === 'string' ? {
    content: config
  } : config); // 1. 加入消息队列


  setMessage(items => {
    const index = items.findIndex(i => {
      return i.id === _config.id;
    });
    return index === -1 ? [...items, _config] : [...items.splice(index, 1, _config)];
  }); // 2. 添加删除信息

  const close = () => setMessage(list => list.filter(i => i.id !== _config.id)); // console.log(_config);


  if (_config.duration > 0) {
    setTimeout(() => {
      close();
    }, _config.duration);
  }

  return close;
};

class Message {
  static inited = false;

  static init() {
    if (Message.inited) return;
    getOutSpace().top(i => [...i, Root]);
    Message.inited = true;
  }

  static DefaultConfig = {
    duration: 3000,
    closable: false
  };

  static success(config) {
    return sendMessage(config, Message.DefaultConfig, {
      type: 'success',
      icon: () => DefaultIcon({
        name: 'check_circle',
        color: 'green'
      })
    });
  }

  static loading(config) {
    return sendMessage(config, Message.DefaultConfig, {
      type: 'loading',
      icon: () => DefaultIcon({
        name: 'refresh',
        color: 'gray',
        spin: true
      })
    });
  }

  static info(config) {
    return sendMessage(config, Message.DefaultConfig, {
      type: 'info',
      icon: () => DefaultIcon({
        name: 'info',
        color: 'blue'
      })
    });
  }

  static warning(config) {
    return sendMessage(config, Message.DefaultConfig, {
      type: 'warning',
      icon: () => DefaultIcon({
        name: 'warning_amber',
        color: 'orange'
      })
    });
  }

  static error(config) {
    return sendMessage(config, Message.DefaultConfig, {
      type: 'error',
      icon: () => DefaultIcon({
        name: 'error',
        color: 'red'
      })
    });
  }

  static normal(config) {
    return sendMessage(config, Message.DefaultConfig, {
      type: 'normal'
    });
  }

}

export { Message };
