const mastodonFeedCreateElement = function(type, className = null) {
  let element = document.createElement(type);
  if(null !== className) {
    element.className = className;
  }
  return element;
}

const mastodonFeedCreateElementAccountLink = function(account) {
  let accountLinkElem = mastodonFeedCreateElement('a');
  accountLinkElem.href = account.url;

  let accountImageElem = mastodonFeedCreateElement('img', 'avatar');
  accountImageElem.src = account.avatar_static;

  accountLinkElem.addEventListener('mouseover', (event) => {
    accountLinkElem.querySelector('.avatar').src = account.avatar;
  });
  accountLinkElem.addEventListener('mouseout', (event) => {
    accountLinkElem.querySelector('.avatar').src = account.avatar_static;
  });

  accountLinkElem.appendChild(accountImageElem);
  // inject emojis
  let displayName = account.display_name;
  if(account.emojis.length > 0) {
    account.emojis.forEach(function(emoji) {
      displayName = mastodonFeedInjectEmoji(displayName, emoji);
    });
  }
  accountLinkElem.innerHTML += ' ' + displayName;
  return accountLinkElem;
}

const mastodonFeedCreateElementPermalink = function(status, label) {
  let linkElem = mastodonFeedCreateElement('a');
  linkElem.href = status.url;
  linkElem.appendChild(document.createTextNode(label));
  return linkElem;
}

const mastodonFeedCreateElementMediaAttachments = function(status, options) {
  let attachments = status.media_attachments;
  let mediaWrapperElem = mastodonFeedCreateElement('div', 'media');
  for(let mediaIndex = 0; mediaIndex < attachments.length; mediaIndex++) {
    let media = attachments[mediaIndex];
    let mediaElem = mastodonFeedCreateElement('div', media.type);
    if('image' == media.type) {
      let mediaElemImgLink = mastodonFeedCreateElement('a');
      mediaElemImgLink.href = status.url;
      if(null === media.remote_url) {
        mediaElemImgLink.style.backgroundImage = 'url("' + media.preview_url + '")';
      }
      else {
        mediaElemImgLink.style.backgroundImage = 'url("' + media.remote_url + '")';
      }
      if(null !== media.description) {
        mediaElem.title = media.description;
      }
      mediaElem.appendChild(mediaElemImgLink);
    }
    else if('gifv' == media.type) {
      let mediaElemGifvLink = mastodonFeedCreateElement('a');
      mediaElemGifvLink.href = status.url;
      let mediaElemGifv = mastodonFeedCreateElement('video', 'requiresInteraction');
      if(null === media.remote_url) {
        mediaElemGifv.src = media.url;
      }
      else {
        mediaElemGifv.src = media.remote_url;
      }
      mediaElemGifv.loop = true;
      mediaElemGifv.muted = 'muted';
      if(null !== media.description) {
        mediaElemGifv.title = media.description;
      }
      mediaElemGifvLink.appendChild(mediaElemGifv);
      mediaElem.appendChild(mediaElemGifvLink);

      mediaElemGifv.addEventListener('mouseover', (event) => {
        mediaElemGifv.play();
      });
      mediaElemGifv.addEventListener('mouseout', (event) => {
        mediaElemGifv.pause();
        mediaElemGifv.currentTime = 0;
      });
    }
    else {
      // TODO implement support for other media types
      //      currently only image and gifv support implemented
      mediaElem.innerHTML = 'Stripped ' + media.type + ' - only available on instance<br />';
      let permalinkElem = mastodonFeedCreateElement('span', 'permalink');
      permalinkElem.appendChild(mastodonFeedCreateElementPermalink(status, options.text.viewOnInstance));
      mediaElem.appendChild(permalinkElem);
    }
    mediaWrapperElem.appendChild(mediaElem);
  }
  return mediaWrapperElem;
}

const mastodonFeedCreateElementPreviewCard = function(card)  {
  let cardElem = mastodonFeedCreateElement('div', 'card');
      
  if(null === card.html || card.html.length < 1) {
    let cardElemMeta = mastodonFeedCreateElement('div', 'meta');

    if(null !== card.image) {
      let cardElemImageWrapper = mastodonFeedCreateElement('div', 'image');
      let cardElemImage = mastodonFeedCreateElement('img');
      cardElemImage.src = card.image;
      cardElemImageWrapper.appendChild(cardElemImage);
      cardElemMeta.appendChild(cardElemImageWrapper);
    }

    let cardElemTitle = mastodonFeedCreateElement('div', 'title');
    cardElemTitle.innerHTML = card.title;
    cardElemMeta.appendChild(cardElemTitle);

    let cardElemDescription = mastodonFeedCreateElement('div', 'description');
    cardElemDescription.innerHTML = card.description;
    cardElemMeta.appendChild(cardElemDescription);
    
    if(card.url === null) {
      cardElem.appendChild(cardElemMeta);
    }
    else {
      let cardElemLink = mastodonFeedCreateElement('a');
      cardElemLink.href = card.url;
      cardElemLink.appendChild(cardElemMeta);
      cardElem.appendChild(cardElemLink);
    }
  }
  else {
    cardElem.innerHTML = card.html;
  }
  return cardElem;
}

const mastodonFeedCreateElementTimeinfo = function(status, options, url = false) {
  let createdInfo = mastodonFeedCreateElement('span', 'permalink');
  createdInfo.innerHTML = ' ' + options.text.permalinkPre + ' ';
  if(false === url) {
    createdInfo.innerHTML += new Date(status.created_at).toLocaleString(options.localization.date.locale, options.localization.date.options);
  }
  else {
    createdInfo.appendChild(mastodonFeedCreateElementPermalink(status, new Date(status.created_at).toLocaleString(options.localization.date.locale, options.localization.date.options)));
  }
  createdInfo.innerHTML += ' ' + options.text.permalinkPost + ' ';
  if(null !== status.edited_at) {
    createdInfo.innerHTML += ' ' + options.text.edited;
  }
  return createdInfo;
}

const mastodonFeedInjectEmoji = function(string, emoji) {
  return string.replace(':' + emoji.shortcode + ':', '<img class="emoji" src="' + emoji.url + '" title="' + emoji.shortcode + '" />');
}

const mastodonFeedRenderStatuses = function(statuses, rootElem, options) {
  if(statuses.length < 1) {
    console.log(options);
    rootElem.innerHTML = options.text.noStatuses;
  }
  else {
    for(let i = 0; i < statuses.length; i++) {
      let status = statuses[i];
      let isEdited = (null === status.edited_at ? true : false);
      let isReblog = (null === status.reblog ? false : true);

      let statusElem = mastodonFeedCreateElement('div', 'status');

      // add account meta info
      let accountElem = mastodonFeedCreateElement('div', 'account');

      if(isReblog) {
        let boosterElem = mastodonFeedCreateElement('span', 'booster');
        boosterElem.appendChild(document.createTextNode( options.text.boosted ));
        accountElem.appendChild(boosterElem);
      }
      accountElem.appendChild(mastodonFeedCreateElementAccountLink(status.account));
      accountElem.appendChild(mastodonFeedCreateElementTimeinfo(status, options, (isReblog ? false : status.url)));
      
      statusElem.appendChild(accountElem);

      // prepare content rendering
      let showStatus = status;
      if(isReblog) {
        showStatus = status.reblog;
      }
      let contentWrapperElem = mastodonFeedCreateElement('div', 'contentWrapper' + (isReblog ? ' boosted' : ''));

      // add boosted post meta info
      if(isReblog) {
        let boostElem = mastodonFeedCreateElement('div', 'account');
        let boostAccountLink = mastodonFeedCreateElementAccountLink(showStatus.account);
        boostElem.appendChild(boostAccountLink);
        boostElem.appendChild(mastodonFeedCreateElementTimeinfo(showStatus, options, showStatus.url));

        contentWrapperElem.appendChild(boostElem);
      }

      let contentElem = mastodonFeedCreateElement('div', 'content');

      // handle content warnings
      if(showStatus.sensitive || showStatus.spoiler_text.length > 0) {
        let cwElem = mastodonFeedCreateElement('div', 'contentWarning');

        if(showStatus.spoiler_text.length > 0) {
          let cwTitleElem = mastodonFeedCreateElement('div', 'title');
          cwTitleElem.innerHTML = showStatus.spoiler_text;
          cwElem.appendChild(cwTitleElem);
        }

        let cwLinkElem = mastodonFeedCreateElement('a');
        cwLinkElem.href = '#';
        cwLinkElem.onclick = function() {
          this.parentElement.style = 'display: none;';
          this.parentElement.nextSibling.style = 'display: block;';
          return false;
        }
        cwLinkElem.innerHTML = options.text.showContent;
        cwElem.appendChild(cwLinkElem);

        contentWrapperElem.appendChild(cwElem);
        contentElem.style = 'display: none;';
      }

      // add regular content
      let renderContent = showStatus.content;
      // inject emojis
      if(showStatus.emojis.length > 0) {
        showStatus.emojis.forEach(function(emoji) {
          renderContent = mastodonFeedInjectEmoji(renderContent, emoji);
        });
      }
      contentElem.innerHTML += renderContent;

      // handle media attachments
      if(showStatus.media_attachments.length > 0) {
        let mediaAttachmentsElem = mastodonFeedCreateElementMediaAttachments(showStatus, options);
        contentElem.appendChild(mediaAttachmentsElem);
      }

      // handle preview card
      if(options.showPreviewCards && showStatus.card != null) {
        let cardElem = mastodonFeedCreateElementPreviewCard(showStatus.card);
        contentElem.appendChild(cardElem);
      }

      contentWrapperElem.appendChild(contentElem);
      statusElem.appendChild(contentWrapperElem);
      rootElem.appendChild(statusElem);
    }
  }
  if('_self' != options.linkTarget) {
    rootElem.querySelectorAll('a').forEach(function(e) {
      e.target = options.linkTarget;
    });
  }
}

const mastodonFeedLoad = function(url, elementId, options) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    const statuses = xhr.response;
    const rootElem = document.getElementById(elementId);
    rootElem.innerHTML = '';
    if (xhr.status === 200) {
      if(options.excludeConversationStarters && statuses.length > 0) {
        const filteredStatuses = [];
        for(let i = 0; i < statuses.length; i++) {
          let includeStatus = true;
          if(statuses[i].mentions.length > 0) {
            const statusContent = document.createElement('div');
            statusContent.innerHTML = statuses[i].content;
            const mentionUsername = statuses[i].mentions[0].acct.split('@')[0];
            const plainTextContent = statusContent.textContent || statusContent.innerText;
            if(plainTextContent.substring(1, ('@' + mentionUsername).length) == mentionUsername) {
              includeStatus = false;
            }
          }
          if(includeStatus) {
            filteredStatuses.push(statuses[i]);
          }
        }
        mastodonFeedRenderStatuses(filteredStatuses, rootElem, options);
      }
      else  {
        mastodonFeedRenderStatuses(statuses, rootElem, options);
      }
    }
    else {
      rootElem.appendChild(document.createTextNode(xhr.response.error));
    }
  };
  xhr.send();
}

apiUrl = 'https://social.queereszentrumtuebingen.de/api/v1/accounts/01JFERHG3QG06PQ7QGYEZ6288P/statuses';

window.addEventListener("load", () => {
  mastodonFeedLoad(
    apiUrl,
    "fedi-feed",
    {
      linkTarget: "_self",
      showPreviewCards: true,
      excludeConversationStarters: false,
      text: {
        boosted: false,
        noStatuses: false,
        viewOnInstance: "view on instance",
        showContent: "Show content",
        permalinkPre: "on",
        permalinkPost: "",
        edited: "(edited)",
      },
      localization: {
        date: {
          locale: "de-DE",
          options: {},
        }
      }
    }
  );
});