<template>
  <exo-drawer
    ref="calendarFilters"
    right
    @opened="drawer = true"
    @closed="cancel">
    <template slot="title">
      {{ $t('agenda.filterAgendaTitle') }}
    </template>
    <template slot="content">
      <div class="d-flex flex-column mx-4 mt-4">
        <div class="font-weight-bold">{{ $t('agenda.filter.label.displayedEvents') }}</div>
        <div class="radio-group-container mt-n2 ms-n1">
          <v-radio-group
            v-model="eventType">
            <v-radio
              :label="$t('agenda.myEvent')"
              value="myEvent" />
            <v-radio
              :label="$t('agenda.declinedEvent')"
              value="declinedEvent" />
            <v-radio
              :label="$t('agenda.allEvent')"
              value="allEvent" />
          </v-radio-group>
        </div>
      </div>
      <div v-if="!$root.isMobile" class="d-flex flex-column mx-4 my-1">
        <div class="font-weight-bold">{{ $t('agenda.filter.label.advancedOptions') }}</div>
        <div class="d-flex mt-1" :title="displayWholeWeekTooltip">
          <v-checkbox
            class="my-auto ms-n1"
            ripple="false"
            :disabled="disableShowAllWeek"
            dense
            v-model="showWholeWeek"
            :label="$t('agenda.filter.label.displayWholeWeek')" />
        </div>
      </div>
    </template>
    <template slot="footer">
      <div class="d-flex">
        <v-btn
          @click="init"
          class="btn me-2">
          <v-icon
            left
            size="20"
            class="text-light-color me-3">
            fa-redo
          </v-icon>
          {{ $t('agenda.button.init') }}
        </v-btn>
        <v-spacer />
        <v-btn
          @click="cancel"
          class="btn me-2">
          {{ $t('agenda.button.cancel') }}
        </v-btn>        
        <v-btn
          @click="confirm"
          class="btn btn-primary">
          {{ $t('agenda.button.save') }}
        </v-btn>
      </div>
    </template>
  </exo-drawer>
</template>
<script>
export default {
  props: {
    currentSpace: {
      type: Object,
      default: null
    },
    settings: {
      type: Object,
      default: () => null
    },
    calendarType: {
      type: String,
      default: null
    },
  },
  data: () => ({
    drawer: false,
    eventType: '',
    defaultShowWholeWeek: null,
    showWholeWeek: true,
    lastShowWholeWeek: true
  }),
  created() {
    this.$root.$on('agenda-filter-drawer-open', this.open);
  },
  computed: {
    displayWholeWeekTooltip() {
      if (this.calendarType === 'day'|| this.calendarType === 'month') {
        return this.$t('agenda.filter.cantChangeViewAllOptionTooltip');
      }
      if (this.defaultShowWholeWeek) {
        return this.$t('agenda.filter.disabledDisplayWholeWeekTooltip');
      }
      return this.$t('agenda.filter.displayWholeWeekTooltip');
    },
    disableShowAllWeek() {
      return this.defaultShowWholeWeek || this.calendarType === 'day'|| this.calendarType === 'month';
    },
  },
  methods: {
    cancel() {
      this.showWholeWeek = this.lastShowWholeWeek;
      this.$refs.calendarFilters.close();
    },
    open() {
      if (this.defaultShowWholeWeek === null){
        this.defaultShowWholeWeek = !this.settings.showWorkingTime;
        this.showWholeWeek = !this.settings.showWorkingTime;
      }
      if (this.calendarType === 'day') {this.showWholeWeek = false;}
      if (this.calendarType === 'month') {this.showWholeWeek = true;}
      this.lastShowWholeWeek = this.showWholeWeek;
      if (!this.eventType){
        this.eventType = this.currentSpace ? 'allEvent' : 'myEvent';
      }
      this.$refs.calendarFilters.open();
    },
    confirm() {
      this.$root.$emit('agenda-event-type-changed', this.eventType);
      this.$root.$emit('agenda-show-working-changed', !this.showWholeWeek);
      this.lastShowWholeWeek = this.showWholeWeek;
      this.$refs.calendarFilters.close();
    },
    init() {
      this.eventType = this.currentSpace ? 'allEvent' : 'myEvent';
      this.showWholeWeek = this.defaultShowWholeWeek;
      this.confirm();
    },
  },
};
</script>