<?php if (!$options['lock'] && $this->my->allow('add_comment')) { ?>
FD.require()
.script('shared')
.done(function() {

Komento.require()
.script('site/form/form')
.done(function($) {

	$('[data-kt-form]').implement(Komento.Controller.Form, {
		"formElement": "[data-kt-form-element]",
		"location": <?php echo $this->my->canShareLocation() ? 'true' : 'false';?>,
		"location_key": "<?php echo $this->config->get('location_key');?>",
		"attachments": {
			"enabled": <?php echo $this->my->canUploadAttachments() ? 'true' : 'false';?>,
			"upload_max_size": "<?php echo $this->config->get('upload_max_size');?>mb",
			"upload_max_files": "<?php echo $this->config->get('upload_max_file');?>",
			"extensions": "<?php echo $this->config->get('upload_allowed_extension');?>"
		},
		"bbcode": Komento.bbcode,
		"showCode": <?php echo $this->config->get('bbcode_code') ? 'true' : 'false'; ?>,
		"showCaptcha": <?php echo $showCaptcha ? 'true' : 'false'; ?>,
		"recaptcha": <?php echo $this->config->get('antispam_captcha_type') == 1 && $this->config->get('antispam_captcha_enable') ? 'true' : 'false';?>,
		"recaptcha_invisible": <?php echo $this->config->get('antispam_recaptcha_invisible') && $this->config->get('antispam_captcha_type') == 1 ? 'true' : 'false';?>,
		"markupSet": Komento.bbcodeButtons,
		"characterLimit": <?php echo $this->config->get('antispam_max_length_enable') ? $this->config->get('antispam_max_length') : 'false';?>
	});

	const editor = jQuery('[data-kt-editor]');
	const isMentionEnabled = <?php echo $this->config->get('enable_mention') ? 'true' : 'false'; ?>;

	if (isMentionEnabled) {
		const tributeOptions = {
			'values': function (text, callback) {
				Komento.ajax('site/views/comments/searchUsers', {
					"q": text
				}).done(function(result) {
					callback(result);
				});
			},
			'selectTemplate': function (item) {
				return '@' + item.original.key + '­';
			},
			menuItemTemplate: function (item) {
				return item.string;
			},
			fdAccent: '<?php echo $this->config->get('layout_accent');?>',
			fdTheme: '<?php echo $this->config->get('layout_appearance'); ?>'
		};

		$(document).on('kt.init.tribute', function(event, editor) {
			fd.tribute(editor, tributeOptions); 
		});

		fd.tribute(editor, tributeOptions); 
	}

	//[KOMENTO PAID START]
	const isBbcodeEnabled = <?php echo $this->config->get('enable_bbcode') ? 'true' : 'false'; ?>;
	const isEmojiEnabled = <?php echo $this->config->get('bbcode_emoji') ? 'true' : 'false'; ?>;
	const isGiphyEnabled = <?php echo $this->config->get('bbcode_giphy') && KT::giphy()->isEnabled() ? 'true' : 'false'; ?>;

	if (isBbcodeEnabled && (isEmojiEnabled || isGiphyEnabled)) {
		const updatePs = (ps, content) => {
			ps.update();

			// Scroll back to the top
			content.scrollTop = 0;
		};

		if (isEmojiEnabled) {
			FD.require()
			.script('vendor/emoji', 'vendor/perfectscrollbar')
			.done(function() {
				const emojiBrowserWrapper = jQuery('[data-fd-emoji-browser-wrapper]');
				const emojiBrowser = emojiBrowserWrapper.find('[data-fd-emoji-browser]');

				// Initialize the emoji picker
				emojiBrowser.find('[data-fd-emoji-browser-theme]').foundryEmoji({
					'searchPlaceholder': '<?php echo JText::_('COM_KT_EMOJI_PICKER_SEARCH_PLACEHOLDER'); ?>',
					'emptyMessage': '<?php echo JText::_('COM_KT_EMOJI_PICKER_EMPTY_MESSAGE'); ?>'
				});

				const initEmoji = (selector) => {
					fd.dropdown(selector, {
						arrow : false,
						appendTo : document.querySelector('body'),
						onCreate : () => {}, // Override it with empty function to ensure it does nothing
						onDestroy : () => {},
						onHidden : () => {},
						onShow : () => {},
						content : emojiBrowserWrapper.html(),
						onMount : (instance) => {
							if (instance.perfectScrollbar === undefined) {
								instance.popperContent = instance.popper.querySelector('.emoji-content');

								// Need to initialize the Perfect Scrollbar on the dropdown's content too once
								instance.perfectScrollbar = new PerfectScrollbar(instance.popperContent, {
									suppressScrollX: true
								});
							}

							jQuery(document).off('fd.emoji.item.after.select').on('fd.emoji.item.after.select', function(event, emoji) {
								const editor = $(instance.reference).closest('[data-editor-wrapper]').find('[data-kt-editor]');
								const currentPosition = editor[0].selectionStart;
								const value = editor.val();

								editor.val(value.slice(0, currentPosition) + emoji + value.slice(currentPosition));

								// Close the dropdown
								instance.hide();
							});

							jQuery(document).on('fd.emoji.after.search', function() {
								updatePs(instance.perfectScrollbar, instance.popperContent);
							});

							jQuery(document).on('fd.emoji.category.after.select', function() {
								updatePs(instance.perfectScrollbar, instance.popperContent);
							});
						},
						onShown : (instance) => {
							// Always auto focus on the search input
							jQuery(instance.popper).find('[data-fd-emoji-search]').focus();
						},
						trigger : 'click',
						placement: 'bottom'
					});
				};

				$(document).on('kt.init.emoji', function(event, selector) {
					initEmoji(selector);
				});

				// Initialize the dropdown for the emoji picker on the comment form
				initEmoji('.fd-markitup-emoji');
			});
		}

		if (isGiphyEnabled) {
			const giphyBrowser = $('[data-fd-giphy-browser-wrapper]');

			const showTrending = (browser) => {
				browser.find('[data-fd-giphy-trending]').removeClass('t-hidden');
			}

			const hideTrending = (browser) => {
				browser.find('[data-fd-giphy-trending]').addClass('t-hidden');
			}

			const showEmpty = (browser, type) => {
				browser.find('[data-fd-giphy-' + type + '-empty]').addClass('block');
			}

			const hideEmpty = (browser, type) => {
				browser.find('[data-fd-giphy-' + type + '-empty]').removeClass('block');
			}

			let loadGiphy = function(query, type, browser) {
				Komento.ajax('site/views/giphy/search', {
					"query": query,
					"type": type
				}).done(function(hasGiphies, html) {
					const content = browser.find('[data-fd-giphy-' + type + '-content]');
					const list = browser.find('[data-fd-giphy-' + type + '-list]');

					// Remove the loader
					content.removeClass('is-loading');

					if (hasGiphies) {
						list.html(html);
						list.removeClass('t-hidden');

						hideEmpty(browser, type);
					}

					if (!hasGiphies) {
						showEmpty(browser, type);
					}

					$(document).trigger('kt.giphy.after.load', type);
				});
			};

			$(document).on('click', 'a[href="#giphy-gifs"][data-fd-tab]', function() {
				const el = $(this);
				const browser = el.closest('[data-fd-giphy-browser]');
				const trending = browser.find('[data-fd-giphy-trending]');

				// Move the trending label to the gifs content
				browser.find('div[id="giphy-gifs"][data-fd-tab-content]').prepend(trending);

				const currentQuery = browser.data('fd-giphy-gifs-query');

				// Show back the query that the user left before changing to another tab
				browser.find('[data-fd-giphy-search]').val(currentQuery);

				currentQuery ? hideTrending(browser) : showTrending(browser);
			});

			$(document).on('click', 'a[href="#giphy-stickers"][data-fd-tab]', function() {
				const el = $(this);
				const browser = el.closest('[data-fd-giphy-browser]');
				const trending = browser.find('[data-fd-giphy-trending]');

				// Initialize the stickers once if haven't load
				if (browser.find('[data-fd-giphy-stickers-list]').is(':empty')) {
					// Show the loader
					browser.find('[data-fd-giphy-stickers-content]').addClass('is-loading');

					loadGiphy('', 'stickers', browser);
				}

				// Move the trending label to the stickers content
				browser.find('div[id="giphy-stickers"][data-fd-tab-content]').prepend(trending);

				const currentQuery = browser.data('fd-giphy-stickers-query');

				// Show back the query that the user left before changing to another tab
				browser.find('[data-fd-giphy-search]').val(currentQuery);

				currentQuery ? hideTrending(browser) : showTrending(browser);
			});

			$(document).on('keyup', '[data-fd-giphy-search]', $.debounce(function() {
				const el = $(this);
				const query = el.val();
				const browser = el.closest('[data-fd-giphy-browser]');
				const type = browser.find('a[href="#giphy-stickers"][data-fd-tab]').closest('[data-fd-tab-header-item]').hasClass('is-active') ? 'stickers': 'gifs';
				const list = browser.find('[data-fd-giphy-' + type + '-list]'); 

				// Store the current query so that we can show it back after switching back the tab
				browser.attr('data-fd-giphy-' + type + '-query', query);

				// Hide the list
				list.addClass('t-hidden');

				// Show the loader
				browser.find('[data-fd-giphy-' + type + '-content]').addClass('is-loading');

				// Always remove the empty message first
				hideEmpty(browser, type);

				query ? hideTrending(browser) : showTrending(browser);

				loadGiphy(query, type, browser);
			}, 500));

			// Initialize the dropdown for the GIPHY browser
			const initGiphy = (selector) => {
				fd.dropdown(selector, {
					arrow : false,
					appendTo : document.querySelector('body'),
					onCreate : () => {}, // Override it with empty function to ensure it does nothing
					onDestroy : () => {},
					onHidden : () => {},
					onShow : () => {},
					content : giphyBrowser.html(),
					onMount : (instance) => {
						if (instance.gifsLoaded === undefined) {
							instance.gifsLoaded = true;

							const browser = $(instance.popper);
							const trending = browser.find('[data-fd-giphy-trending]');

							// Move the trending label to the gifs content first since the gifs content will always be shown on the first open
							browser.find('div[id="giphy-gifs"][data-fd-tab-content]').prepend(trending);

							// Show the browser
							browser.find('[data-fd-giphy-browser]').removeClass('t-hidden');

							showTrending(browser);

							loadGiphy('', 'gifs', browser);
						}

						// Need to initialize the Perfect Scrollbar on the content of the gifs and stickers tab too once
						if (instance.perfectScrollbar === undefined) {
							instance.perfectScrollbar = {};

							if (instance.popperContent === undefined) {
								instance.popperContent = {};
							}

							instance.popperContent['gifs'] = instance.popper.querySelector('[data-fd-giphy-gifs-content]');

							instance.perfectScrollbar['gifs'] = new PerfectScrollbar(instance.popperContent['gifs'], {
								suppressScrollX: true
							});

							instance.popperContent['stickers'] = instance.popper.querySelector('[data-fd-giphy-stickers-content]');

							instance.perfectScrollbar['stickers'] = new PerfectScrollbar(instance.popperContent['stickers'], {
								suppressScrollX: true
							});
						}


						$(document).off('kt.giphy.after.load').on('kt.giphy.after.load', function(event, type) {
							updatePs(instance.perfectScrollbar[type], instance.popperContent[type]);
						});

						$(document).off('click.kt.giphy.item').on('click.kt.giphy.item', '[data-fd-giphy-item]', function(){
							const el = $(this);
							const editor = $(instance.reference).closest('[data-editor-wrapper]').find('[data-kt-editor]');
							const currentPosition = editor[0].selectionStart;
							const original = el.data('original');
							const value = editor.val();

							editor.val(value.slice(0, currentPosition) + '[giphy]' + original + '[/giphy]' + value.slice(currentPosition));

							// Close the dropdown
							instance.hide();
						});
					},
					onShown : (instance) => {
						// Always auto focus on the search input
						$(instance.popper).find('[data-fd-giphy-search]').focus();
					},
					trigger : 'click',
					placement: 'bottom'
				});
			};

			$(document).on('kt.init.giphy', function(event, selector) {
				initGiphy(selector);
			});

			// Initialize the dropdown for the GIPHY on the comment form
			initGiphy('.fd-markitup-giphy');
		}
	}
	//[KOMENTO PAID END]
});

});
<?php } ?>