<template lang="pug">
  .flex.flex-col.gap-y-5
    .flex.justify-center.pl-8.pr-20.font-bold.text-xl Планировщик смен
    transition(name="form")
      form-change-shift(
        v-if="showForm",
        :close-form="closeForm",
        :times-shift="timesShift"
      )
    .flex
      .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-6(
            @click="nextHandler",
            class="secondary",
            icon="arrow_forward_ios",
            round,
            size="14px",
            dense,
          ) 
          .text.flex.items-center
            .text.font-medium.text-base {{ dateString }}
            .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
        .flex.gap-x-4.h-10
          q-btn(
            :label="textButton",
            color="primary",
            no-caps,
            padding="8px 24px",
            @click="changeShowTime",
          )
          q-btn(
            label="Замена смен",
            color="primary",
            no-caps,
            padding="8px 24px",
            @click="openForm",
          )
</template>

<script>
import * as moment from "moment";
import BaseButton from "@/components/base/BaseButton.vue";
import FormChangeShift from "@/pages/schedule/components/FormChangeShift.vue";

export default {
  name: "ScheduleHeader",
  components: { BaseButton, FormChangeShift },
  props: {
    startMonth: Object,
    timesShift: Object,
    changeShowTime: Function,
    showTime: Boolean,
  },
  data() {
    return {
      showForm: false,
      isCurrentMonth: true,
    };
  },
  computed: {
    dateString() {
      return this.startMonth
        .format("MMMM YYYY")
        .split(" ")
        .map((elem, index) => {
          if (index === 0) return elem[0].toUpperCase() + elem.slice(1);
          return elem;
        })
        .join(" ");
    },
    textButton() {
      return this.showTime ? "Скрыть время" : "Показать время";
    },
  },
  methods: {
    openForm() {
      this.showForm = true;
    },
    closeForm() {
      this.showForm = false;
    },
    previousHandler() {
      this.$emit("switch-previous-month");
    },
    nextHandler() {
      this.$emit("switch-next-month");
    },
  },
  watch: {
    startMonth() {
      this.isCurrentMonth =
        this.startMonth.format("YYYY-MM-DD") ===
        moment().date(1).format("YYYY-MM-DD");
    },
  },
};
</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)

.form-enter-from
  opacity: 0
  transform: translateY(300px)
  pointer-events: none

.form-enter-active
  transition: 0.5s ease

.form-leave-to
  opacity: 0
  transform: translateY(300px)
  pointer-events: none

.form-leave-active
  transition: 0.5s ease

.form-move
  transition: 0.5s ease

.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>
