let days = 0,
  hours = 0,
  minutes = 0,
  seconds = 0;
let timer;
function startTimer(date) {
  const countDownDate = new Date(date).getTime();
  if (countDownDate) {
    timer = setInterval(calcDate, 1000);
    calcDate();
    function calcDate() {
      const now = new Date().getTime();
      const distance = countDownDate - now;
      if (distance < 0) {
        days = 0;
        hours = 0;
        minutes = 0;
        seconds = 0;
        clearInterval(timer);
      } else {
        days = Math.floor(distance / (1000 * 60 * 60 * 24));
        hours = Math.floor(
          (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        seconds = Math.floor((distance % (1000 * 60)) / 1000);
      }
    }
  } else {
    alert("Hatalı tarih !");
  }
}

const RainbowTimerStyle = `
  <style>
  .arc-timer {
  }
  .arc-timer .days,
  .arc-timer .hours,
  .arc-timer .minutes,
  .arc-timer .seconds {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 100%;
  }
  .arc-timer .days{
    color: #fff200;
  }
  .arc-timer .hours{
    color: #ff8a00;
  }
  .arc-timer .minutes{
    color: #00b9ff;
  }
  .arc-timer .seconds{
    color: #8dc63f;
  }
  .arc-timer span:last-child{
    font-size: 1rem;
    color: #323232;
    display: inline-block;
    transform: rotate(90deg);
  }
  .arc-timer.arc-timer-rainbow {
    display: flex;
    align-items: center;
  }
  </style>`;
const RainbowTimerTemplate = `
  <div class="arc-timer arc-timer-rainbow">
    <div class="days">
      <span id="daysDisplay"></span>
      <span>Gün</span>
    </div>
    <div class="hours">
      <span id="hoursDisplay"></span>
      <span>Saat</span>
    </div>
    <div class="minutes">
      <span id="minutesDisplay"></span>
      <span>Dak</span>
    </div>
    <div class="seconds">
      <span id="secondsDisplay"></span>
      <span>San</span>
    </div>
  </div>`;

class RainbowTimer extends HTMLElement {
  constructor() {
    super();
    startTimer(this.getAttribute("date"));
    this.attachShadow({ mode: "open" });
    this.el = document.createElement("div");
    this.el.innerHTML = RainbowTimerStyle + RainbowTimerTemplate;
    this.shadowRoot.append(this.el);
    this.els = {
      days: this.shadowRoot.querySelector("#daysDisplay"),
      hours: this.shadowRoot.querySelector("#hoursDisplay"),
      minutes: this.shadowRoot.querySelector("#minutesDisplay"),
      seconds: this.shadowRoot.querySelector("#secondsDisplay"),
    };
    this.updateTimer();
    setInterval(() => this.updateTimer(), 1000);
  }
  updateTimer() {
    this.els.days.textContent = days;
    this.els.hours.textContent = hours;
    this.els.minutes.textContent = minutes;
    this.els.seconds.textContent = seconds;
    this.shadowRoot.append(this.el);
  }
}

window.customElements.define("rainbow-timer", RainbowTimer);

/* Band Timer */
const BandTimerStyle = `
 <style>
  .arc-timer {
    background: var(--theme-bg, #9a579b);
    color: var(--theme-color, #f8f8f8);
    font-family: Arial;
  }
  .container{
    margin: 1.23rem;
    width: 90%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .arc-timer .days,
  .arc-timer .hours,
  .arc-timer .minutes,
  .arc-timer .seconds {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: 600;
    line-height: 100%;
    margin: 0 0 0 1.1rem;
    height: 32px;
  }
  .arc-timer span:last-child{
    font-size: 0.8rem;
    transform: rotate(-90deg);
    margin-left: 0.25rem;
  }
  .arc-timer.arc-timer-band {
    display: flex;
    align-items: center;
  }
  </style>`;
const BandTimerTemplate = `
  <div class="arc-timer arc-timer-band">
    <div class="container">
      <div class="days">
        <span id="daysDisplay"></span>
        <span>Gün</span>
      </div>
      <div class="hours">
        <span id="hoursDisplay"></span>
        <span>Saat</span>
      </div>
      <div class="minutes">
        <span id="minutesDisplay"></span>
        <span>Dakika</span>
      </div>
      <div class="seconds">
        <span id="secondsDisplay"></span>
        <span>Saniye</span>
      </div>
    </div>
  </div>`;

class BandTimer extends HTMLElement {
  constructor() {
    super();
    startTimer(this.getAttribute("date"));
    this.attachShadow({ mode: "open" });
    this.el = document.createElement("div");
    this.el.innerHTML = BandTimerStyle + BandTimerTemplate;
    this.shadowRoot.append(this.el);
    this.els = {
      days: this.shadowRoot.querySelector("#daysDisplay"),
      hours: this.shadowRoot.querySelector("#hoursDisplay"),
      minutes: this.shadowRoot.querySelector("#minutesDisplay"),
      seconds: this.shadowRoot.querySelector("#secondsDisplay"),
    };
    this.updateTimer();
    setInterval(() => this.updateTimer(), 1000);
    if (this.getAttribute("color")) {
      this.style.setProperty("--theme-color", this.getAttribute("color"));
    }
    if (this.getAttribute("background")) {
      this.style.setProperty("--theme-bg", this.getAttribute("background"));
    }
    switch (this.getAttribute("theme")) {
      case "dark":
        this.style.setProperty("--theme-bg", "#323232");
        this.style.setProperty("--theme-color", "#f8f8f8");
        break;
      case "light":
        this.style.setProperty("--theme-bg", "#e9e9e9");
        this.style.setProperty("--theme-color", "#323232");
        break;
      case "blue":
        this.style.setProperty("--theme-bg", "#00b8d9");
        break;
      case "purple":
        this.style.setProperty("--theme-bg", "#00b8d9");
        break;
    }
  }
  updateTimer() {
    this.els.days.textContent = days;
    this.els.hours.textContent = hours;
    this.els.minutes.textContent = minutes;
    this.els.seconds.textContent = seconds;
    this.shadowRoot.append(this.el);
  }
}

window.customElements.define("band-timer", BandTimer);