(function($) {
  const DATE_TEMPLATE = `
    <span>
      <svg class="fa d-icon d-icon-globe-americas svg-icon" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#globe-americas"></use>
      </svg>
      <span class="relative-time"></span>
    </span>
  `;

  const PREVIEW_TEMPLATE = `
    <div class='preview'>
      <span class='timezone'></span>
      <span class='date-time'></span>
    </div>
  `;

  function processElement($element, options = {}) {
    clearTimeout(this.timeout);

    const utc = moment().utc();
    const dateTime = options.time
      ? `${options.date} ${options.time}`
      : options.date;
    let utcDateTime;

    let displayedTimezone;
    if (options.time) {
      displayedTimezone = options.displayedTimezone || moment.tz.guess();
    } else {
      displayedTimezone =
        options.displayedTimezone || options.timezone || moment.tz.guess();
    }

    // if timezone given we convert date and time from given zone to Etc/UTC
    if (options.timezone) {
      utcDateTime = _applyZoneToDateTime(dateTime, options.timezone);
    } else {
      utcDateTime = moment.utc(dateTime);
    }

    if (utcDateTime < utc) {
      // if event is in the past we want to bump it no next occurrence when
      // recurring is set
      if (options.recurring) {
        utcDateTime = _applyRecurrence(utcDateTime, options.recurring);
      } else {
        $element.addClass("past");
      }
    }

    // once we have the correct UTC date we want
    // we adjust it to watching user timezone
    const adjustedDateTime = utcDateTime.tz(displayedTimezone);

    const previews = _generatePreviews(
      adjustedDateTime.clone(),
      displayedTimezone,
      options
    );
    const textPreview = _generateTextPreview(previews);
    const htmlPreview = _generateHtmlPreview(previews);

    const formatedDateTime = _applyFormatting(
      adjustedDateTime,
      displayedTimezone,
      options
    );

    $element
      .html(DATE_TEMPLATE)
      .attr("title", textPreview)
      .attr("data-html-tooltip", `<div class="previews">${htmlPreview}</div>`)
      .addClass("cooked-date")
      .find(".relative-time")
      .text(formatedDateTime);

    this.timeout = setTimeout(() => processElement($element, options), 10000);
  }

  function _formatTimezone(timezone) {
    return timezone
      .replace("_", " ")
      .replace("Etc/", "")
      .split("/");
  }

  function _zoneWithoutPrefix(timezone) {
    const parts = _formatTimezone(timezone);
    return parts[1] || parts[0];
  }

  function _applyZoneToDateTime(dateTime, timezone) {
    return moment.tz(dateTime, timezone).utc();
  }

  function _translateCalendarKey(time, key) {
    const translated = I18n.t(`discourse_local_dates.relative_dates.${key}`, {
      time: "LT"
    });

    if (time) {
      return translated
        .split("LT")
        .map(w => `[${w}]`)
        .join("LT");
    } else {
      return `[${translated.replace(" LT", "")}]`;
    }
  }

  function _calendarFormats(time) {
    return {
      sameDay: _translateCalendarKey(time, "today"),
      nextDay: _translateCalendarKey(time, "tomorrow"),
      lastDay: _translateCalendarKey(time, "yesterday"),
      sameElse: "L"
    };
  }

  function _isEqualZones(timezoneA, timezoneB) {
    return (
      moment.tz(timezoneA).utcOffset() === moment.tz(timezoneB).utcOffset()
    );
  }

  function _applyFormatting(dateTime, displayedTimezone, options) {
    const sameTimezone = _isEqualZones(displayedTimezone, moment.tz.guess());
    const inCalendarRange = dateTime.isBetween(
      moment().subtract(2, "days"),
      moment()
        .add(1, "days")
        .endOf("day")
    );

    if (options.calendar && inCalendarRange) {
      if (sameTimezone) {
        if (options.time) {
          dateTime = dateTime.calendar(null, _calendarFormats(options.time));
        } else {
          dateTime = dateTime.calendar(null, _calendarFormats(null));
        }
      } else {
        dateTime = dateTime.format(options.format);
        dateTime = dateTime.replace("TZ", "");
        dateTime = `${dateTime} (${_zoneWithoutPrefix(displayedTimezone)})`;
      }
    } else {
      if (options.time) {
        dateTime = dateTime.format(options.format);

        if (options.displayedTimezone && !sameTimezone) {
          dateTime = dateTime.replace("TZ", "");
          dateTime = `${dateTime} (${_zoneWithoutPrefix(displayedTimezone)})`;
        } else {
          dateTime = dateTime.replace(
            "TZ",
            _formatTimezone(displayedTimezone).join(": ")
          );
        }
      } else {
        dateTime = dateTime.format(options.format);

        if (!sameTimezone) {
          dateTime = dateTime.replace("TZ", "");
          dateTime = `${dateTime} (${_zoneWithoutPrefix(displayedTimezone)})`;
        } else {
          dateTime = dateTime.replace(
            "TZ",
            _zoneWithoutPrefix(displayedTimezone)
          );
        }
      }
    }

    return dateTime;
  }

  function _applyRecurrence(dateTime, recurring) {
    const parts = recurring.split(".");
    const count = parseInt(parts[0], 10);
    const type = parts[1];
    const diff = moment().diff(dateTime, type);
    const add = Math.ceil(diff + count);

    return dateTime.add(add, type);
  }

  function _createDateTimeRange(dateTime, timezone) {
    const startRange = dateTime.tz(timezone).format("LLL");
    const separator = "→";
    const endRange = dateTime
      .add(24, "hours")
      .tz(timezone)
      .format("LLL");

    return `${startRange} ${separator} ${endRange}`;
  }

  function _generatePreviews(dateTime, displayedTimezone, options) {
    const previewedTimezones = [];
    const watchingUserTimezone = moment.tz.guess();
    const timezones = options.timezones.filter(
      timezone => timezone !== watchingUserTimezone
    );

    previewedTimezones.push({
      timezone: watchingUserTimezone,
      current: true,
      dateTime: options.time
        ? dateTime.tz(watchingUserTimezone).format("LLL")
        : _createDateTimeRange(dateTime, watchingUserTimezone)
    });

    if (
      options.timezone &&
      displayedTimezone === watchingUserTimezone &&
      options.timezone !== displayedTimezone &&
      !_isEqualZones(displayedTimezone, options.timezone)
    ) {
      timezones.unshift(options.timezone);
    }

    timezones
      .filter(z => z)
      .forEach(timezone => {
        if (_isEqualZones(timezone, displayedTimezone)) {
          return;
        }

        if (_isEqualZones(timezone, watchingUserTimezone)) {
          timezone = watchingUserTimezone;
        }

        previewedTimezones.push({
          timezone,
          dateTime: options.time
            ? dateTime.tz(timezone).format("LLL")
            : _createDateTimeRange(dateTime, timezone)
        });
      });

    if (!previewedTimezones.length) {
      previewedTimezones.push({
        timezone: "Etc/UTC",
        dateTime: options.time
          ? dateTime.tz("Etc/UTC").format("LLL")
          : _createDateTimeRange(dateTime, "Etc/UTC")
      });
    }

    return _.uniq(previewedTimezones, "timezone");
  }

  function _generateTextPreview(previews) {
    return previews
      .map(preview => {
        const formatedZone = _zoneWithoutPrefix(preview.timezone);

        if (preview.dateTime.match(/TZ/)) {
          return preview.dateTime.replace(/TZ/, formatedZone);
        } else {
          return `${formatedZone} ${preview.dateTime}`;
        }
      })
      .join(", ");
  }

  function _generateHtmlPreview(previews) {
    return previews
      .map(preview => {
        const $template = $(PREVIEW_TEMPLATE);

        if (preview.current) $template.addClass("current");

        $template.find(".timezone").text(_zoneWithoutPrefix(preview.timezone));
        $template.find(".date-time").text(preview.dateTime);
        return $template[0].outerHTML;
      })
      .join("");
  }

  $.fn.applyLocalDates = function() {
    return this.each(function() {
      const $element = $(this);

      const options = {};
      options.time = $element.attr("data-time");
      options.date = $element.attr("data-date");
      options.recurring = $element.attr("data-recurring");
      options.timezones = (
        $element.attr("data-timezones") ||
        Discourse.SiteSettings.discourse_local_dates_default_timezones ||
        "Etc/UTC"
      ).split("|");
      options.timezone = $element.attr("data-timezone");
      options.calendar = ($element.attr("data-calendar") || "on") === "on";
      options.displayedTimezone = $element.attr("data-displayed-timezone");
      options.format =
        $element.attr("data-format") || (options.time ? "LLL" : "LL");

      processElement($element, options);
    });
  };
})(jQuery);