import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { u as useEvent } from './chunks/d4058887.js';
import { a as useRef, b as useState, u as useEffect } from './chunks/4ccc6eeb.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';

var style = "$color: #eee;\n\n.picker {\n  margin-left: -20px;\n}\n\n.bubble {\n  background-color: #eee;\n  border: 2px solid #767373;\n  border-radius: 5px;\n  color: #333;\n  font: 16px/24px sans-serif;\n  padding: 12px 24px;\n  position: relative;\n}\n\n.bubble:after,\n.bubble:before {\n  border-left: 20px solid transparent;\n  border-right: 20px solid transparent;\n  border-bottom: 20px solid #eee;\n  top: -20px;\n  content: '';\n  left: 20%;\n  margin-left: -20px;\n  position: absolute;\n}\n\n.bubble:before {\n  border-left: 23px solid transparent;\n  border-right: 23px solid transparent;\n  border-bottom: 23px solid;\n  border-bottom-color: inherit;\n  top: -23px;\n  margin-left: -23px;\n}\n";

const array = ["😀", "😬", "😁", "😂", "🤣", "😃"];

const KunEmojiPicker = () => {
  const onEvent = useEvent("SelectEvent", {
    bubbles: true,
    composed: true
  });
  const buttonRef = useRef();
  const [loaded, setLoaded] = useState(false);
  const b = useRef();
  useEffect(() => {
    // console.log('b.cu', b.current)
    // buttonRef.current.parent = b.current;
    console.log("b.cu", b.current);

    if (b.current != null) {
      setLoaded(true);
    }
  }, [b.current]);

  const onClick = item => {
    const a = item.target;
    const regex = new RegExp(/<% emojiSequence %>|\p{Emoji_Presentation}|\p{Emoji}\uFE0F?|\p{Emoji_Modifier_Base}/gu);
    const r = a.innerHTML.match(regex)[0];

    if (r !== "6") {
      onEvent({
        data: r
      });
    } // TODO emit erray

  };

  return h("host", null, h("style", null, style), h("div", {
    className: "relative"
  }, h("rb-popover", {
    position: "bottom",
    "icon-kind": "smile",
    kind: "neutral",
    "icon-size": 1.2
  }, h("div", {
    class: "w-64 flex flex-wrap justify-center pt-2"
  }, array.map((item, index) => h("div", {
    key: String(index),
    onclick: e => onClick(e),
    className: "cursor-pointer pr-2 mb-4 border-solid mx-5 border-1 border-gray-200 text-2xl"
  }, h("span", null, item)))))));
};

var kunEmojiPicker = getComponentOrDefine("kun-emoji-picker", KunEmojiPicker);

export default kunEmojiPicker;
//# sourceMappingURL=kun-emoji-picker.js.map
