import { __decorate } from "tslib";
import { Component } from '@angular/core';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { debounceTime } from 'rxjs/operators';
import { ActionPopupComponent } from '../action-popup';
import * as i0 from "@angular/core";
import * as i1 from "../core/dataManager.service";
import * as i2 from "../core/error-handler.service";
import * as i3 from "@angular/forms";
import * as i4 from "../core/alert.service";
import * as i5 from "@angular/material/dialog";
import * as i6 from "../core/storage.service";
import * as i7 from "./techlify-feature.service";
import * as i8 from "@angular/common";
import * as i9 from "@angular/material/form-field";
import * as i10 from "@angular/material/sort";
import * as i11 from "@angular/material/table";
import * as i12 from "@angular/material/card";
import * as i13 from "@angular/flex-layout/flex";
import * as i14 from "ngx-infinite-scroll";
import * as i15 from "./on-off-switch/on-off-switch.component";
let TechlifyFeatureListingComponent = class TechlifyFeatureListingComponent {
    constructor(dataManager, errorHandler, fb, alertService, dialog, storage, featureService) {
        this.dataManager = dataManager;
        this.errorHandler = errorHandler;
        this.fb = fb;
        this.alertService = alertService;
        this.dialog = dialog;
        this.storage = storage;
        this.featureService = featureService;
        this.features = [];
        this.displayedColumns = [
            'index',
            'feature',
            'description',
            'actions',
        ];
        this.page = 1;
        this.perPage = 25;
        this.isWorking = false;
        this.filterFormGroup = this.fb.group({
            num_items: [""]
        });
    }
    ngOnInit() {
        this.loadData();
        this.listenForChanges();
    }
    listenForChanges() {
        this.filterFormGroup.valueChanges
            .pipe(debounceTime(500), untilDestroyed(this))
            .subscribe((changes) => {
            this.reload();
        });
    }
    async loadData() {
        let result;
        try {
            this.isWorking = true;
            var filter = this.filterFormGroup.value;
            filter.page = this.page;
            filter.perPage = this.perPage;
            result = await this.dataManager.GET(`api/features`, filter);
            this.features = this.features.concat(result.data);
            if (!this.storage.getItem('features')) {
                this.setStorage(this.features);
            }
            this.isWorking = false;
        }
        catch (error) {
            this.errorHandler.handleError(error);
        }
        finally {
            this.isWorking = false;
        }
    }
    async toggeleFeature(element, feature) {
        let status = element ? 'Off' : "On";
        let data;
        const dialogRef = this.dialog.open(ActionPopupComponent, {
            width: "400px",
            data: {
                title: `Turn this feature ${status}?`,
                message: `Would you like to turn ${feature.title} feature ${status}`
            }
        });
        dialogRef.afterClosed().subscribe(async (result) => {
            if (result) {
                try {
                    data = element
                        ? await this.featureService.disableFeature(feature.id)
                        : await this.featureService.enableFeature(feature.id);
                }
                catch (error) {
                    this.errorHandler.handleError(error);
                }
                finally {
                    this.alertService.addAlert(`You have just turned ${status} the feature ${feature.title}`, 'success');
                    this.reload();
                    this.storage.removeItem('features');
                    this.setStorage(this.features);
                    this.isWorking = false;
                }
            }
            else {
                this.reload();
            }
        });
    }
    setStorage(features) {
        let localFeatures = [];
        for (let feature of features) {
            if (!feature.client_feature) {
                if (feature.is_enabled_default) {
                    localFeatures.push(feature.code);
                }
            }
            else {
                if (feature.client_feature.is_enabled) {
                    localFeatures.push(feature.code);
                }
            }
        }
        this.storage.setItem("features", localFeatures);
    }
    reload() {
        this.features = [];
        this.page = 1;
        if (!this.isWorking) {
            this.loadData();
        }
    }
    onScroll() {
        if (!this.isWorking && this.page < this.lastPage) {
            this.page += 1;
            this.loadData();
        }
    }
    sortColumn(event) {
        var direction = event.direction.toString().toUpperCase();
        this.assignFilter(event.active, direction);
        this.reload();
    }
    assignFilter(column, direction) {
        switch (column) {
            case 'name': {
                return this.filterFormGroup
                    .get('sort_by')
                    .setValue('first_name|' + direction);
            }
            case 'added_on': {
                return this.filterFormGroup
                    .get('sort_by')
                    .setValue('created_at|' + direction);
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFeatureListingComponent, deps: [{ token: i1.DataManager }, { token: i2.ErrorHandlerService }, { token: i3.UntypedFormBuilder }, { token: i4.AlertService }, { token: i5.MatDialog }, { token: i6.StorageService }, { token: i7.TechlifyFeatureService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyFeatureListingComponent, selector: "app-techlify-listing-feature", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"3rem\" class=\"p-3\">\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"primary-color mt-3\">\n    <h3>Features Configuration</h3>\n    <mat-hint>\n      <i> Here you can specify which optional features you'd like to have available to your team </i>\n    </mat-hint>\n  </div>\n\n\n  <div>\n    <mat-card>\n      <mat-card-content fxlayout=\"column\" style=\"overflow: auto; height: 700px\" class=\"classifications-card\">\n        <table mat-table [dataSource]=\"features\" class=\"mat-elevation-z8 w-100\" matSort multiTemplateDataRows\n          (matSortChange)=\"sortColumn($event)\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n          (scrolled)=\"onScroll()\" [fromRoot]=\"true\" [infiniteScrollContainer]=\"'.classifications-card'\">\n          <!-- Index Column -->\n          <ng-container matColumnDef=\"index\">\n            <th mat-header-cell *matHeaderCellDef>#</th>\n            <td mat-cell *matCellDef=\"let element; let i = dataIndex\">\n              {{ i + 1 }}\n            </td>\n          </ng-container>\n\n          <!-- Title Column -->\n          <ng-container matColumnDef=\"feature\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Feature\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element?.title }}</td>\n          </ng-container>\n\n          <!-- Description Column -->\n          <ng-container matColumnDef=\"description\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Descriptions\n            </th>\n            <td mat-cell *matCellDef=\"let element\">\n              {{ element?.description }}\n            </td>\n          </ng-container>\n\n          <!-- Actions Column -->\n          <ng-container matColumnDef=\"actions\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Actions\n            </th>\n            <td mat-cell *matCellDef=\"let element\">\n              <div *ngIf=\"!element?.client_feature\">\n                <app-on-off-switch [value]=\"element?.is_enabled_default\"\n                  (click)=\"toggeleFeature(element?.is_enabled_default, element)\"></app-on-off-switch>\n              </div>\n              <div *ngIf=\"element?.client_feature\">\n                <app-on-off-switch [value]=\"element?.client_feature?.is_enabled\"\n                  (click)=\"toggeleFeature(element?.client_feature?.is_enabled, element)\"></app-on-off-switch>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n        </table>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i12.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i13.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i13.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i13.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i14.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: i15.OnOffSwitchComponent, selector: "app-on-off-switch", inputs: ["value"] }] }); }
};
TechlifyFeatureListingComponent = __decorate([
    UntilDestroy()
], TechlifyFeatureListingComponent);
export { TechlifyFeatureListingComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFeatureListingComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-techlify-listing-feature', template: "<div fxLayout=\"column\" fxLayoutGap=\"3rem\" class=\"p-3\">\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"primary-color mt-3\">\n    <h3>Features Configuration</h3>\n    <mat-hint>\n      <i> Here you can specify which optional features you'd like to have available to your team </i>\n    </mat-hint>\n  </div>\n\n\n  <div>\n    <mat-card>\n      <mat-card-content fxlayout=\"column\" style=\"overflow: auto; height: 700px\" class=\"classifications-card\">\n        <table mat-table [dataSource]=\"features\" class=\"mat-elevation-z8 w-100\" matSort multiTemplateDataRows\n          (matSortChange)=\"sortColumn($event)\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n          (scrolled)=\"onScroll()\" [fromRoot]=\"true\" [infiniteScrollContainer]=\"'.classifications-card'\">\n          <!-- Index Column -->\n          <ng-container matColumnDef=\"index\">\n            <th mat-header-cell *matHeaderCellDef>#</th>\n            <td mat-cell *matCellDef=\"let element; let i = dataIndex\">\n              {{ i + 1 }}\n            </td>\n          </ng-container>\n\n          <!-- Title Column -->\n          <ng-container matColumnDef=\"feature\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Feature\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element?.title }}</td>\n          </ng-container>\n\n          <!-- Description Column -->\n          <ng-container matColumnDef=\"description\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Descriptions\n            </th>\n            <td mat-cell *matCellDef=\"let element\">\n              {{ element?.description }}\n            </td>\n          </ng-container>\n\n          <!-- Actions Column -->\n          <ng-container matColumnDef=\"actions\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Actions\n            </th>\n            <td mat-cell *matCellDef=\"let element\">\n              <div *ngIf=\"!element?.client_feature\">\n                <app-on-off-switch [value]=\"element?.is_enabled_default\"\n                  (click)=\"toggeleFeature(element?.is_enabled_default, element)\"></app-on-off-switch>\n              </div>\n              <div *ngIf=\"element?.client_feature\">\n                <app-on-off-switch [value]=\"element?.client_feature?.is_enabled\"\n                  (click)=\"toggeleFeature(element?.client_feature?.is_enabled, element)\"></app-on-off-switch>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n        </table>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>" }]
        }], ctorParameters: () => [{ type: i1.DataManager }, { type: i2.ErrorHandlerService }, { type: i3.UntypedFormBuilder }, { type: i4.AlertService }, { type: i5.MatDialog }, { type: i6.StorageService }, { type: i7.TechlifyFeatureService }] });
//# sourceMappingURL=data:application/json;base64, 