<!--
* Copyright (C) 2022 eXo Platform SAS
*
*  This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program.  If not, see <gnu.org/licenses>.
-->
<template>
  <div>
    <v-container
      pa-0
      fluid
      d-flex>
      <v-combobox
        ref="select"
        v-model="spaceModel"
        :items="spaces"
        :filter="filterSpaces"
        attach
        class="inputSpaceName pa-0"
        solo
        @change="deleteSpace()">
        <template #selection="{ attrs, item, parent, selected }">
          <div class="identitySuggester no-border ma-0">
            <v-chip
              v-if="item === Object(item)"
              v-bind="attrs"
              :input-value="selected"
              close
              class="identitySuggesterItem d-flex align-center"
              @click:close="deleteSpace">
              <v-avatar left>
                <v-img :src="item.avatarUrl" />
              </v-avatar>
              <div
                class="body-2 text-truncate flex-grow-1"
                @click="parent.selectItem(item)">
                {{ item.displayName }}
              </div>
            </v-chip>
          </div>
        </template>
        <template #item="{ item }">
          <v-list-item
            class="px-3"
            @click="updateSpace(item)">
            <div class="identitySuggester no-border ma-0 no-border">
              <v-chip
                class="identitySuggesterItem d-flex align-center"
                close>
                <v-avatar left>
                  <v-img :src="item.avatarUrl" />
                </v-avatar>
                <span class="text-truncate flex-grow-1">
                  {{ item.displayName }}
                </span>
              </v-chip>
            </div>
          </v-list-item>
        </template>
      </v-combobox>
    </v-container>
  </div>
</template>

<script>
export default {
  props: {
    space: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      spaces: [],
      spaceModel: null,
      search: null,
      offset: 0,
      limit: 20,
      spacesSize: 0,
      loadingSpaces: false,
    };
  },
  watch: {
    spacesSize (){
      if (this.loadingSpaces && this.spacesSize >= this.limit){
        this.limit += this.spacesSize;
        this.getSpaces();
      }
    }
  },
  created() {
    this.getSpaces();
    this.spaceModel = this.space;
    $(document).on('mousedown', () => {
      if (this.$refs?.select?.isMenuActive) {
        window.setTimeout(() => {
          if (this.$refs?.select?.isMenuActive) {
            this.$refs.select.isMenuActive = false;
          }
        }, 200);
      }
    });
  },
  methods: {
    getSpaces() {
      this.loadingSpaces = true;
      this.$spaceService.getSpaces(this.query, 0, this.limit, 'member', 'identity') .then((spaces) => {
        this.spaces = spaces.spaces;
        this.spacesSize = spaces && spaces.size || 0;
      }).finally(() => this.loadingSpaces = false);
    },
    filterSpaces(item, queryText) {
      return  item.displayName.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) >-1;},
    updateSpace(space) {
      this.$root.$emit('current-space',space);
      this.spaceModel = space;
    },
    deleteSpace() {
      this.spaceModel = null;
      this.$root.$emit('current-space',null);
    },
  }
};
</script>