const { el, text, setChildren } = redom;

class Progress {
  constructor (name, precision) {
    this.precision = precision || 0;
    this.el = el('.progress',
      el('.percent',
        this.percent = text('')  
      ),
      el('.label', name),
      el('.barbg',
        this.bar = el('.bar')
      )
    );
  }
  update (progress) {
    const { precision } = this;
    const percent = progress * 100;
    this.percent.textContent = percent.toFixed(precision) + ' %';
    this.bar.style.transform = 'scale(' + progress + ', 1)';
  }
}

const second = new Progress('Second');
const minute = new Progress('Minute', 1);
const hour = new Progress('Hour', 2);
const day = new Progress('Day', 3);
const week = new Progress('Week (monday-first)', 4);
const month = new Progress('Month', 5);
const year = new Progress('Year', 6);

setChildren(document.body, [second, minute, hour, day, week, month, year].reverse());

const SECOND = 1000;
const MINUTE = 60 * SECOND;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;

function render () {
  requestAnimationFrame(render);
  const now = Date.now();
  second.update((now % SECOND) / SECOND);
  minute.update((now % MINUTE) / MINUTE);
  hour.update((now % HOUR) / HOUR);
  day.update(getDayProgress(now));
  week.update(getWeekProgress(now));
  month.update(getMonthProgress(now));
  year.update(getYearProgress(now));
}

render();

function getDayProgress (now) {
  const startOfDay = new Date();
  resetDate(startOfDay);

  const endOfDay = new Date(startOfDay);
  endOfDay.setDate(endOfDay.getDate() + 1);

  return (now - startOfDay) / (endOfDay - startOfDay);
}

function getWeekProgress (now) {
  const startOfWeek = new Date();
  const day = (startOfWeek.getDay() - 1) % 7;
  startOfWeek.setDate(startOfWeek.getDate() - day);
  resetDate(startOfWeek);

  const endOfWeek = new Date(startOfWeek);
  endOfWeek.setDate(endOfWeek.getDate() + 7);

  return (now - startOfWeek) / (endOfWeek - startOfWeek);
}

function getMonthProgress (now) {
  const startOfMonth = new Date();
  startOfMonth.setDate(1);
  resetDate(startOfMonth);

  const endOfMonth = new Date(startOfMonth);
  endOfMonth.setMonth(endOfMonth.getMonth() + 1);

  return (now - startOfMonth) / (endOfMonth - startOfMonth);
}

function resetDate (date) {
  date.setHours(0);
  date.setMinutes(0);
  date.setSeconds(0);
  date.setMilliseconds(0);
}

function getYearProgress (now) {
  const startOfYear = new Date();
  resetDate(startOfYear);
  startOfYear.setDate(1);
  startOfYear.setMonth(0);

  const endOfYear = new Date(startOfYear);
  endOfYear.setFullYear(endOfYear.getFullYear() + 1);

  return (now - startOfYear) / (endOfYear - startOfYear);
}