<script setup>
import { selectedDate, selectedDay, changeDay, changeDate } from "../store";
import ArrowIcon from "./icons/arrow-icon.vue";
import dayjs from "dayjs";
import { getDateSkippingWeekend } from "../util";

const dayNames = [
  "days.sunday",
  "days.monday",
  "days.tuesday",
  "days.wednesday",
  "days.thursday",
  "days.friday",
  "days.saturday",
];
</script>

<template>
  <div class="selector">
    <ArrowIcon @click="changeDay--" />
    <span
      class="day"
      @click="changeDate = getDateSkippingWeekend(dayjs().toDate(), true)"
    >
      {{ $t(dayNames[selectedDay + 1]) }},
      {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
    </span>
    <ArrowIcon style="transform: rotate(180deg)" @click="changeDay++" />
  </div>
</template>

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

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