import $ from 'jquery';
import { hooks } from 'peepso';
import data from './data';
import './popover';

/**
 * Emoji button for the chat messagebox (full conversation view + "new message" modal). The button is
 * rendered by PeepSoEmoji::filter_messagebox_options(); on `messagebox_init` we wire it to the shared
 * EmojiPopover anchored to the button, inserting at the caret of that messagebox's textarea. Self-contained
 * (no MessageboxOption base) so it doesn't depend on the chat bundle's load order — the popover owns its
 * own toggle/dismiss.
 */
hooks.addAction('messagebox_init', 'emoji', function (messagebox) {
	const $toggle = messagebox.$el.find('[data-ps=option][data-id=emoji]');
	if (!$toggle.length) {
		return;
	}

	const popover = new (peepso.class('EmojiPopover'))({
		onPick: glyph => data.insertAtCursor(messagebox.$textarea, glyph)
	});

	$toggle.on('click', e => {
		e.preventDefault();
		e.stopPropagation();
		popover.toggle($toggle);
	});
});
