<template>
  <application-toolbar
    id="usersManagementToolbar"
    :right-text-filter="status === 'ENABLED' && {
      minCharacters: 1,
      placeholder: $t('UsersManagement.filterBy'),
      tooltip: $t('UsersManagement.filterBy'),
    }"
    :right-filter-button="{
      hide: false,
      text: $t('UsersManagement.filterBy')
    }"
    :filters-count="filtersCount"
    compact
    @filter-button-click="$root.$emit('open-advanced-filter-drawer')"
    @filter-text-input-end-typing="keyword = $event">
    <template #left>
      <div class="d-flex position-absolute zindex-1 mt-n1 t-0">
        <v-menu
          v-if="!$root.isDelegatedAdministrator"
          v-model="menu"
          offset-y>
          <!-- eslint-disable vue/valid-v-slot -->
          <template #activator="{on, attrs}">
            <div class="d-flex border-radius overflow-hidden">
              <v-btn
                :width="$root.isMobile && 36 || 'auto'"
                :class="$root.isMobile && 'border-box-sizing'"
                class="btn btn-primary addNewUserButton"
                tile
                @click="$root.$emit('addNewUser')">
                <i class="uiIconAddUser uiIconWhite me-md-3"></i>
                <span class="d-none d-sm-inline">
                  {{ $t('UsersManagement.addUser') }}
                </span>
              </v-btn>
              <template v-if="!$root.isMobile">
                <v-divider vertical />
                <v-btn
                  v-bind="attrs"
                  v-on="on"
                  class="btn btn-primary overflow-hidden pa-0"
                  min-width="30"
                  tile
                  @click.prevent.stop="menu = !menu">
                  <v-icon size="20">{{ menu ? 'fa-caret-up' : 'fa-caret-down' }}</v-icon>
                </v-btn>
              </template>
            </div>
          </template>
          <users-management-import-csv-button
            class="full-width border-box-sizing" />
        </v-menu>
        <v-btn
          v-if="!$root.isMobile"
          :loading="exporting"
          :class="!$root.isDelegatedAdministrator && 'ms-2'"
          color="primary"
          elevation="0"
          outlined
          @click="exportUsers">
          <v-icon class="me-2" size="18">fa-file-excel</v-icon>
          {{ $t('UsersManagement.selection.export') }}
        </v-btn>
        <template v-if="usersSelected">
          <v-btn
            outlined
            color="primary"
            class="ms-2 multiSelect"
            @click="multiSelectAction('onboard')">
            <v-icon class="me-2" size="18">fa-user-plus</v-icon>
            {{ $t('UsersManagement.selection.onboard') }}
          </v-btn>
          <v-btn
            v-if="disabledUsers"
            outlined
            color="primary"
            class="ms-2 multiSelect"
            @click="multiSelectAction('enable')">
            <v-icon class="me-2" size="18">fa-user-check</v-icon>
            {{ $t('UsersManagement.selection.enable') }}
          </v-btn>
          <v-btn
            v-else
            outlined
            color="primary"
            class="ms-2 multiSelect"
            @click="multiSelectAction('disable')">
            <v-icon class="me-2" size="18">fa-user-minus</v-icon>
            {{ $t('UsersManagement.selection.disable') }}
          </v-btn>
        </template>
      </div>
    </template>
  </application-toolbar>
</template>
<script>
export default {
  props: {
    exportUsersUrl: {
      type: String,
      default: null,
    },
    disabledUsers: {
      type: Boolean,
      default: false,
    },
    totalSize: {
      type: Number,
      default: () => 0,
    },
  },
  data: () => ({
    initialized: false,
    keyword: null,
    usersSelected: false,
    filter: null,
    menu: false,
    exportId: null,
    exporting: false,
  }),
  computed: {
    exportLink() {
      return `${this.exportUsersUrl}&export=true`;
    },
    status() {
      return this.filter?.status || 'ENABLED';
    },
    filtersCount() {
      return (this.status !== 'ENABLED' ? 1 : 0)
        + (this.filter?.type ? 1 : 0)
        + (this.filter?.connectionStatus ? 1 : 0)
        + (this.filter?.enrollmentStatus ? 1 : 0);
    },
  },
  watch: {
    keyword() {
      this.$root.$emit('searchUser', this.keyword, this.filter);
    },
    filter() {
      this.$root.$emit('searchUser', this.keyword, this.filter);
    },
    menu() {
      if (this.menu) {
        document.addEventListener('click', this.closeMenu);
      } else {
        document.removeEventListener('click', this.closeMenu);
      }
    },
  },
  created() {
    this.$root.$on('apply-users-filter', this.applyAdvancedFilter);
    document.addEventListener('multiSelect', this.updateSelectedUsers);
  },
  beforeDestroy() {
    document.removeEventListener('multiSelect', this.updateSelectedUsers);
    this.$root.$off('apply-users-filter', this.applyAdvancedFilter);
  },
  methods: {
    updateSelectedUsers(event) {
      this.usersSelected = event.detail.usersSelected;
    },
    multiSelectAction(action) {
      this.$root.$emit('multiSelectAction', action);
    },
    applyAdvancedFilter(filter) {
      this.filter = filter;
    },
    closeMenu() {
      if (this.menu) {
        this.menu = false;
      }
    },
    exportUsers() {
      this.exporting = true;
      return fetch(this.exportLink, {
        credentials: 'include'
      }).then(resp => resp?.ok && resp.json())
        .then(exportResult => this.exportId = exportResult.exportId)
        .then(() => document.dispatchEvent(new CustomEvent('alert-message', {detail: {
          alertComponent: 'users-management-export-csv-result',
          alertComponentParams: {
            options: {
              exportLink: this.exportLink,
              exportId: this.exportId,
              totalUsers: this.totalSize,
            },
          },
          alertDismissible: false,
          alertTimeout: 864000000,
        }})))
        .catch(error => this.$root.$emit('alert-message', error, 'error'))
        .finally(() => this.exporting = false);
    },
  }
};
</script>
