import { createWidget } from 'discourse/widgets/widget';
import { iconNode } from 'discourse/helpers/fa-icon-node';
import { h } from 'virtual-dom';
import { escapeExpression } from 'discourse/lib/utilities';

function renderIcon(name, key, canAct) {
  const iconArgs = key === 'unpinned' ? { 'class': 'unpinned' } : null,
        icon = iconNode(name, iconArgs);

  const attributes = { title: escapeExpression(I18n.t(`topic_statuses.${key}.help`)) };
  return h(`${canAct ? 'a' : 'span'}.topic-status`, attributes, icon);
}

export default createWidget('topic-status', {
  tagName: 'div.topic-statuses',

  html(attrs) {
    const topic = attrs.topic;
    const canAct = this.currentUser && !attrs.disableActions;

    const result = [];
    const renderIconIf = (conditionProp, name, key) => {
      if (!topic.get(conditionProp)) { return; }
      result.push(renderIcon(name, key, canAct));
    };

    renderIconIf('is_warning', 'envelope', 'warning');

    if (topic.get('closed') && topic.get('archived')) {
      renderIcon('lock', 'locked_and_archived');
    } else {
      renderIconIf('closed', 'lock', 'locked');
      renderIconIf('archived', 'lock', 'archived');
    }

    renderIconIf('pinned', 'thumb-tack', 'pinned');
    renderIconIf('unpinned', 'thumb-tack', 'unpinned');
    renderIconIf('invisible', 'eye-slash', 'invisible');

    return result;
  }
});