var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
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;
};
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { filter } from 'rxjs/operators';
import { ComponentHelper } from '../../classes/component-helper';
import { Constants } from '../../core.consts';
import { StoresService } from '../../services/stores.service';
var StoresEcComponent = /** @class */ (function (_super) {
    __extends(StoresEcComponent, _super);
    function StoresEcComponent(storesService, consts, sanitizer) {
        var _this = _super.call(this) || this;
        _this.storesService = storesService;
        _this.consts = consts;
        _this.sanitizer = sanitizer;
        _this.filterStores = null;
        _this.storesAll = null;
        _this.exclusiveStores = null;
        _this.imageMap = true;
        _this.stores = [];
        _this.provinces = [];
        /**
         * @description Obtiene todas la provincias que figuren en el arreglo
         * @param stores Arreglo de tiendas
         * @returns {Array} Arreglo de provincias
         */
        _this.getProvices = function (stores) {
            var provincesOpt = [];
            stores.forEach(function (store) {
                if (provincesOpt.find(function (s) { return s.code == store.province.code; }) == undefined) {
                    provincesOpt.push(store.province);
                }
            });
            return provincesOpt;
        };
        /**
         * @description Retorna un arreglo de objetos formado por las claves
         *      "province"(contiene un objeto provincia) y
         *      "stores" (contiene un arreglo de tiendas pertenecientes a la provincia)
         * @param stores Opcional, arreglo de tiendas a la que se le quiere aplicar la division por provincia
         * @returns {Array<{"province", "stores"}>}
         */
        _this.getStoresByProvinces = function (stores) {
            if (stores === void 0) { stores = _this.stores; }
            var storesByProvinces = [];
            if (stores) {
                var provinces = _this.getProvices(stores);
                provinces.forEach(function (elem) {
                    var _a;
                    var aux = (_a = stores) === null || _a === void 0 ? void 0 : _a.filter(function (store) { return store.province.code == elem.code; });
                    storesByProvinces.push({ province: elem, stores: aux });
                });
            }
            return storesByProvinces;
        };
        /**
         * @description Retorna las tiendas con/sin retiro en el local
         * @param stores Opcional, arreglo de tiendas
         * @param cond Opcional, Si es "true" obtiene las tiendas con retiro local caso contrario "false"
         * @returns {Array<Store>} Arreglo de Store
         */
        _this.getPickupStores = function (stores, cond) {
            if (stores === void 0) { stores = _this.stores; }
            if (cond === void 0) { cond = true; }
            return stores && stores.filter(function (store) { return cond == store.pickupStore; });
        };
        /**
         * @description Metodo que devuelve las tiendas que NO son exclusivas.
         * @returns {Array<Store>} Arreglo de Store
         */
        _this.getNonExclusiveStores = function () { return _this.stores.filter(function (store) { return !store.exclusive; }); };
        _this.selectChange = function (select) {
            _this.filterStores = select != '' && _this.storesAll.filter(function (store) { return store.province.code == select; }) || _this.storesAll;
            return true;
        };
        _this.urlmap = _this.sanitizer.bypassSecurityTrustResourceUrl('https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d13137.519688957545!2d-58.3888163!3d-34.5945533!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses-419!2sar!4v1523889204148');
        _this.storesService.stores.pipe(filter(function (store) { return store && store.length > 0; })).subscribe(function (stores) {
            _this.storesAll = stores;
            _this.stores = stores;
            _this.exclusiveStores = stores.filter(function (store) { return store.exclusive; });
            _this.selectChange('');
        });
        _this.ecOnConstruct();
        return _this;
    }
    StoresEcComponent.prototype.ngOnInit = function () {
        this.ecOnInit();
    };
    StoresEcComponent.prototype.updateMap = function (url) {
        url = url.includes('embed') ? url : 'https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d13137.519688957545!2d-58.3888163!3d-34.5945533!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses-419!2sar!4v1523889204148';
        this.urlmap = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    };
    StoresEcComponent.ctorParameters = function () { return [
        { type: StoresService },
        { type: Constants },
        { type: DomSanitizer }
    ]; };
    StoresEcComponent = __decorate([
        Component({
            selector: 'app-store-ec',
            template: "<div class=\"row w-100 mx-auto my-4 px-3 bb-s bt-md-s py-1\">\n    <strong>{{ 'stores' | translate }}</strong>\n</div>\n\n<section class=\"formulario container-fluid\" *ngIf=\"stores ; else noStores\">\n    <div *ngIf=\"stores.length; else loading\">\n\n        <div class=\"row\" *ngIf=\"stores && stores.length > 0; else noStores\">\n            <div class=\"col-12 col-md-3 order-1 order-md-1\">\n                <div class=\"row\">\n                    <div class=\"form-group w-100\">\n                        <select (change)=\"selectChange($event.target.value)\"\n                            class=\"rounded-0 form-control form-control-sm\" id=\"exampleFormControlSelect1\">\n                            <option selected [value]=\"''\">Seleccione provincia</option>\n                            <option [value]=\"item.code\" *ngFor=\"let item of getProvices(stores)\"> {{item.name}}\n                            </option>\n                        </select>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col-12 col-md-3 order-3 order-md-2\">\n                <div class=\"container-fluid scrolleable\" *ngIf=\"filterStores && filterStores.length\">\n                    <div class=\"row mb-1\" *ngFor=\"let store of filterStores; let i = index\">\n                        <div class=\"col-12\">\n                            <h6 class=\"\"><strong>{{ store.name }}</strong></h6>\n                            <label>{{ store.address }}</label>\n                            <label>{{ store.phone }}</label>\n                            <div [innerHtml]=\"store.note\"></div>\n                            <div class=\"text-right\">\n                                <!-- <a [href]=\"store.urlMap\" target=\"_blank\" class=\"custom-a\">Ver mapa</a> -->\n                                <a  *ngIf=\"store.urlMap\" (click)=\"updateMap (store.urlMap)\" class=\"custom-a\">Ver mapa</a>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"col-12 col-md-6 order-2 order-md-3 my-4 mt-md-0\">\n                    <!-- <img *ngIf=\"imageMap\" src=\"../../../assets/images/recurso (21).png\" alt=\"\" class=\"w-100\"> -->\n                    <!-- <iframe *ngIf=\"!imageMap\" [src]=\"urlMap\" frameborder=\"0\" style=\"width: 100%; height: 500px;\"></iframe> -->\n                    <iframe id=\"map-iframe\" [src]=\"urlmap\" frameborder=\"0\"></iframe>\n            </div>\n        </div>\n    </div>\n</section>\n\n\n<ng-template #noStores>\n\n    <div class=\"d-flex flex-row justify-content-center my-5 align-items-center alto-total\">\n        <h5 class=\"text-center\">{{ 'no-stores' | translate }}</h5>\n    </div>\n\n</ng-template>\n\n<ng-template #loading>\n    <div class=\"container\">\n        <div class=\"row\">\n            <div class=\"col-12 align-items-center\">\n                <div class=\"d-flex flex-column justify-content-center align-items-center my-5\">\n                    <app-loading-full-ec></app-loading-full-ec>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>",
            styles: [".scrolleable{height:70vh;overflow:auto}@media screen and (max-width:768px){.scrolleable{height:auto}}.background-white{background-color:#fff}.alto-total{height:60vh}.custom-a{color:#000}#map-iframe{width:100%;border:0;height:100%}@media screen and (max-width:425px){#map-iframe{height:400px}}"]
        })
    ], StoresEcComponent);
    return StoresEcComponent;
}(ComponentHelper));
export { StoresEcComponent };
//# sourceMappingURL=data:application/json;base64, 