<!DOCTYPE html>
<html>
  <head>
    <script src="https://ezintegrate.bombbomb.io/public/bbIntegrate.js"></script>
    <style>
      /* latin */
      @font-face {
        font-family: 'DM Sans';
        font-style: normal;
        font-weight: 300 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/dmsans/v16/rP2Hp2ywxg089UriCZOIHQ.woff2)
          format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
          U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
          U+FFFD;
      }

      iframe {
        border: none;
      }
      body {
        font-family: 'DM Sans', Arial, Helvetica, sans-serif;
        margin: 0;
      }
      #startBombBombButton {
        cursor: pointer;
        padding: 0.5rem 1rem;
        background-image: linear-gradient(96deg, rgb(222, 54, 2), rgb(254, 132, 1));
        border-radius: 9999px;
        color: white;
        border: none;
        margin: 10px;
        font-family: 'DM Sans', Arial, Helvetica, sans-serif;
        font-weight: 500;
      }
    </style>
  </head>
  <body>
    <div id="BombBombRecorder"></div>
    <button
      id="startBombBombButton"
      type="button"
      title="Start BombBomb"
      aria-label="Open BombBomb Video"
    >
      BombBomb
    </button>
  </body>
  <script>
    const CLIENT_IDENTIFIER = '438bd977-d538-0474-4175-8e360bb51021';

    function onClickStartBombBombButton(event) {
      event.preventDefault();
      event.stopPropagation();
      const startButton = this;
      startButton.style.display = 'none';

      const notifyInserted = video => {
        const notification = {
          type: 2,
          level: 1,
          message: `Inserted video: ${video.title}`,
          showCloseButton: true,
          action: {
            actionLabel: 'View Video',
            eventHandler: function () {
              parent.Xrm.Navigation.openUrl(video.link);
            },
          },
        };

        parent.Xrm.App.addGlobalNotification(notification).then(
          function success(result) {
            console.log('Notification created with ID: ' + result);
          },
          function (error) {
            console.log(error.message);
          },
        );
      };

      const handleNewVideo = async video => {
        console.info('Got new video!', video);
        const img = document.createElement('img');
        img.src = video.thumbnail;
        img.style.maxWidth = '480px';
        img.style.maxHeight = '480px';

        const link = document.createElement('a');
        link.href = video.link;
        link.target = '_blank';
        link.appendChild(img);
        const html = link.outerHTML;
        const emailBody = parent.Xrm.Page.getAttribute('description');
        if (emailBody) {
          const existingValue = emailBody.getValue() || '';
          emailBody.setValue(existingValue + html);
          notifyInserted(video);
        }
        bbIntegrate.removeIframe();
        // Show button again to allow inserting another video.
        startButton.style.display = '';
      };

      const bbIntegrate = new BbIntegrate(CLIENT_IDENTIFIER, {
        onVideo: handleNewVideo,
      });

      const embedElement = document.getElementById('BombBombRecorder');
      bbIntegrate.embedIframe(embedElement);
    }
    document
      .getElementById('startBombBombButton')
      .addEventListener('click', onClickStartBombBombButton);
  </script>
</html>
