var datetimes = {};

function validate_datetime(what, slug) {
  let val = document.getElementById('%s_%s'.format(slug, what)).value;
  let span = document.getElementById('%s_%s_span'.format(slug, what));
  if (what == 'tz') {
    datetimes[slug].tz = val;
    validate_datetime('start', slug);
    validate_datetime('stop', slug);
  }
  let spaninfo = '';
  if (what == 'start' || what == 'stop') {
    let dt = moment.tz(val, datetimes[slug].tz||"Etc/UTC").format();
    if (val == '' || dt == 'Invalid date') {
      if (datetimes[slug]['%s_require_valid'.format(what)] === true) {
        spaninfo = "Invalid date!";
        span.style.color = 'red';
      } else {
        dt = null;
      }
    } else {
      spaninfo = dt;
      span.style.color = 'green';
    }
    span.innerText = spaninfo;
    datetimes[slug][what] = dt;
  }
}

function datetime(slug, options) {
  // defaults
  let tz = options.tz || "Etc/UTC";
  let start = options.start;
  let stop = options.stop;
  let title = options.title;
  let start_require_valid = (options.requireStart === false) ? false: true; //default to true
  let stop_require_valid = (options.requireStop === false) ? false: true; //default to true

  datetimes[slug] = {
    tz: tz,
    start: start,
    stop: stop,
    title: title,
    start_require_valid: start_require_valid,
    stop_require_valid: stop_require_valid
  };

  let div = new HTML('div', { style: {textAlign: 'center'}});

  // TZ
  let tzdiv = new HTML('div', {style: {width: '180px', margin: '1%', position: 'relative', display: 'inline-block'}});
  tzdiv.inject(new HTML('big', {}, "Timezone:"));
  tzdiv.inject(br());

  let zones = moment.tz.names();
  let tzfield = new HTML('select', { id: '%s_tz'.format(slug), type: 'text', style: {width: '160px'}, onchange: 'validate_datetime("tz", "%s");'.format(slug)});
  tzdiv.inject(tzfield);
  for (var i = 0; i < zones.length; i++) {
    let zn = String(zones[i]);
    let opt = new HTML('option', { selected: zn == (tz || 'Etc/UTC') ? 'selected' : null}, zn);
    tzfield.inject(opt);
  }
  tzdiv.inject(new HTML('span', {style: {display: 'inline-block', textIndent: '24px', width: '100%', height: '20px'},id: '%s_tz_span'.format(slug)}));
  div.inject(tzdiv);

  // START TIME
  let stdiv = new HTML('div', {style: {width: '180px', margin: '1%', position: 'relative', display: 'inline-block'}});
  stdiv.inject(new HTML('big',{},"From:"));
  stdiv.inject(br());
  let stfield = new HTML('input', { id: '%s_start'.format(slug), type: 'text', style: {width: '160px'}, value: start, onchange: 'validate_datetime("start", "%s");'.format(slug)});
  stdiv.inject(stfield);
  stdiv.inject(new HTML('span', {style: {display: 'inline-block', fontSize: '0.8rem', width: '100%', height: '20px'},id: '%s_start_span'.format(slug)}));
  //starttimediv.inject(new HTML('p', {style: {padding: '12px'}}, "The date and time when the Call for Papers is open to submissions, relative to the local timezone above."));
  div.inject(stdiv);
  flatpickr(stfield, {enableTime: true});

  // STOP TIME
  let stopdiv = new HTML('div', {style: {width: '180px', margin: '1%', position: 'relative', display: 'inline-block'}});
  stopdiv.inject(new HTML('big',{}, "To:"));
  stopdiv.inject(br());
  let stopfield = new HTML('input', { id: '%s_stop'.format(slug), type: 'text', style: {width: '160px'}, value: stop, onchange: 'validate_datetime("stop", "%s");'.format(slug)});
  stopdiv.inject(stopfield);
  stopdiv.inject(new HTML('span', {style: {display: 'inline-block', fontSize: '0.8rem', width: '100%', height: '20px'},id: '%s_stop_span'.format(slug)}));
  //starttimediv.inject(new HTML('p', {style: {padding: '12px'}}, "The date and time when the Call for Papers is open to submissions, relative to the local timezone above."));
  div.inject(stopdiv);
  flatpickr(stopfield, {enableTime: true});

  return div;
}