<template>
  <v-toolbar id="spacesListToolbar" flat>
    <v-toolbar-title v-if="skeleton || canCreateSpace">
      <v-btn
        :disabled="skeleton"
        :class="skeleton && 'skeleton-text skeleton-background' || 'btn-primary'"
        class="btn pr-2 pl-0 addNewSpaceButton"
        @click="$root.$emit('addNewSpace')">
        <span v-if="skeleton" class="mx-2"></span>
        <v-icon v-else dark>mdi-plus</v-icon>
        <span class="d-none d-sm-inline">
          {{ skeleton && 'Add space' || $t('spacesList.label.addNewSpace') }}
        </span>
      </v-btn>
    </v-toolbar-title>
    <div
      :class="skeleton && 'skeleton-text skeleton-background skeleton-border-radius'"
      class="text-sub-title ml-3 d-none d-sm-flex">
      {{ skeleton && 'Showing X Spaces' || $t('spacesList.label.spacesSize', {0: spacesSize}) }}
    </div>
    <v-spacer></v-spacer>
    <v-scale-transition>
      <v-text-field
        v-model="keyword"
        :disabled="skeleton"
        :class="skeleton && 'skeleton-text'"
        :placeholder="!skeleton && $t('spacesList.label.filterSpaces') || '&nbsp;'"
        prepend-inner-icon="fa-filter"
        class="inputSpacesFilter pa-0 mr-3 my-auto"></v-text-field>
    </v-scale-transition>
    <v-scale-transition>
      <select
        v-model="filter"
        :disabled="skeleton"
        :class="skeleton && 'skeleton-background skeleton-text'"
        class="selectSpacesFilter my-auto mr-2 subtitle-1 ignore-vuetify-classes d-none d-sm-inline">
        <option
          v-for="spaceFilter in spaceFilters"
          :key="spaceFilter.value"
          :value="spaceFilter.value">
          {{ spaceFilter.text }}
        </option>
      </select>
    </v-scale-transition>
    <v-icon
      :class="skeleton && 'skeleton-text'"
      class="d-sm-none"
      @click="openBottomMenu">
      fa-filter
    </v-icon>
    <v-bottom-sheet v-model="bottomMenu" class="pa-0">
      <v-sheet class="text-center" height="169px">
        <v-toolbar color="primary" dark class="border-box-sizing">
          <v-btn text @click="bottomMenu = false">
            {{ $t('spacesList.button.cancel') }}
          </v-btn>
          <v-spacer></v-spacer>
          <v-toolbar-title>
            <v-icon>fa-filter</v-icon>
            {{ $t('spacesList.label.filter') }}
          </v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn text @click="changeFilterSelection">
            {{ $t('spacesList.button.confirm') }}
          </v-btn>
        </v-toolbar>
        <v-list>
          <v-list-item
            v-for="spaceFilter in spaceFilters"
            :key="spaceFilter"
            @click="filterToChange = spaceFilter.value">
            <v-list-item-title class="align-center d-flex">
              <v-icon v-if="filterToChange === spaceFilter.value">fa-check</v-icon>
              <span v-else class="mr-6"></span>
              <v-spacer />
              <div>
                {{ spaceFilter.text }}
              </div>
              <v-spacer />
              <span class="mr-6"></span>
            </v-list-item-title>
          </v-list-item>
        </v-list>
      </v-sheet>
    </v-bottom-sheet>
  </v-toolbar>
</template>

<script>

export default {
  props: {
    canCreateSpace: {
      type: Boolean,
      default: false,
    },
    keyword: {
      type: String,
      default: null,
    },
    filter: {
      type: String,
      default: null,
    },
    spacesSize: {
      type: String,
      default: null,
    },
    skeleton: {
      type: Boolean,
      default: false,
    },
  },
  data: () => ({
    filterToChange: null,
    bottomMenu: false,
  }),
  computed: {
    spaceFilters() {
      return [{
        text: this.$t('spacesList.filter.all'),
        value: 'all',
      },{
        text: this.$t('spacesList.filter.userSpaces'),
        value: 'member',
      }];
    },
  },
  watch: {
    keyword() {
      this.$emit('keyword-changed', this.keyword);
    },
    filter() {
      this.$emit('filter-changed', this.filter);
    },
  },
  methods: {
    openBottomMenu() {
      this.filterToChange = this.filter;
      this.bottomMenu = true;
    },
    changeFilterSelection() {
      this.bottomMenu = false;
      this.filter = this.filterToChange;
    },
  }
};
</script>

