<template lang="pug">
  .calendar-wrapper.bg-white
    .header.px-6.pt-5.pb-18px.flex.items-center.justify-between
      .text-smm.font-semibold {{ month }}
      .arrows.flex.items-center.justify-center.gap-x-6
        q-btn(
          flat,
          size="10px",
          dense,
          icon="arrow_back_ios_new",
          text-color="black",
          round,
          @click="previousMonth"
        )
        q-btn(
          flat,
          icon="arrow_forward_ios",
          size="10px",
          text-color="black",
          dense,
          round,
          @click="nextMonth"
        )
    .week.py-4.px-18px.grid.grid-rows-1.grid-cols-7.gap-x-1
      .flex.items-center.justify-center.week-item.text-xsx.py-1.px-2(v-for="day of week", :key="day") {{ day }}
    .body.pb-6.px-6.grid.grid-rows-6.grid-cols-7.gap-x-1.gap-y-2
      .flex.items-center.justify-center.h-8.w-8.rounded-full(
        v-for="date of dates",
        :style="calculateCurrentMonth(date)",
        :key="date",
      ) {{ date.format("DD") }}
</template>

<script>
import * as moment from "moment/moment";
import { mapState } from "vuex";
export default {
  name: "BaseCalendar",
  props: {
    modelValue: Object,
    range: Boolean,
  },
  data() {
    return {
      week: ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"],
      currentDate: moment(),
    };
  },
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
    ...mapState({
      today: (state) => state.calendar.currentDate,
    }),
    month() {
      let formattedMonth = this.currentDate.format("MMMM");
      return `${
        formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
      } ${this.currentDate.format("YYYY")}`;
    },
    startDate() {
      return this.currentDate
        .clone()
        .startOf("month")
        .startOf("week")
        .subtract(1, "day");
    },
    dates() {
      return [...Array(42)].map(() => this.startDate.add(1, "day").clone());
    },
  },
  methods: {
    previousMonth() {
      this.currentDate = this.currentDate.clone().subtract(1, "month");
    },
    nextMonth() {
      this.currentDate = this.currentDate.clone().add(1, "month");
    },
    calculateCurrentMonth(date) {
      if (
        date.isSame(this.today, "day") ||
        date.isSame(this.currentDate, "day")
      )
        return {
          color: "var(--default-white)",
          "background-color": "var(--btn-blue-color)",
        };
      if (date.isSame(this.currentDate, "month"))
        return {
          color: "var(--font-black-color)",
        };
      return {
        color: "var(--font-grey-color)",
      };
    },
  },
  mounted() {
    if (this.value) this.currentDate = this.value.clone();
  },
};
</script>

<style scoped lang="sass">
.calendar-wrapper
  width: 286px
.header
  border-bottom: 1px solid var(--border-light-grey-color)
.week-item
  color: var(--font-grey-color)
.week-item:nth-last-child(-n+2)
  color: var(--border-red-color)
</style>
