<?php

/*

  Plugin Name: Include Mastodon Feed

	Plugin URI: https://wolfgang.lol/code/include-mastodon-feed-wordpress-plugin

	Description: Plugin providing [include-mastodon-feed] shortcode

	Author: wolfgang.lol

	Author URI: https://wolfgang.lol

*/

namespace IncludeMastodonFeedPlugin;

// set defaults

$constants = [

  [

    'key' => 'INCLUDE_MASTODON_FEED_DEBUG',

    'value' => false,

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_DEFAULT_INSTANCE',

    'value' => false,

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_LIMIT',

    'value' => 20,

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_EXCLUDE_BOOSTS',

    'value' => false,

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_EXCLUDE_REPLIES',

    'value' => false,

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_EXCLUDE_CONVERSATIONSTARTERS',

    'value' => false,

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_ONLY_PINNED',

    'value' => false,

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_ONLY_MEDIA',

    'value' => false,

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_PRESERVE_IMAGE_ASPECT_RATIO',

    'value' => false,

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_TAGGED',

    'value' => false,

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_LINKTARGET',

    'value' => '_self',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_SHOW_PREVIEWCARDS',

    'value' => true,

  ],

  // set styles

  [

    'key' => 'INCLUDE_MASTODON_FEED_DARKMODE',

    'value' => false,

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_STYLE_BG_LIGHT_COLOR',

    'value' => 'rgba(100, 100, 100, 0.15)',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_STYLE_BG_DARK_COLOR',

    'value' => 'rgba(155, 155, 155, 0.15)',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_STYLE_ACCENT_COLOR',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_STYLE_ACCENT_FONT_COLOR',

    'value' => 'rgb(255, 255, 255)',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_STYLE_BORDER_RADIUS',

    'value' => '0.25rem',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_HIDE_STATUS_META',

    'value' => false,

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_HIDE_DATETIME',

    'value' => false,

  ],

  // set texts and localization

  [

    'key' => 'INCLUDE_MASTODON_FEED_TEXT_LOADING',

    'value' => 'Loading Mastodon feed...',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_TEXT_NO_STATUSES',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_TEXT_BOOSTED',

    'value' => 'boosted 🚀',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_TEXT_VIEW_ON_INSTANCE',

    'value' => 'view on instance',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_TEXT_SHOW_CONTENT',

    'value' => 'Show content',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_TEXT_PERMALINK_PRE',

    'value' => 'on',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_TEXT_PERMALINK_POST',

    'value' => '',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_TEXT_EDITED',

    'value' => '(edited)',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_DATE_LOCALE',

    'value' => 'en-US',

  ],

  [

    'key' => 'INCLUDE_MASTODON_FEED_DATE_OPTIONS',

    'value' => "{}",

  ],

];

foreach($constants as $constant) {

  if(!defined($constant['key'])) {

      define($constant['key'], $constant['value']);

  }

}

unset($constants);

function error($msg) {

  return '[include-mastodon-feed] ' . $msg;

}

function init_styles() {

?>

  <style>

    :root {

      --include-mastodon-feed-bg-light: <?php echo filter_var( INCLUDE_MASTODON_FEED_STYLE_BG_LIGHT_COLOR, FILTER_UNSAFE_RAW ); ?>;

      --include-mastodon-feed-bg-dark: <?php echo filter_var( INCLUDE_MASTODON_FEED_STYLE_BG_DARK_COLOR, FILTER_UNSAFE_RAW ); ?>;

      --include-mastodon-feed-accent-color: <?php echo filter_var( INCLUDE_MASTODON_FEED_STYLE_ACCENT_COLOR, FILTER_UNSAFE_RAW ); ?>;

      --include-mastodon-feed-accent-font-color: <?php echo filter_var( INCLUDE_MASTODON_FEED_STYLE_ACCENT_FONT_COLOR, FILTER_UNSAFE_RAW ); ?>;

      --include-mastodon-feed-border-radius: <?php echo filter_var( INCLUDE_MASTODON_FEED_STYLE_BORDER_RADIUS, FILTER_UNSAFE_RAW ); ?>;

    }

    .include-mastodon-feed .status {

      margin: 0.5rem 0 1.5rem;

      border-radius: var(--include-mastodon-feed-border-radius);

      padding: 0.5rem;

      background: var(--include-mastodon-feed-bg-light);

    }

    .include-mastodon-feed .status a {

      color: var(--include-mastodon-feed-accent-color);

      text-decoration: none;

      word-wrap: break-word;

    }

    .include-mastodon-feed .status a:hover {

      text-decoration: underline;

    }

    .include-mastodon-feed .avatar {

      height: 1.25rem;

      border-radius: var(--include-mastodon-feed-border-radius);

      vertical-align: top;

    }

    .include-mastodon-feed .account {

      font-size: 0.8rem;

    }

    .include-mastodon-feed .account a {

      display: inline-block;

    }

    .include-mastodon-feed .account .booster {

      float: right;

      font-style: italic;

    }

    .include-mastodon-feed .boosted .account > a:first-child,

    .include-mastodon-feed .contentWarning a {

      border-radius: var(--include-mastodon-feed-border-radius);

      padding: 0.15rem 0.5rem;

      background: var(--include-mastodon-feed-accent-color);

      color: var(--include-mastodon-feed-accent-font-color);

    }

    .include-mastodon-feed .boosted .account > a:first-child:hover,

    .include-mastodon-feed .contentWarning a:hover {

      border-radius: var(--include-mastodon-feed-border-radius);

      padding: 0.15rem 0.5rem;

      background: var(--include-mastodon-feed-accent-font-color);

      color: var(--include-mastodon-feed-accent-color);

      text-decoration: none;

    }

    .include-mastodon-feed .contentWrapper.boosted {

      margin: 0.5rem 0;

      padding: 0.5rem;

      background: var(--include-mastodon-feed-bg-light);

    }

    .include-mastodon-feed .contentWarning {

      text-align: center;

      margin: 1rem;

      padding: 1rem;

    }

    .include-mastodon-feed .contentWarning .title {

      font-weight: bold;

    }

    .include-mastodon-feed img.emoji {

      height: 1rem;

    }

    .include-mastodon-feed .content .invisible {

      display: none;

    }

    .include-mastodon-feed .media {

      display: flex;

      justify-content: space-around;

      align-items: center;

      flex-wrap: wrap;

      gap: 0.5rem;

      margin: 1rem;

    }

      flex-basis: calc(50% - 0.5rem);

      flex-grow: 1;

    }

    .include-mastodon-feed .media > .image {

      font-size: 0.8rem;

      font-weight: bold;

      text-align: center;

    }

    .include-mastodon-feed .media > .image a { 

      border-radius: var(--include-mastodon-feed-border-radius);

      display: block;

      aspect-ratio: 1.618;                                                      

      background-size: cover;

      background-position: center;

    }

        .include-mastodon-feed .media > .image a:hover {

      filter: contrast(110%) brightness(130%) saturate(130%);

    }

    .include-mastodon-feed .media > .image a img {

      width: 100%;

    }

    .include-mastodon-feed .media > .gifv video {

      max-width: 100%;

    }

    .include-mastodon-feed .card {

      border-radius: var(--include-mastodon-feed-border-radius);

      margin: 1rem 0.5rem;

    }

    .include-mastodon-feed .card iframe {

      border-radius: var(--include-mastodon-feed-border-radius);

      width: 100%;

      height: 100%;

      aspect-ratio: 2 / 1.25;

    }

    .include-mastodon-feed .card a {

      border-radius: var(--include-mastodon-feed-border-radius);

      display: block;

      text-decoration: none;

      color: #000;

    }

    .include-mastodon-feed.dark .card a {

      color: #fff;

    }

    .include-mastodon-feed .card a:hover {

      text-decoration: none;

      background: var(--include-mastodon-feed-accent-color);

      color: var(--include-mastodon-feed-accent-font-color);

    }

    .include-mastodon-feed .card .meta {

      background: var(--include-mastodon-feed-bg-light);

      font-size: 0.8rem;

      padding: 1rem;

    }

    .include-mastodon-feed .card .image {

      margin-bottom: 0.5rem;

      text-align: center;

    }

    .include-mastodon-feed .card .image img {

      max-width: 75%;

    }

    .include-mastodon-feed .card .title {

      font-weight: bold;

    }

    .include-mastodon-feed.dark .status,

    .include-mastodon-feed.dark .contentWrapper.boosted,

    .include-mastodon-feed.dark .card {

      background: var(--include-mastodon-feed-bg-dark);

    }

  </style>

<?php

}

add_action('wp_head', __NAMESPACE__ . '\init_styles', 7);

function init_scripts() {

?>

  <script>

    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;

    }

      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;

      for(let mediaIndex = 0; mediaIndex < attachments.length; mediaIndex++) {

        let media = attachments[mediaIndex];

        if('image' == media.type) {

          let mediaElemImgLink = mastodonFeedCreateElement('a');

          mediaElemImgLink.href = status.url;

          }

          else {

          }

          }

          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';

          }

          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');

          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);

        }