<script setup>
import { selectedDate, selectedDay } from "../store";
import { dayNames } from "../definitions";
import dayjs from "dayjs";
import ArrowIcon from "./icons/arrow-icon.vue";

function nextDay() {
  var newDate = dayjs(selectedDate.value).add(1, "day");
  // Skip weekend
  if (newDate.day() == 6) newDate = newDate.add(2, "day");
  selectedDate.value = newDate.toDate();
}
function previousDay() {
  var newDate = dayjs(selectedDate.value).subtract(1, "day");
  // Skip weekend
  if (newDate.day() == 0) newDate = newDate.subtract(2, "day");
  selectedDate.value = newDate.toDate();
}
</script>

<template>
  <div class="selector">
    <ArrowIcon @click="previousDay" />
    <span
      class="day"
      @click="selectedDate = new Date(new Date().setUTCHours(0, 0, 0, 0))"
    >
      {{ dayNames[selectedDay + 1] }},
      {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
    </span>
    <ArrowIcon style="transform: rotate(180deg)" @click="nextDay" />
  </div>
</template>

<style scoped>
.selector {
  padding: 65px 10px 0px 10px;
  display: grid;
  grid-template-columns: 35px 1fr 35px;
  align-items: center;
  justify-items: center;
}

svg,
span {
  cursor: pointer;
}
</style>
