// Shared time/date placeholder definitions used by editor renderers.

(function () {
  var root = window;
  var FORMAT_PLACEHOLDERS = [
    { token: 'h', output: '1-12', description: 'The hour, 12-hour clock' },
    { token: 'hh', output: '01-12', description: 'The hour, 12-hour clock, 2-digits' },
    { token: 'm', output: '0-59', description: 'The minute' },
    { token: 'mm', output: '00-59', description: 'The minute, 2-digits' },
    { token: 's', output: '0-59', description: 'The second' },
    { token: 'ss', output: '00-59', description: 'The second, 2-digits' },
    { token: 'A', output: 'AM/PM', description: 'Uppercase day period' },
    { token: 'a', output: 'am/pm', description: 'Lowercase day period' },
    { token: 'D', output: '1-31', description: 'The day of the month' },
    { token: 'DD', output: '01-31', description: 'The day of the month, 2-digits' },
    { token: 'ddd', output: 'Mon', description: 'The abbreviated weekday name' },
    { token: 'dddd', output: 'Monday', description: 'The full weekday name' },
    { token: 'M', output: '1-12', description: 'The month, beginning at 1' },
    { token: 'MM', output: '01-12', description: 'The month, 2-digits' },
    { token: 'MMM', output: 'Jan-Dec', description: 'The abbreviated month name' },
    { token: 'MMMM', output: 'January-December', description: 'The full month name' },
    { token: 'YY', output: '18', description: 'The two-digit year' },
    { token: 'YYYY', output: '2018', description: 'The four-digit year' }
  ];

  var HELPER_PLACEHOLDERS = [
    { token: 'tz', output: 'BST/GMT', description: 'The time zone abbreviation for the selected date' },
    { token: 'tz_long', output: 'Europe/London', description: 'The resolved time zone name' }
  ];

  var PLACEHOLDERS = FORMAT_PLACEHOLDERS.concat(HELPER_PLACEHOLDERS);

  function getTokens() {
    return PLACEHOLDERS.slice();
  }

  function getFormatTokens() {
    return FORMAT_PLACEHOLDERS.slice();
  }

  function renderTable() {
    return '' +
      '<div class="table-responsive">' +
        '<table class="table table-sm align-middle mb-0">' +
          '<thead>' +
            '<tr>' +
              '<th scope="col">Format</th>' +
              '<th scope="col">Output</th>' +
              '<th scope="col">Description</th>' +
            '</tr>' +
          '</thead>' +
          '<tbody>' +
            FORMAT_PLACEHOLDERS.map(function (item) {
              return '' +
                '<tr>' +
                  '<td><code>' + item.token + '</code></td>' +
                  '<td>' + escapeHtml(item.output || '') + '</td>' +
                  '<td>' + escapeHtml(item.description || '') + '</td>' +
                '</tr>';
            }).join('') +
          '</tbody>' +
        '</table>' +
      '</div>';
  }

  function escapeHtml(value) {
    return String(value === undefined || value === null ? '' : value)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  root.timeDatePlaceholders = {
    getTokens: getTokens,
    getFormatTokens: getFormatTokens,
    renderTable: renderTable
  };
}());