<template lang="pug">
  .calendar-header-wrapper.w-full.flex.items-center.p-4.justify-between
    base-input(
      iconLeft,
      outlined,
      :width="280",
      placeholder="Найти ...",
      fontSize="16px",
      lineHeight="19px"
    )
      q-icon(name="app:icon-search", size="20px")
    .flex.gap-x-4.items-center.justify-center
      q-btn(
        color="secondary",
        round,
        size="14px",
        dense,
        icon="arrow_back_ios_new",
        text-color="primary",
        padding="2px 11px 2px 8px",
        @click="previousWeek"
      )
      base-input(
        outlined,
        :width="300",
        fontSize="16px",
        lineHeight="19px",
        iconRight,
        v-model="currentWeek",
        readonly
      )
        .h-5.w-5.flex.items-center.justify-center
          q-icon.text.cursor-pointer(:name="calendarVisibility ? 'app:cancel' : 'app:calendar'",
            :size="calendarVisibility ? '10px' : '16px'"
          )
            q-menu(
              :style="{'margin-top': '4px !important'}"
              v-model="calendarVisibility",
              transition-show="scale",
              transition-hide="scale"
              self="top middle",
              :offset="[122, 14]"
            )
              base-calendar(
                v-model="date",
                range,
                :range-count="7",
                :save="saveNewDate",
                :cancel="cancelDateChanges"
              )
      q-btn(
        color="secondary",
        icon="arrow_forward_ios",
        round,
        size="14px",
        text-color="primary",
        dense,
        @click="nextWeek"
      ) 
    .h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
      q-btn-toggle(
        v-model="value",
        :options="displayTypesList",
        no-caps,
        toggle-color="light-blue-4",
        padding="4px"
      )
</template>

<script>
import BaseInput from "@/components/base/BaseInput";
import BaseCalendar from "@/components/base/BaseCalendar";
import { mapState, mapActions } from "vuex";
import { v_model } from "@/shared/mixins/v-model";
export default {
  name: "CalendarHeader",
  mixins: [v_model],
  components: { BaseInput, BaseCalendar },
  data() {
    return {
      displayTypesList: [
        {
          label: "exp",
          value: "expanded",
        },
        {
          label: "col",
          value: "collapsed",
        },
      ],
      date: {
        from: null,
        to: null,
      },
      calendarVisibility: false,
    };
  },
  computed: {
    currentWeek() {
      return `${this.date?.from?.format(
        "D MMMM YYYY"
      )} - ${this.date?.to?.format("D MMMM YYYY")}`;
    },
    ...mapState({
      selectedDates: (state) => state.calendar.selectedDates,
    }),
  },
  methods: {
    previousWeek() {
      this.date.from = this.date.from.clone().subtract(1, "week");
      this.date.to = this.date.to.clone().subtract(1, "week");
    },
    nextWeek() {
      this.date.from = this.date.from.clone().add(1, "week");
      this.date.to = this.date.to.clone().add(1, "week");
    },
    ...mapActions({
      changeSelectedDates: "changeSelectedDates",
    }),
    saveNewDate() {
      this.calendarVisibility = false;
      if (
        !this.date?.from.isSame(this.selectedDates?.from) &&
        !this.date?.to.isSame(this.selectedDates?.to)
      )
        this.changeSelectedDates(this.date);
    },
    cancelDateChanges() {
      this.calendarVisibility = false;
    },
  },
  watch: {
    calendarVisibility(val) {
      if (val === false)
        this.date = {
          from: this.selectedDates.from.clone(),
          to: this.selectedDates.to.clone(),
        };
    },
  },
  mounted() {
    this.date = {
      from: this.selectedDates.from.clone(),
      to: this.selectedDates.to.clone(),
    };
  },
};
</script>

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

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

.text-grey-color
  color: var(--font-grey-color)

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

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

.q-btn--round
  width: 32px !important
  height: 32px !important
  min-width: 32px !important
  min-height: 32px !important

.q-btn-group :deep(.q-btn-item)
  border-radius: 4px !important
</style>
<style lang="sass">
.q-field--outlined.q-field--readonly .q-field__control:before
  border-style: solid !important
</style>
