/* global timeAgo, filterXSS */

/* eslint-disable no-multi-str */

function buildArticleHTML(article) {
  if (article && article.class_name === 'PodcastEpisode') {
    return `<article class="crayons-story crayons-podcast-episode mb-2">
        <div class="crayons-story__body flex flex-start">
          <a href="${article.podcast.slug}" class="crayons-podcast-episode__cover">
            <img src="${article.podcast.image_url}" alt="${article.podcast.title}" />
          </a>
          <div class="pt-2 flex-1">
            <p class="crayons-podcast-episode__author">
              ${article.podcast.title}
            </p>
            <h2 class="crayons-podcast-episode__title crayons-story__title mb-0">
              <a href="${article.path}" id="article-link-${article.id}">
                ${article.podcast.title}
              </a>
            </h2>
          </div>
        </div>
      </article>`;
  }

  if (article) {
    var container = document.getElementById('index-container');

    var flareTag = '';
    var currentTag = '';
    if (container) {
      currentTag = JSON.parse(container.dataset.params).tag;
    }
    if (article.flare_tag && currentTag !== article.flare_tag.name) {
      flareTag =
        "<a href='/t/" +
        article.flare_tag.name +
        "' class='crayons-tag' style='background:" +
        article.flare_tag.bg_color_hex +
        ';color:' +
        article.flare_tag.text_color_hex +
        "'><span className='crayons-tag__prefix'>#</span>" +
        article.flare_tag.name +
        '</a>';
    }
    if (article.class_name === 'PodcastEpisode') {
      flareTag = "<span class='crayons-story__flare-tag'>podcast</span>";
    }
    if (article.class_name === 'Comment') {
      flareTag = "<span class='crayons-story__flare-tag'>comment</span>";
    }
    if (article.class_name === 'User') {
      flareTag =
        "<span class='crayons-story__flare-tag' style='background:#5874d9;color:white;'>person</span>";
    }

    var tagString = '';
    var tagList = article.tag_list || article.cached_tag_list_array || [];
    if (flareTag) {
      tagList = tagList.filter(function (tag) {
        return tag !== article.flare_tag.name;
      });
      tagString += flareTag;
    }
    if (tagList) {
      tagList.forEach(function buildTagString(t) {
        tagString =
          tagString +
          '<a href="/t/' +
          t +
          '" class="crayons-tag"><span class="crayons-tag__prefix">#</span>' +
          t +
          '</a>\n';
      });
    }

    var commentsDisplay = '';
    var commentsCount = '0';
    if ((article.comments_count || '0') > 0) {
      commentsCount = article.comments_count || '0';
    }
    if (article.class_name !== 'User') {
      commentsDisplay =
        '<a href="' +
        article.path +
        '#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left "><svg class="crayons-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"/></svg>' +
        commentsCount +
        '<span class="hidden s:inline">&nbsp;comments</span></a>';
    }

    var rc = article.public_reactions_count;
    var reactionsCount = rc || '0';
    var reactionsDisplay = '';

    if (article.class_name !== 'User') {
      reactionsDisplay =
        '<a href="' +
        article.path +
        '" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"><svg class="crayons-icon" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"/></svg>' +
        reactionsCount +
        '<span class="hidden s:inline">&nbsp;reactions</span></a>';
    }

    var picUrl;
    var profileUsername;
    var userName;
    if (article.class_name === 'PodcastEpisode') {
      picUrl = article.main_image;
      profileUsername = article.slug;
      userName = article.title;
    } else {
      picUrl = article.user.profile_image_90;
      profileUsername = article.user.username;
      userName = article.user.name;
    }
    var orgHeadline = '';
    var forOrganization = '';
    var organizationLogo = '';
    var organizationClasses = 'crayons-avatar--l';

    if (
      article.organization &&
      !document.getElementById('organization-article-index')
    ) {
      organizationLogo =
        '<a href="/' +
        article.organization.slug +
        '" class="crayons-logo crayons-logo--l"><img alt="' +
        article.organization.name +
        ' logo" src="' +
        article.organization.profile_image_90 +
        '" class="crayons-logo__image" loading="lazy"/></a>';
      forOrganization =
        '<span><span class="crayons-story__tertiary fw-normal"> for </span><a href="/' +
        article.organization.slug +
        '" class="crayons-story__secondary fw-medium">' +
        article.organization.name +
        '</a></span>';
      organizationClasses =
        'crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted';
    }

    var timeAgoInWords = '';
    if (article.published_at_int) {
      timeAgoInWords = timeAgo({ oldTimeInSeconds: article.published_at_int });
    }

    var publishDate = '';
    if (article.readable_publish_date) {
      if (article.published_timestamp) {
        publishDate =
          '<time datetime="' +
          article.published_timestamp +
          '">' +
          article.readable_publish_date +
          ' ' +
          timeAgoInWords +
          '</time>';
      } else {
        publishDate =
          '<time>' +
          article.readable_publish_date +
          ' ' +
          timeAgoInWords +
          '</time>';
      }
    }

    var meta =
      '<div class="crayons-story__meta">\
      <div class="crayons-story__author-pic">\
        ' +
      organizationLogo +
      '\
        <a href="/' +
      profileUsername +
      '" class="crayons-avatar ' +
      organizationClasses +
      '">\
          <img src="' +
      picUrl +
      '" alt="' +
      profileUsername +
      ' profile" class="crayons-avatar__image" loading="lazy" />\
        </a>\
      </div>\
      <div>\
        <p>\
          <a href="/' +
      profileUsername +
      '" class="crayons-story__secondary fw-medium">' +
      filterXSS(article.user.name) +
      '</a>\
          ' +
      forOrganization +
      '\
        </p>\
        <a href="' +
      article.path +
      '" class="crayons-story__tertiary fs-xs">\
          ' +
      publishDate +
      '\
        </a>\
      </div>\
    </div>';

    var bodyTextSnippet = '';
    var searchSnippetHTML = '';
    if (article.highlight && article.highlight.body_text.length > 0) {
      var firstSnippetChar = article.highlight.body_text[0];
      var startingEllipsis = '';
      if (firstSnippetChar.toLowerCase() !== firstSnippetChar.toUpperCase()) {
        startingEllipsis = '…';
      }
      bodyTextSnippet =
        startingEllipsis + article.highlight.body_text.join('...') + '…';
      if (bodyTextSnippet.length > 0) {
        searchSnippetHTML =
          '<div class="crayons-story__snippet mb-1">' +
          bodyTextSnippet +
          '</div>';
      }
    }

    var readingTimeHTML = '';
    if (article.class_name === 'Article') {
      // we have ` ... || null` for the case article.reading_time is undefined
      readingTimeHTML =
        '<small class="crayons-story__tertiary fs-xs mr-2">' +
        ((article.reading_time || null) < 1
          ? '1 min'
          : article.reading_time + ' min') +
        ' read</small>';
    }

    var saveButton = '';
    if (article.class_name === 'Article') {
      saveButton =
        '<button type="button" id="article-save-button-' +
        article.id +
        '" class="crayons-btn crayons-btn--secondary crayons-btn--s bookmark-button" data-reactable-id="' +
        article.id +
        '">\
                      <span class="bm-initial">Save</span>\
                      <span class="bm-success">Saved</span>\
                    </button>';
    } else if (article.class_name === 'User') {
      saveButton =
        '<button type="button" class="crayons-btn crayons-btn--secondary crayons-btn--icon-left fs-s bookmark-button article-engagement-count engage-button follow-action-button follow-user"\
                       data-info=\'{"id":' +
        article.id +
        ',"className":"User"}\' data-follow-action-button>\
                       &nbsp;\
                    </button>';
    }

    var videoHTML = '';
    if (article.cloudinary_video_url) {
      videoHTML =
        '<a href="' +
        article.path +
        '" class="crayons-story__video" style="background-image:url(' +
        article.cloudinary_video_url +
        ')"><div class="crayons-story__video__time">' +
        (article.video_duration_string || article.video_duration_in_minutes) +
        '</div></a>';
    }

    var navigationLink = `
      <a
        href="${article.path}"
        aria-labelledby="article-link-${article.id}"
        class="crayons-story__hidden-navigation-link"
      >
        ${article.title}
      </a>
    `;

    return `<article class="crayons-story"
      data-article-path="${article.path}"
      id="article-${article.id}"
      data-content-user-id="${article.user_id}">\
        ${navigationLink}\
        <div role="presentation">\
          ${videoHTML}\
          <div class="crayons-story__body">\
            <div class="crayons-story__top">\
              ${meta}
            </div>\
            <div class="crayons-story__indention">
              <h3 class="crayons-story__title">
                <a href="${article.path}" id="article-link-${article.id}">
                  ${filterXSS(article.title)}
                </a>
              </h3>\
              <div class="crayons-story__tags">
                ${tagString}
              </div>\
              ${searchSnippetHTML}\
              <div class="crayons-story__bottom">\
                <div class="crayons-story__details">
                  ${reactionsDisplay} ${commentsDisplay}
                </div>\
                <div class="crayons-story__save">\
                  ${readingTimeHTML}\
                  ${saveButton}
                </div>\
              </div>\
            </div>\
          </div>\
        </div>\
      </article>`;
  }

  return '';
}

/* eslint-enable no-multi-str */