// src/EmojiPicker.tsx
import {
  For,
  Show,
  createMemo,
  createResource
} from "solid-js";
var ORIGIN_GROUP_DATA_KEY = "data-by-group.json";
var ORIGIN_COMPONENTS_KEY = "data-emoji-components.json";
var ORIGIN_EMOJI_KEY = "data-by-emoji.json";
var CDN_URL = "https://unpkg.com/unicode-emoji-json@0.6.0/";
var GROUP_DATA_KEY = `${CDN_URL}${ORIGIN_GROUP_DATA_KEY}`;
var COMPONENTS_KEY = `${CDN_URL}${ORIGIN_COMPONENTS_KEY}`;
var EMOJI_KEY = `${CDN_URL}${ORIGIN_EMOJI_KEY}`;
function setCDN(url) {
  GROUP_DATA_KEY = `${url}${ORIGIN_GROUP_DATA_KEY}`;
  COMPONENTS_KEY = `${url}${ORIGIN_COMPONENTS_KEY}`;
  EMOJI_KEY = `${url}${ORIGIN_EMOJI_KEY}`;
}
function setComponentsURL(url) {
  COMPONENTS_KEY = url;
}
function setEmojiURL(url) {
  EMOJI_KEY = url;
}
function setEmojiGroupURL(url) {
  GROUP_DATA_KEY = url;
}
var EMOJI_DATA;
var EMOJI_COMPONENTS;
var EMOJI_GROUP_DATA;
async function loadEmojiData() {
  if (!EMOJI_DATA) {
    const response = await fetch(EMOJI_KEY);
    EMOJI_DATA = await response.json();
  }
  return EMOJI_DATA;
}
async function loadEmojiGroupData() {
  if (!EMOJI_GROUP_DATA) {
    const response = await fetch(GROUP_DATA_KEY);
    EMOJI_GROUP_DATA = await response.json();
  }
  return EMOJI_GROUP_DATA;
}
async function loadEmojiComponents() {
  if (!EMOJI_COMPONENTS) {
    const response = await fetch(COMPONENTS_KEY);
    EMOJI_COMPONENTS = await response.json();
  }
  return EMOJI_COMPONENTS;
}
function setEmojiData(data) {
  EMOJI_DATA = data;
}
function setEmojiComponents(data) {
  EMOJI_COMPONENTS = data;
}
function useEmojiData() {
  const [data] = createResource(loadEmojiData);
  return data;
}
function useEmojiComponents() {
  const [data] = createResource(loadEmojiComponents);
  return data;
}
function useEmojiGroupData() {
  const [data] = createResource(loadEmojiGroupData);
  return data;
}
var SKIN_TONE_TO_COMPONENT = {
  light: "light_skin_tone",
  "medium-light": "medium_light_skin_tone",
  medium: "medium_skin_tone",
  "medium-dark": "medium_dark_skin_tone",
  dark: "dark_skin_tone"
};
function convertSkinToneToComponent(components, skinTone) {
  if (skinTone) {
    return components[SKIN_TONE_TO_COMPONENT[skinTone]];
  }
  return void 0;
}
var VARIATION = "️";
var ZWJ = "‍";
function getEmojiWithSkinTone(emojis, emoji, skinTone) {
  if (!(skinTone && emoji.skin_tone_support)) {
    return emoji.emoji;
  }
  const emojiWithSkinTone = emoji.emoji.split(ZWJ).map((chunk) => {
    if (chunk in emojis && emojis[chunk].skin_tone_support) {
      return `${chunk}${skinTone}`;
    }
    return chunk;
  }).join(ZWJ);
  const emojiWithoutVariation = emojiWithSkinTone.replaceAll(`${VARIATION}${skinTone}`, `${skinTone}`);
  return emojiWithoutVariation;
}
function DEFAULT_EMOJI_RENDER(emojis, emoji, components, skinTone) {
  return <span class="emoji">{getEmojiWithSkinTone(
    emojis,
    emoji,
    convertSkinToneToComponent(components, skinTone)
  )}</span>;
}
function EmojiPicker(props) {
  const emojiData = useEmojiData();
  const componentData = useEmojiComponents();
  const emojiGroupData = useEmojiGroupData();
  const renderEmoji = createMemo(() => props.renderEmoji || DEFAULT_EMOJI_RENDER);
  return <div class="emoji-picker">{createMemo(() => {
    const emoji = emojiData();
    const components = componentData();
    const emojiGroup = emojiGroupData();
    if (emoji && components && emojiGroup) {
      return <For each={emojiGroup}>{(group) => <div class="emoji-section"><span class="emoji-section-title">{group.name}</span><div class="emoji-items"><For each={group.emojis}>{(emojiItem) => <Show when={props.filter ? props.filter(emojiItem) : true}><button
        type="button"
        class="emoji-button"
        onClick={props.onEmojiClick && [props.onEmojiClick, emojiItem]}
        onFocus={props.onEmojiFocus && [props.onEmojiFocus, emojiItem]}
        onMouseOver={props.onEmojiHover && [props.onEmojiHover, emojiItem]}
        title={emojiItem.name}
      >{renderEmoji()(emoji, emojiItem, components, props.skinTone)}</button></Show>}</For></div></div>}</For>;
    }
    return null;
  })()}</div>;
}
export {
  EmojiPicker,
  convertSkinToneToComponent,
  getEmojiWithSkinTone,
  loadEmojiComponents,
  loadEmojiData,
  loadEmojiGroupData,
  setCDN,
  setComponentsURL,
  setEmojiComponents,
  setEmojiData,
  setEmojiGroupURL,
  setEmojiURL,
  useEmojiComponents,
  useEmojiData,
  useEmojiGroupData
};
//# sourceMappingURL=index.jsx.map