import '../styles/counter.css'
import { Countdown } from './counter.js'
import { fetchObject } from './fetch.js';

// select elements
const app = document.querySelector('.countdown-timer');
const message = document.querySelector('.message');
const heading = document.querySelector('h1');

const api = new fetchObject("http://localhost:8000/counter", app.dataset.id);
const counter = await api.getCounter();

heading.innerText = counter.name;

// Get the new year 
const getEndTime = () => {
  return new Date(Date.parse(counter.endTime));
};


const format = (t) => {
  return t < 10 ? '0' + t : t;
};

const render = (time) => {
  app.innerHTML = `
      <div class="count-down">
          <div class="timer hidden">
              <h2 class="days">${format(time.days)}</h2>
              <small>Days</small>
          </div>
          <div class="timer">
              <h2 class="hours">${format(time.hours)}</h2>
              <small>Hours</small>
          </div>
          <div class="timer">
              <h2 class="minutes">${format(time.minutes)}</h2>
              <small>Minutes</small>
          </div>
          <div class="timer">
              <h2 class="seconds">${format(time.seconds)}</h2>
              <small>Seconds</small>
          </div>
      </div>
      `;
};


const showMessage = () => {
  message.innerHTML = "Le compteur est terminé";
  app.innerHTML = '';
};

const hideMessage = () => {
  message.innerHTML = '';
  heading.style.display = 'block';
};

const complete = () => {
  showMessage();
};

const countdownTimer = new Countdown(
  getEndTime(),
  render,
  complete
);