import { html } from "lit-html";
import { __ } from '@converse/headless/i18n';
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
import xss from "xss/dist/xss";
const i18n_search = __('Search');
const i18n_search_results = __('Search results');
const skintones = ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'];
const emoji_category = (o) => {
const category_emoji = xss.filterXSS(o.transformCategory(o.emoji_categories[o.category]), {'whitelist': {'img': []}});
return html`
${unsafeHTML(category_emoji)}
`;
}
const emoji_picker_header = (o) => html`
${ Object.keys(o.emoji_categories).map(category => (o.emoji_categories[category] ? emoji_category(Object.assign({category}, o)) : '')) }
`;
const emoji_item = (o) => {
let emoji;
if (o._converse.use_system_emojis) {
emoji = o.transform(o.emoji.sn);
} else {
emoji = unsafeHTML(xss.filterXSS(o.transform(o.emoji.sn), {'whitelist': {'img': []}}));
}
return html`
${emoji}
`;
}
const search_results = (o) => html`
${i18n_search_results}
${ o.search_results.map(emoji => emoji_item(Object.assign({emoji}, o))) }
`;
const emojis_for_category = (o) => html`
${ __(o._converse.emoji_category_labels[o.category]) }
${ Object.values(o.emojis_by_category[o.category]).map(emoji => emoji_item(Object.assign({emoji}, o))) }
`;
const skintone_emoji = (o) => {
const shortname = ':'+o.skintone+':';
let emoji;
if (o._converse.use_system_emojis) {
emoji = o.transform(shortname);
} else {
emoji = unsafeHTML(xss.filterXSS(o.transform(shortname), {'whitelist': {'img': []}}));
}
return html`
${emoji}
`;
}
const all_emojis = (o) => html`
${Object.keys(o.emoji_categories).map(category => (o.emoji_categories[category] ? emojis_for_category(Object.assign({category}, o)) : ''))}
`;
export default (o) => html`
${search_results(o)}
${all_emojis(o)}
${ skintones.map(skintone => skintone_emoji(Object.assign({skintone}, o))) }
`;