import { getActions, getGlobal } from '../../global';

import { selectCustomEmoji } from '../../global/selectors';
import { throttle } from '../schedulers';
import { addCustomEmojiInputRenderCallback } from './customEmojiManager';

let LOAD_QUEUE = new Set<string>();
const RENDER_HISTORY = new Set<string>();
const THROTTLE = 200;
const LIMIT_PER_REQUEST = 100;

const loadFromQueue = throttle(() => {
  const queue = [...LOAD_QUEUE];

  const queueToLoad = queue.slice(0, LIMIT_PER_REQUEST);
  const otherQueue = queue.slice(LIMIT_PER_REQUEST);

  getActions().loadCustomEmojis({
    ids: queueToLoad,
  });

  LOAD_QUEUE = new Set(otherQueue);

  // Schedule next load
  if (LOAD_QUEUE.size) {
    loadFromQueue();
  }
}, THROTTLE, false);

const updateLastRendered = throttle(() => {
  getActions().updateLastRenderedCustomEmojis({
    ids: [...RENDER_HISTORY].reverse(),
  });

  RENDER_HISTORY.clear();
}, THROTTLE, false);

function notifyCustomEmojiRender(emojiId: string) {
  RENDER_HISTORY.add(emojiId);
  updateLastRendered();
}

addCustomEmojiInputRenderCallback(notifyCustomEmojiRender);

export default function ensureCustomEmoji(id?: string) {
  if (!id) return;
  notifyCustomEmojiRender(id);

  if (selectCustomEmoji(getGlobal(), id)) {
    return;
  }

  LOAD_QUEUE.add(id);
  loadFromQueue();
}
