var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
    return function (target, key) { decorator(target, key, paramIndex); }
};
import { Component, Inject, Input } from '@angular/core';
import { ComponentHelper } from '../../classes/component-helper';
import { AuthService } from "../../services/auth.service";
import { ToastService } from '../../utils/toast.service';
import { Constants } from '../../core.consts';
import { take } from 'rxjs/operators';
import Fuse from 'fuse.js';
let SellerDashboardContainerEcComponent = class SellerDashboardContainerEcComponent extends ComponentHelper {
    constructor(authService, toastrService, constants, env) {
        super();
        this.authService = authService;
        this.toastrService = toastrService;
        this.constants = constants;
        this.env = env;
        this.UIComponents = [];
        this.user = null;
        this.activeCustomer = null;
        this.sortValue = '';
        this.searchInput = '';
        this.customers = [];
        this.filteredCustomers = [];
        this.fuseOptions = {
            isCaseSensitive: false,
            shouldSort: false,
            tokenize: true,
            threshold: 0.2,
            location: 0,
            distance: 100,
            maxPatternLength: 32,
            minMatchCharLength: 0,
            keys: ['firstName', 'lastName', 'email', 'id']
        };
        this.fuse = new Fuse(this.customers, this.fuseOptions);
        this.updateCustomers = () => {
            this.filteredCustomers = this.customers;
            this.fuse.setCollection(this.filteredCustomers);
            this.filteredCustomers =
                this.searchInput
                    ? this.fuse
                        .search(this.searchInput)
                        .map(customer => customer.item)
                    : this.customers;
            this.fuse.setCollection(this.filteredCustomers);
            this.sortCustomers(this.sortValue);
        };
        /**
         * @description Ordena la lista de clientes
         * @param value recibe una cadena que de estar formada de la forma "tipoOrdenacion_atributoPorOrdenar"
         * Ejemplo: "asc_firstName" o "desc_id" ...
         */
        this.sortCustomers = value => {
            this.sortValue = value;
            let values = value.split('_');
            let sortType = values[0];
            let attribute = values[1];
            const comparator = (sortType == 'asc')
                ? [-1, 1]
                : [1, -1];
            let typeValue;
            if (this.filteredCustomers.length > 0) {
                typeValue = typeof (this.filteredCustomers[0][attribute]);
            }
            let sortFunction = typeValue == 'number' ? this.sortNumber : this.sortText;
            this.filteredCustomers =
                this.sortValue
                    ? this.filteredCustomers.sort((aCustomer, otherCustomer) => sortFunction(aCustomer, otherCustomer, attribute, comparator))
                    : this.filteredCustomers;
        };
        this.sortNumber = (aCustomer, otherCustomer, attribute, comparator) => aCustomer[attribute] < otherCustomer[attribute] ? comparator[0] : comparator[1];
        this.sortText = (aCustomer, otherCustomer, attribute, comparator) => {
            return (aCustomer[attribute] == otherCustomer[attribute])
                ? aCustomer.lastName.toLowerCase() < otherCustomer.lastName.toLowerCase() ? comparator[0] : comparator[1]
                : String(aCustomer[attribute]).toLowerCase() < String(otherCustomer[attribute]).toLowerCase() ? comparator[0] : comparator[1];
        };
        this.changeCustomer = customer => {
            this.authService.setCustomer(customer);
            customer
                ? this.toastrService.show('start-impersonating', { customer: customer.firstName + ' ' + customer.lastName })
                : this.toastrService.show('stop-impersonating');
        };
        this.hasHeader = () => this.hasUIComponent('HEADER_TAB') ||
            this.hasUIComponent('GENERATE_BUDGET_BTN') ||
            this.hasUIComponent('MANAGE_ORDERS_BTN') ||
            this.hasUIComponent('SORT_SELECT') ||
            this.hasUIComponent('SEARCH_FORM');
        this.navigateExternal = url => window.open(url);
        this.hasUIComponent = (UIComponent) => this.UIComponents.includes(UIComponent);
        this.ecOnConstruct();
    }
    ngOnInit() {
        this.authService.getUserProfile()
            .pipe(take(1))
            .subscribe(user => {
            this.user = user;
            this.customers = user.customers;
            this.filteredCustomers = this.customers;
            this.fuse.setCollection(this.filteredCustomers);
            this.sortCustomers('desc_ordersNotApproved');
        });
    }
};
SellerDashboardContainerEcComponent.ctorParameters = () => [
    { type: AuthService },
    { type: ToastService },
    { type: Constants },
    { type: undefined, decorators: [{ type: Inject, args: ['env',] }] }
];
__decorate([
    Input()
], SellerDashboardContainerEcComponent.prototype, "UIComponents", void 0);
SellerDashboardContainerEcComponent = __decorate([
    Component({
        selector: 'app-seller-dashboard-container',
        template: "<section *ngIf=\"user\" id=\"seller-dashboard\">\n    <div class=\"section-content mt-5 mb-2 tablaVendedores\">\n        <div class=\"container-xl\">\n            <div class=\"row\">\n                <main class=\"col-md-12\">\n\n                    <ul *ngIf=\"hasHeader()\" class=\"nav nav-tabs\">\n                        <li class=\"nav-item col-12 col-lg-2\">\n                            <a *ngIf=\"hasUIComponent('HEADER_TAB')\" class=\"nav-link active cursor-pointer px-4\"\n                                aria-current=\"page\">\n                                {{ 'my-clients' | translate }}\n                            </a>\n                        </li>\n                        <li class=\"ms-auto row\">\n                            <div\n                                class=\"d-flex justify-content-end justify-content-lg-end justify-content-xl-end col-12 col-md-12 col-lg-auto\">\n                                <ng-container *ngIf=\"hasUIComponent('GENERATE_BUDGET_BTN') \">\n                                    <a *ngIf=\"authService.getCustomer()?.id; else withoutCustomer\"\n                                        [routerLink]=\"'/collection'\"\n                                        class=\"btn btn-seller-primary text-white btnGestionar d-flex align-items-center\"><i\n                                            class=\"bi bi-file-earmark me-2 mr-2\"></i>{{ 'generate-budget' | translate }}\n                                    </a>\n                                    <ng-template #withoutCustomer>\n                                        <a class=\"btn btn-seller-primary text-white btnGestionar d-flex align-items-center\"\n                                            (click)=\"toastrService.show('must-select-customer')\">\n                                            <i class=\"bi bi-file-earmark me-2 mr-2\"></i>{{ 'generate-budget' | translate\n                                            }}\n                                        </a>\n                                    </ng-template>\n                                </ng-container>\n                                <a *ngIf=\"hasUIComponent('MANAGE_ORDERS_BTN')\"\n                                    (click)=\"navigateExternal(constants.getUrlBase())\"\n                                    class=\"btn btn-seller-primary text-white btnGestionar d-flex align-items-center me- me-lg-4 mr- mr-lg-4\"><i\n                                        class=\"bi bi-archive-fill me-2 mr-2\"></i>{{ 'manage-orders' | translate }}</a>\n                            </div>\n                            <div class=\"d-flex camposVendedores col-12 col-md-12 col-lg-auto justify-content-end\">\n                                <select *ngIf=\"hasUIComponent('SORT_SELECT')\" id=\"customerSort\" name=\"customerSort\"\n                                    (change)=\"sortCustomers($event.target.value)\" class=\"mb-1 ordenarVendedores\">\n                                    <option selected hidden disabled>{{ 'order-by' | translate }}</option>\n                                    <option value='asc_firstName'>{{ 'client' | translate }} (A-Z)</option>\n                                    <option value='desc_firstName'>{{ 'client' | translate }} (Z-A)</option>\n                                    <option value='asc_id'>Menor a Mayor c\u00F3digo</option>\n                                    <option value='desc_id'>Mayor a Menor c\u00F3digo</option>\n                                </select>\n                                <form *ngIf=\"hasUIComponent('SEARCH_FORM')\"\n                                    class=\"col-lg-auto mb-lg-0 d-flex ms-3 ml-3 d-flex buscadorVendedores\">\n                                    <input type=\"text\" name=\"searchInput\" class=\"form-control\"\n                                        placeholder=\"{{ 'search' | translate }}\" [(ngModel)]=\"searchInput\"\n                                        (keyup.enter)=\"updateCustomers()\">\n                                    <button class=\"btn btn-primary ms-1 ml-1 bg-white border-dark btnSearch\"><i\n                                            class=\"bi bi-search text-dark\" (click)=\"updateCustomers()\"></i></button>\n                                </form>\n                            </div>\n                        </li>\n                    </ul>\n\n                    <ng-container *ngIf=\"user.customers?.length; else noCustomers\">\n\n                        <article class=\"card card-body mb-1 carritoProductoHeader m-0 py-0 mt-4\">\n                            <div class=\"row align-items-center font-bold border-bottom\">\n                                <div class=\"col-3 col-md-2 text-left\">\n                                    <small>{{ 'code' | translate | uppercase }}</small>\n                                </div>\n                                <div class=\"col-5 col-md-3 mb-md-0\">\n                                    <small>{{ 'client' | translate | uppercase }}</small>\n                                </div>\n                                <div class=\"col-4 col-md-3 text-left d-none d-md-block\">\n                                    <small>{{ 'user' | translate | uppercase }}</small>\n                                </div>\n                                <div class=\"col-4 col-md-2 text-left\">\n                                    <small>{{ 'new-orders' | translate | uppercase }}</small>\n                                </div>\n                                <div class=\"col-2 col-md-2 text-left d-none d-md-block\">\n                                    <small></small>\n                                </div>\n\n                            </div>\n                        </article>\n\n                        <article *ngFor=\"let customer of filteredCustomers\" class=\"card card-body mb-3 cadaVendedor\">\n                            <div class=\"row d-flex align-items-center\">\n                                <div class=\"col-3 col-md-2 text-left ps-2 pl-2\">\n                                    <div class=\"price h6 pb-0 mb-0 ps-3 pl-1\">\n                                        {{ customer.managementSystemInternalCode || 'n/a' }}\n                                    </div>\n                                </div>\n                                <div class=\"col-5 col-md-3 text-left\">\n                                    <div class=\"price h6 fw-normal ps-2 pl-2 pb-0 mb-0\">\n                                        {{ customer.firstName }} {{ customer.lastName }}\n                                        <p class=\"d-block d-md-none fs-6 mt-1 mb-0 p-0 userMobile\">\n                                            {{ customer.email }}\n                                        </p>\n                                    </div>\n                                </div>\n                                <div class=\"col-4 col-md-3 text-left d-none d-md-block\">\n                                    <div class=\"price h6 fw-normal pb-0 mb-0 ps-2 pl-2\">\n                                        {{ customer.email }}\n                                    </div>\n                                </div>\n                                <div class=\"col-4 col-md-2 text-left ps-2 pl-2\">\n                                    <div *ngIf=\"true\" class=\"contNumero\">\n                                        {{ customer.ordersNotApproved }}\n                                    </div>\n                                </div>\n                                <div class=\"col-12 col-md-2 btnIngresar\">\n\n                                    <ng-container\n                                        *ngIf=\"authService.getCustomer()?.id == customer.id; else noActiveCustomer\">\n                                        <a (click)=\"changeCustomer(null)\"\n                                            class=\"btn btn-seller-primary justify-content-center\">\n                                            <i class=\"bi bi-box-arrow-left me-2 mr-2\"></i>\n                                            <small class=\"me-2 mr-2 d-none d-md-block\">\n                                                {{ 'exit' | translate | uppercase }}\n                                            </small>\n                                        </a>\n                                    </ng-container>\n                                    <ng-template #noActiveCustomer>\n                                        <a (click)=\"changeCustomer(customer)\"\n                                            class=\"btn btn-seller-primary justify-content-center\">\n                                            <i class=\"bi bi-box-arrow-in-right me-2 mr-2\"></i>\n                                            <small class=\"me-2 mr-2 d-none d-md-block\">\n                                                {{ 'operate-as' | translate | uppercase }}\n                                            </small>\n                                        </a>\n                                    </ng-template>\n\n                                </div>\n                            </div>\n                        </article>\n\n                    </ng-container>\n\n                </main>\n            </div>\n        </div>\n    </div>\n</section>\n\n<ng-template #noCustomers>\n    <h4 class=\"text-center p-5\">{{ 'no-customers' | translate }}</h4>\n</ng-template>",
        styles: ["#seller-dashboard{--seller-dashboard-primary-color:0,0,0}.btn-seller-primary{color:#fff!important;background-color:rgba(var(--seller-dashboard-primary-color),1)!important;border-color:rgba(var(--seller-dashboard-primary-color),1)!important}.btn-seller-primary:hover{background-color:rgba(var(--seller-dashboard-primary-color),.9)!important}.btn-seller-primary:active{background-color:rgba(var(--seller-dashboard-primary-color),.8)!important}.btnGestionar{padding:6px 12px!important;height:36px;display:flex;align-items:center;justify-content:center;margin-left:10px}.ordenarVendedores{width:150px!important;color:#8b8b8b!important;background-color:#fff;border:1px solid #b6b6b6!important;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px}.buscadorVendedores{margin-bottom:4px!important}.buscadorVendedores input{border:1px solid #b6b6b6!important;width:200px}.buscadorVendedores .btnSearch{border:1px solid #b6b6b6!important;padding:.375rem .75rem;font-size:1rem}.buscadorVendedores .btnSearch:focus{background-color:#fff!important}.carritoProductoHeader{border:none!important}.carritoProductoHeader small{font-size:13px}.cadaVendedor{padding:5px 0;margin-bottom:0!important;border:none!important;border-bottom:1px solid #ccc!important;border-radius:0!important;-webkit-border-radius:0}.cadaVendedor .btnIngresar a{padding:10px!important;border-width:1px!important;border-style:solid!important;display:flex;align-items:center;width:100%!important;margin-left:auto;color:#fff}.cadaVendedor .btnIngresar .contNumero{background-color:#eee;width:20px;height:20px;color:#000;font-size:13px;display:flex;align-items:center;justify-content:center;font-weight:600;border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px;-o-border-radius:20px}.userMobile{font-size:14px!important;font-style:italic!important}.cadaVendedor .btnIngresar a:hover{background-color:rgba(var(--seller-dashboard-primary-color),.85)}.cadaVendedor .btnIngresar a:active{background-color:rgba(var(--seller-dashboard-primary-color),.8)}.cursor-pointer{cursor:pointer}.font-bold{font-weight:700}.border-bottom{border-bottom:1px solid #000!important}@media screen and (max-width:1200px){.btnGestionar{font-size:12px}}@media screen and (max-width:992px){.camposVendedores{justify-content:flex-end;margin-top:8px;margin-bottom:4px}}@media all and (max-width:768px){.ordenarVendedores{width:140px!important}.buscadorVendedores input{width:140px}.cadaVendedor .btnIngresar a{width:70px!important}}@media all and (max-width:576px){.tablaVendedores .nav-tabs .nav-link{font-size:13px;padding:6px!important}.btnGestionar{padding:6px 8px!important;font-size:13px;height:36px;display:flex;align-items:center;justify-content:center;margin-top:3px;margin-left:10px}.buscadorVendedores input,.ordenarVendedores{font-size:13px}}.fs-6{font-size:1rem!important}"]
    }),
    __param(3, Inject('env'))
], SellerDashboardContainerEcComponent);
export { SellerDashboardContainerEcComponent };
//# sourceMappingURL=data:application/json;base64, 