import { useEvent, useRef, useState, useEffect, h } from 'atomico';
import { g as getComponentOrDefine } from './chunks/65ef80fe.js';

var style = ".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 _jsxFileName = "/Users/rang/rang/frond_ng/packages/six/src/components/kun-emoji-picker/kun-emoji-picker.tsx";
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', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 48}}
      , h('style', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 49}}, style)
      , h('div', { className: "relative", __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 50}}
        , h('rb-popover', { position: "bottom", 'icon-kind': "smile", kind: "neutral", 'icon-size': 1.2, __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 51}}
          , h('div', { class: "w-64 flex flex-wrap justify-center pt-2"    , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 52}}
            , 
                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"
                   , __self: undefined, __source: {fileName: _jsxFileName, lineNumber: 55}}
                  
                    , h('span', {__self: undefined, __source: {fileName: _jsxFileName, lineNumber: 61}}, item)
                  )
                ))
              
          )
        )
      )
    )
  );
};

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

export default kunEmojiPicker;
