<template lang="pug">
  .calendar-header-wrapper.flex.items-center.justify-between.py-4.pl-4.pr-6
    .flex.items-center
      q-btn.mr-4(
        color="secondary",
        round,
        size="14px",
        dense,
        icon="arrow_back_ios_new"
        text-color="primary",
        @click="previousHandler"
      )
      q-btn.mr-4(
        color="secondary",
        icon="arrow_forward_ios",
        round,
        size="14px",
        text-color="primary",
        dense,
        @click="nextHandler"
      ) 
      .text.flex.items-center
        span.font-medium.text-base {{ dateString }}
          span.today.font-bold.text-xxs(v-if="isCurrentDate")  Сегодня
      //q-btn(
        color="blue-grey-1",
        round,
        size="14px",
        text-color="primary",
        @click="previousHandler"
        icon="arrow_back_ios_new"
      //)
      //.text.flex.items-center.mx-4
        span.font-medium.text-base {{ dateString }}
          span.today.font-bold.text-xxs(v-if="isCurrentDate")  Сегодня
      //q-btn(
        color="blue-grey-1",
        icon="arrow_forward_ios",
        round,
        size="14px",
        text-color="primary",
        @click="nextHandler"
      //)
      //.flex.gap-x-4.ml-5.border-2.border-green-600.bg-lime-200.items-center
        .w-120.h-10.flex.items-center {{ date }}
        base-date-picker(v-model="date")
    calendar-layout-switch(@selected="changeSelectedLayout")
</template>

<script>
import CalendarLayoutSwitch from "./CalendarLayoutSwitch.vue";
//import BaseDatePicker from "@/components/base/BaseDatePicker.vue";
export default {
  name: "CalendarHeader",
  components: { CalendarLayoutSwitch },
  props: {
    currentDate: Object,
    isCurrentDate: Boolean,
  },
  /*data() {
    return {
      date: new Date(),
    };
  },*/
  computed: {
    dateString() {
      let newStr = this.currentDate.format("D MMMM YYYY");
      return newStr
        .split(" ")
        .map((elem, index) => {
          if (index === 1) return elem[0].toUpperCase() + elem.slice(1);
          return elem;
        })
        .join(" ");
    },
  },
  methods: {
    changeSelectedLayout(option) {
      this.$emit("selected-layout", option);
    },
    previousHandler() {
      this.$emit("previous-date");
    },
    nextHandler() {
      this.$emit("next-date");
    },
  },
};
</script>

<style lang="sass" scoped>
.calendar-header-wrapper
  width: 100%
  background-color: var(--default-white)
  height: 72px
  border-radius: 4px
  z-index: 10

.left-arrow
  padding: 3px 4px 0 4px !important
  transform: rotate(90deg)

.right-arrow
  padding: 3px 4px 0 4px !important
  transform: rotate(270deg)

.text
  color: var(--font-dark-blue-color)

.today
  opacity: 0.5

.bg-blue-grey-1
  background: var(--bg-light-grey) !important

//.text-primary
//  color: var(--font-dark-blue-color-0) !important

.q-btn--round
  width: 32px !important
  height: 32px !important
  min-width: 32px !important
  min-height: 32px !important
</style>
