(function ($, Drupal, drupalSettings) {
  "use strict";

  Drupal.behaviors.SegmentAnalyticsEvents = {
    attach: function (context, settings) {

      // Check to see if globally defined Segment is available.
      if (analytics) {

        // Segment is enabled, so carry on and create the events got all matching elements.
        $('[data-analytics]').once('coh-segment-analytics-init').each(function () {

          // Save the element reference.
          var element = $(this);

          // Decode the analytics JSON from the data attribute.
          var events = JSON.parse($(this).attr('data-analytics'));

          // Loop through this attribute object, creating an event for each entry.
          events.forEach(function (event) {
            if (event.trigger === 'click') {
              analytics.trackLink(element, event.eventAction, {
                category: event.eventCategory,
                label: event.eventLabel,
                value: event.eventValue
              });
            } else if (event.trigger === 'load') {
              analytics.track(event.eventAction, {
                category: event.eventCategory,
                label: event.eventLabel,
                value: event.eventValue
              });
            } else {
              element.bind(event.trigger, function (e, inView) {
                // inview trigger fired, but element left the viewport.
                if (e.type === 'inview' && !inView) {
                  return;
                }
                analytics.track(event.eventAction, {
                  category: event.eventCategory,
                  label: event.eventLabel,
                  value: event.eventValue
                });
              });
            }
          });

        });
        
        // Attach to videos
        $('video').once('segment-analytics-init').each(function () {
          // Save the element reference.
          var element = $(this);
          let src = element.attr('src');
          let name = element.attr('data-analytics-name') || src;
          var player = element[0].player;
          let media = player && player.media;

          if (player && media) {
            media.addEventListener('canplay', function (e) {

              // if (media.youTubeApi) {
              //   var ytAnalytics = new analytics.plugins.YouTubeAnalytics(media.youTubeApi, 'Google-API-Key');
              //   ytAnalytics.initialize();
              // }

              media.addEventListener('play', function (event) {
                let target = event.detail.target;
                if (target && typeof analytics !== 'undefined') {
                  target._trackedProgress = getVideoProgress(target);
                  analytics.track('Video Started', {
                    category: 'Video',
                    name: name,
                    label: name,
                    video_src: src,
                    video_progress: target._trackedProgress
                  });
                }
              }, false);
          
              media.addEventListener('pause', function (event) {
                let target = event.detail.target;
                if (target && typeof analytics !== 'undefined') {
                  target._trackedProgress = getVideoProgress(target);
                  analytics.track('Video Stopped', {
                    category: 'Video',
                    name: name,
                    label: name,
                    video_src: src,
                    video_progress: target._trackedProgress
                  });
                }
              }, false);

              media.addEventListener('ended', function (event) {
                let target = event.detail.target;
                if (target && typeof analytics !== 'undefined') {
                  target._trackedProgress = getVideoProgress(target);
                  analytics.track('Video Stopped', {
                    category: 'Video',
                    name: name,
                    label: name,
                    video_src: src,
                    video_progress: target._trackedProgress
                  });
                }
              }, false);

              media.addEventListener('timeupdate', function (event) {
                let target = event.detail.target;
                if (target && typeof analytics !== 'undefined') {
                  let currentProgress = getVideoProgress(target);
                  if (target._trackedProgress === undefined || target._trackedProgress !== currentProgress) {
                    target._trackedProgress = currentProgress;
                    analytics.track('Video Viewed', {
                      category: 'Video',
                      name: name,
                      label: name,
                      video_src: src,
                      video_progress: target._trackedProgress
                    });
                  }
                }
              }, false);

            }, false);
          }

        });

      }
      // Segment not available, so warn.
      else {
        console.warn('Segment is not available, but Segment events have been defined.');
      }
    }
  };

  function getVideoProgress(target) {
    let progress = 0;
    try {
      let duration = target.getDuration();
      let currentTime = target.getCurrentTime();
      progress = (Math.floor((currentTime / duration) * 10) * 10) / 100;
    } catch (err) {}
    return progress;
  }

  
})(jQuery, Drupal, drupalSettings);