<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
          base-button.left-arrow.mr-4(
            @click="previousHandler",
            left-icon="icon-down-arrow",
            rounded,
            secondary,
            :iconLeftSize="16",
            :size="32"
          )
          base-button.right-arrow.mr-6(
            @click="nextHandler",
            left-icon="icon-down-arrow",
            rounded,
            secondary,
            :iconLeftSize="16",
            :size="32"
          )
          .text.flex.items-center
            .text.font-medium.text-base {{ dateString }}
            .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
        base-button.font-semibold(:size="40", @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,
  },
  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(" ");
    },
  },
  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
</style>
