<template lang="pug">
  .header.flex
    .flex.items-center.justify-between.py-3.pl-5.pr-6.h-14.w-full
      .flex.gap-x-4.items-center
        .flex.gap-x-2
          q-btn.w-8.h-8(
            @click="previousHandler",
            style="background: var(--bg-grey-color); color: var(--font-dark-blue-color)",
            round,
            size="14px",
            dense
          )
            q-icon(name="arrow_back_ios", right)
          q-btn.w-8.h-8(
            @click="nextHandler",
            style="background: var(--bg-grey-color); color: var(--font-dark-blue-color)",
            icon="arrow_forward_ios",
            round,
            size="14px",
            dense
          )
        .flex(:style="{width: '180px'}")
          base-input.relative(
            :placeholder="dateString"
            outlined,
          )
            .flex.items-center
              q-icon(
                size="20px",
                name="event",
                class="cursor-pointer",
                style="color: var(--font-dark-blue-color)"
              )
                q-popup-proxy(
                  cover,
                  transition-show="scale",
                  transition-hide="scale"
                )
                  q-date(v-model="date", minimal, class="font-input")
      .toogle.flex
        q-btn(
          label="Время",
          size="12px",
          class="button"
          :text-color="showTime ? 'white' : null",
          :style="{background: showTime ? 'var(--bg-aqua-blue)' : null}",
          @click="changeShowTime"
        )
        q-btn(
          label="Статус",
          size="12px",
          class="button",
          :text-color="showTime ? null : 'white'",
          :style="{background: showTime ? null : 'var(--bg-aqua-blue)'}",
          @click="changeShowStatus"
        )
</template>

<script>
import * as moment from "moment";
import BaseInput from "@/components/base/BaseInput.vue";

export default {
  name: "ScheduleHeader",
  components: { BaseInput },
  props: {
    showTime: Boolean,
    startMonth: Object,
    changeShowTime: Function,
    changeShowStatus: Function,
  },
  data() {
    return {
      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: {
    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>
.header
  height: 56px
  border-radius: 4px
  background-color: var(--default-white)

.font-input
  font-feature-settings: 'pnum' on, 'lnum' on

.toogle
  background-color: #eff1f4
  border-radius: 4px
  width: 186px
  height: 40px
  padding: 4px

.button
  width: 89px
</style>
