<template lang="pug">
  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
    .flex
      q-btn.mr-4(
        class="secondary",
        round,
        size="14px",
        dense,
        @click="previousHandler"
      )
        q-icon(name="arrow_back_ios", right)
      q-btn.mr-4(
        class="secondary",
        icon="arrow_forward_ios",
        round,
        size="14px",
        dense,
        @click="nextHandler"
      ) 
      .text.flex.items-center
        span.font-medium.text-base {{ dateString }}
          span.today.font-bold.text-xxs(v-if="isCurrentDate")  Сегодня
    calendar-layout-switch(@selected="changeSelectedLayout")
</template>

<script>
import CalendarLayoutSwitch from "./CalendarLayoutSwitch.vue";
export default {
  name: "CalendarHeader",
  components: { CalendarLayoutSwitch },
  props: {
    currentDate: Object,
    isCurrentDate: Boolean,
  },
  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: 56px
  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

.secondary
  background-color: var(--btn-blue-sec-color)
  border: 1px solid var(--btn-blue-sec-color)
  color: var(--btn-blue-color)
  &:hover
    background-color: var(--btn-blue-color-hover)
    border: 1px solid var(--btn-blue-color-hover)
    color: var(--btn-blue-color)
  &:disabled, &[disabled]
    background-color: var(--btn-blue-sec-color)
    border: 1px solid var(--btn-blue-sec-color)
    color: var(--btn-blue-color)
</style>
