/*
 * Assorted javascript functions used on Calendars.
 */

/* Hover over one thing shows the other with a timeout by adding the hoverClass specified */
function Hover(sourceId, targetId, hoverClass, timeout) {
  this.$source = jQuery('#' + sourceId);
  this.$target = jQuery('#' + targetId);
  this.hoverClass = hoverClass;
  this.isVisible = false;
  this.closeTimer = null;

  const _this = this;
  this.$source.on('hover', function() {
	  _this.open();
	  clearTimeout(_this.closeTimer);
  }, function(){
	  _this.closeTimer = setTimeout(function() {
		  _this.close();
	  }, timeout);
  });
}

//Instance methods
Hover.prototype = {
  open : function() {
    this.$target.addClass(this.hoverClass);
    this.isVisible = true;
  },

  close : function() {
    this.$target.removeClass(this.hoverClass);
    this.isVisible = false;
  }
};

function setAllTags(checked) {
  const checkBoxes = document.getElementById('tagList').getElementsByTagName('input');
  for (let i = 0;  i <checkBoxes.length; i++) {
    const box = checkBoxes[i];
    if (checked) {
      box.checked = true;
      jQuery(box.parentNode).addClass('checkedTag');
    } else {
	  box.checked = false;
	  jQuery(box.parentNode).removeClass('checkedTag');
    }
  }
}

/**
 * Reposition an element below a source element without going outside the current viewport.
 */
function reposition(sourceId,targetId) {
  	const $target = jQuery('#' + targetId);
  	const $parent = jQuery('#' + sourceId);
  	const $container = jQuery('#container, .id7-main-content'); // ignore the window, the element should always be inside container
  	const bestPosition = {
  			top : $parent.offset().top + $parent.height(),
  			left : $parent.offset().left
  	}

  	// shift left if necessary
	const maxY = $container.offset().left + $container.width() - 32; // bit of tolerance
	if (bestPosition.left + $target.width() > maxY) {
		bestPosition.left = maxY - $target.width();
	}

	// shift up if necessary
	const maxX = $container.offset().top + $container.height() - 32; // bit of tolerance
	if (bestPosition.top + $target.height() > maxX) {
		bestPosition.top = maxX - $target.height();
	}

	// jQuery can only correctly position a displayed element
	$target.css({ visibility: 'hidden' }).show().offset(bestPosition).css({ visibility: 'visible' });
}

const Checkbox = function(sourceCheckbox) {
  const name = sourceCheckbox.name;
  const id = sourceCheckbox.id;
  const span = document.createElement('span');
  const hidden = document.createElement('input');

  hidden.setAttribute('type','hidden');
  hidden.setAttribute('name', name);
  hidden.setAttribute('id', id);

  const image = document.createElement('img');
  image.src = Checkbox.shim;

  span.appendChild(hidden);
  span.appendChild(image);

  sourceCheckbox.parentNode.replaceChild(sourceCheckbox, span);
};
Checkbox.shim = '/static_war/images/shim.gif';

const DateFormat = {
  d_names : ["Sun", "Mon", "Tue",
    "Wed", "Thu", "Fri", "Sat"],
  m_names : ["Jan", "Feb", "Mar",
    "Apr", "May", "Jun", "Jul", "Aug", "Sep",
    "Oct", "Nov", "Dec"],
  padNumber : function(number) {
    let n = '' + number;
    while (n.length < 2) {  n = "0" + n; }
    return n;
  },
  dayName: function(dayNum) { return DateFormat.d_names[dayNum]; },
  monthName: function(monthNum) { return DateFormat.m_names[monthNum]; },

  toDateTime: function(dateObj, pattern) {
      let result = DateFormat.toShortDate();
      if (showTime) {
        result += ' ' + DateFormat.toTime();
      }
      return result;
  },
  toShortDate: function(dateObj) {
    let result = DateFormat.dayName(dateObj.getDay())+' '+dateObj.getDate()+' ' + DateFormat.monthName(dateObj.getMonth());
    if (dateObj.getFullYear() !== new Date().getFullYear) {
      result +=  ' ' + dateObj.getFullYear();
    }
    return result;
  },
  toTime: function(dateObj) {
    return DateFormat.padNumber(dateObj.getHours()) + ':' + DateFormat.padNumber(dateObj.getMinutes());
  }
};

function pluralise(count,singular,plural) {
  if (count === 1) return singular;
  if (count === 2) return 'other ' + singular;
  return count + ' ' + plural;
}

function toGMT(date, serverTimeOffset) {
  // eslint-disable-next-line no-param-reassign
  serverTimeOffset = serverTimeOffset || 0;
  return new Date(date.getTime() + (date.getTimezoneOffset() * 60000) + (serverTimeOffset * 60000))
}

function shareButtonHTML(url, title) {
    const itemUrl = encodeURIComponent(url);
    const itemTitle = encodeURIComponent(title);
    return `
    <div class="dropup shareButtons">
        <a href="#" class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
            <i class="fas fa-share-alt" aria-hidden="true" title="Share this"></i>
            <span class="sr-only">Share this</span>
        </a>
        <ul class="dropdown-menu">
            <li></li>
            <li></li>
            <li></li>
            <li><a href="mailto:?subject=${itemTitle}&body=${itemUrl}">
                    <i class="fas fa-envelope-square fa-fw" aria-hidden="true" title="Share via email"></i>
                    <span class="sr-only">Share via email</span>
                </a></li>
        </ul>
    </div>
    `;
}

jQuery(document).ready(function($) {
  $('.triggerPopover').on('click', function (e) {
    e.preventDefault();
    const el = jQuery(this);
    this.hide = jQuery.noop;

    const eventTitle = el.data('title');
    const event = el.data('event');
    const occurrence = el.data('occurrence');
    const location = el.data('location');
    const notes = el.data('notes');
    const detail = el.data('detail');
    const categories = el.data('categories').split(',');
    const moreInfo = el.data('more');
    const editingHost = el.data('editinghost');
    const sourceUrl = el.data('sourceurl');
    const sourceName = el.data('sourcename');
    const urlPath = el.data('urlpath');
    const showShareButtons = el.data('show-share-buttons');
    const pagePubliclyViewable = el.data('page-publicly-viewable');

    $('.triggerPopover').not(el).popover('hide');  // Hide other open popovers

    el.popover({
      placement: 'bottom',
      title: function() {
        let title = '<div class="eventActions">' +
          '<div class="eventPopoverName"><a href="' + sourceUrl + '?calendarItem=' + event + '" title="Link to event \'' + eventTitle + '\'">' + eventTitle + '</a></div>';

        if(el.data('canedit')) {
          title += '<div class="form-inline"><div class="btn-group form-group">' +
            '<a href="' + editingHost + '/sitebuilder2/edit/calendaritems/edit.htm?page=' + urlPath + '&amp;calendarItem=' + event + '" ' +
            'title="Edit \'' + eventTitle + '\'" class="btn btn-default btn-sm">' +
            '<i class="fa fa-fw fa-pencil-square-o"></i>' +
            '</a>' +
            '<a title="Delete \'' + eventTitle + '\'" aria-controls="calendarModal" ' +
              'data-action="delete" data-page="' + urlPath + '" data-event="' + event + '" data-occurrence="' + occurrence + '" class="btn btn-default btn-sm">' +
            '<i class="fa fa-fw fa-trash-o"></i>' +
            '</a>' +
            '<a href="' + editingHost + '/sitebuilder2/edit/calendaritems/create.htm?page=' + urlPath + '&amp;copyFrom=' + event + '" ' +
            'title="Copy \'' + eventTitle + '\'" class="btn btn-default btn-sm">' +
            '<i class="fa fa-fw fa-clone"></i>' +
            '</a>';

          if(el.data('recurring')) {
            title += '<a title="Unlink \'' + eventTitle + '\'" aria-controls="calendarModal" ' +
              'data-action="unlink" data-page="' + urlPath + '" data-event="' + event + '" class="btn btn-default btn-sm">' +
              '<i class="fa fa-fw fa-chain-broken"></i>' +
              '</a>';
          }
        }

        title += '<a href="' + editingHost + '/sitebuilder2/api/sitebuilder.ics?page=' + sourceUrl + '&amp;event=' + event + '" ' +
          'title="Export event \'' + eventTitle + '\'as iCalendar" class="btn btn-default btn-sm">' +
          '<i class="far fa-fw fa-calendar-star"></i>' +
          '</a>' +
          '</div></div></div>';

        return title;
      },
      content: function () {
        let content = '<p><strong>When: </strong><br />' + el.find('.time').html() + '</p>';

        if (location) {
          content += '<p><strong>Where:</strong><br />' + location + '</p>';
        }

        if (notes) {
          content += '<strong>Notes: </strong><br />' + notes;
        }

        if (detail) {
          content += '<strong>Detail: </strong><br />' + detail;
        }

        if (showShareButtons && pagePubliclyViewable) {
            content += shareButtonHTML(sourceUrl + '?calendarItem=' + event, eventTitle)
        }

        if (categories) {
          content += "<div class='tagsOnThisItem'>";
          const categoriesCSS = el.data('categoriescss').split(',');

            for(let i = 0; i < categories.length - 1; i++ ) {
              content += '<span class="event category ' + categoriesCSS[i] + '">' + categories[i] + '</span> ';
            }
          content += "</div>"
        }

        if (sourceName) {
          content += '<p><strong>Source: </strong><br /><a href="' + sourceUrl + '">' + sourceName + '</a></p>';

        }

        if (moreInfo) {
          content += '<p><a href="' + moreInfo + '">More info&hellip;</a></p>';
        }

        return content;
      },
      html: true,
      template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><button type="button" class="close" aria-hidden="true">&#215;</button><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
    });

    el.popover('show');
  });

  const $calendar = $('.calendar');

  $calendar.on('shown.bs.popover', function(e) {
    const $po = $(e.target).popover().data('bs.popover').tip();
    $po.data('creator', $(e.target));
  });

  $calendar.on('hidden.bs.popover', function(e) {
    const $creator = $(e.target);
    if ($creator) {
      $creator.data("bs.popover").inState.click = false;
    }
  });

  $calendar.on('click', '.popover .close', function(e) {
    e.preventDefault();
    const $creator = $(e.target).parents('.popover').data('creator');
    if ($creator) {
      $creator.popover('hide');
    }
  });

  $('body').on('click', '[data-target="#calendarModal"], [aria-controls="calendarModal"]', function (e) {
    e.preventDefault();
    const el = jQuery(this);
    const $calendarModal = jQuery('#calendarModal');
    const modalContent = $calendarModal.find('.dialog-content');
    const modal = $calendarModal[0];
    if (!modal.hasAttribute('open')) {
      // Throws unhelpful errors if it's already open for some reason
      window.customElements.whenDefined('sb-dialog-wrapper').then(() => {
        modal.showModal();
      });
    }
    modalContent.html(
      '<div class="dialog-body"><span class="loading"><i class="fa fa-spin fa-spinner" aria-hidden="true"></i><span class="sr-only">Loading</span></span></div>'
    );
    jQuery.get('/sitebuilder2/render/edit/calendaritems/' + el.data('action') + '.htm', {
      sbrPage: el.data('page'),
      calendarItem: el.data('event'),
      occurrenceId: el.data('occurrence'),
      rn: new Date().getTime(),
    }).done(function(data) {
      modalContent.html(data);
    });
  });

  $(".dayLink").on("focus", function (e) {
     $(e.target).parents(".sb-calendar-date, td").find(".createNewItem").addClass("createNewItemHover");
  });

  $(".createNewItem").on("focusout", function () {
      $(this).removeClass("createNewItemHover");
  })
});