import { Component, Inject, Vue } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';
import Vue2Filters from 'vue2-filters';
import UserManagementService from './user-management.service';

@Component({
  mixins: [Vue2Filters.mixin]
})
export default class <%=jhiPrefixCapitalized%>UserManagementComponent extends Vue {
  @Inject('userService') private userManagementService: () => UserManagementService;
  public error = '';
  public success = '';
  public users: any[] = [];
  public itemsPerPage = 20;
  public queryCount: number = null;
  public page = 1;
  public previousPage = 1;
  public propOrder = 'id';
  public reverse = false;
  public totalItems = 0;
  public isLoading = false;
  public removeId: <% if (user.primaryKey.type === 'String' || user.primaryKey.type === 'UUID') { %>string<% } else { %>number<% } %> = null;

  public mounted(): void {
    this.loadAll();
  }

  public setActive(user, isActivated): void {
    user.activated = isActivated;
    this.userManagementService().update(user)
      .then(() => {
        this.error = null;
        this.success = 'OK';
        this.loadAll();
      })
      .catch(() => {
        this.success = null;
        this.error = 'ERROR';
        user.activated = false;
      });
  }

  public loadAll(): void {
    this.isLoading = true;

    this.userManagementService().retrieve(<% if (databaseType !== 'cassandra') { %>{
        page: this.page - 1,
        size: this.itemsPerPage,
        sort: this.sort()}<% } %>).then(res => {
      this.isLoading = false;
      this.users = res.data;
      <%_ if (databaseType !== 'cassandra') { _%>
      this.totalItems = Number(res.headers['x-total-count']);
      this.queryCount = this.totalItems;
      <%_ } _%>
    })
    .catch(() => {
      this.isLoading = false;
    });
  }

  public handleSyncList(): void {
    this.loadAll();
  }

  <%_ if (databaseType !== 'cassandra') { _%>
  public sort(): any {
    const result = [this.propOrder + ',' + (this.reverse ? 'desc' : 'asc')];
    if (this.propOrder !== 'id') {
      result.push('id');
    }
    return result;
  }

  public loadPage(page: number): void {
    if (page !== this.previousPage) {
      this.previousPage = page;
      this.transition();
    }
  }

  public transition(): void {
    this.loadAll();
  }

  public changeOrder(propOrder: string): void {
    this.propOrder = propOrder;
    this.reverse = !this.reverse;
    this.transition();
  }
  <%_ } _%>

  public deleteUser(): void {
    this.userManagementService().remove(this.removeId).then(res => {
      <%_
      const headerAlert = `X-${frontendAppName}-alert`.toLowerCase();
      const headerParams = `X-${frontendAppName}-params`.toLowerCase();
      if (enableTranslation) {
      _%>
      // disabling the translation for error
      // const message = this.$t(res.headers['<%=headerAlert%>'], { param: decodeURIComponent(res.headers['<%=headerParams%>'].replace(/\+/g, ' ')) });
      <%_ } else {_%>
      // disabling for error
      // const message = res.headers['<%=headerAlert%>'];
      <%_ } _%>
      const message = 'success delete!';
      this.$bvToast.toast(message.toString(), {
        toaster: 'b-toaster-top-center',
        title: 'Info',
        variant: 'danger',
        solid: true,
        autoHideDelay: 5000,
      });
      this.removeId = null;
      this.loadAll();
      this.closeDialog();
    });
  }

  public prepareRemove(instance): void {
    this.removeId = instance.login;
    if (<any>this.$refs.removeUser) {
      (<any>this.$refs.removeUser).show();
    }
  }

  public closeDialog() : void {
    if (<any>this.$refs.removeUser) {
      (<any>this.$refs.removeUser).hide();
    }
  }

  public get username(): string {
    return this.$store.getters.account ? this.$store.getters.account.login : '';
  }
}