import { __decorate, __metadata, __read, __spread } from "tslib";
import { Component, EventEmitter, Input, Output, HostListener } from '@angular/core';
import { Product } from '../shared/product';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { ImageTransformationService } from '@vendasta/core/image-transformation';
import { TranslateService } from '@ngx-translate/core';
import { PriceDisplayMode } from './editions-pricing/editions-pricing.component';
var VaProductDetailsV2Component = /** @class */ (function () {
    function VaProductDetailsV2Component(imageTransformationService, breakpointObserver, translateService) {
        var _this = this;
        this.imageTransformationService = imageTransformationService;
        this.translateService = translateService;
        this.priceDisplayMode = PriceDisplayMode.Wholesale;
        this.headerActionClick = new EventEmitter();
        this.addonSelected = new EventEmitter();
        this.contactActionClick = new EventEmitter();
        this.srcsetHeaderImage = '';
        this.overflowTagsList = '';
        this.showMoreChip = false;
        this.moreChipPosition = '';
        this.hiddenChipNum = 0;
        this.defaultHeaderImage = 'https://firebasestorage.googleapis.com/v0/b/partner-central-demo.appspot.com/o/no-banner.png?alt=media&token=e5299062-ea20-498b-b37e-39f3cf8a78a8';
        breakpointObserver.observe([
            Breakpoints.HandsetPortrait
        ]).subscribe(function (result) {
            if (result.matches) {
                _this.mobileLayout = true;
            }
            else {
                _this.mobileLayout = false;
            }
        });
    }
    VaProductDetailsV2Component.prototype.ngOnInit = function () {
        var _this = this;
        this.isHeaderActionUsed = this.headerActionClick.observers.length > 0;
        this.isAddonSelectedUsed = this.addonSelected.observers.length > 0;
        this.isContactActionUsed = this.contactActionClick.observers.length > 0;
        if (!!this.appTags && this.appTags.length && !!this.appTags[0].appData) {
            this.appTagArr = [];
            this.appTags[0].appData.forEach(function (entry) {
                if (entry.kind.startsWith('tag') && entry.kind !== 'tag/country' && entry.kind !== 'tag/source' && entry.kind !== 'tag/vendor') {
                    entry.values.forEach(function (value) {
                        var capitalized = value.charAt(0).toUpperCase() + value.slice(1).replace(/_/g, ' ');
                        _this.appTagArr = _this.appTagArr.concat(capitalized);
                    });
                }
            });
            this.chipLabels = this.appTagArr;
        }
        else {
            this.chipLabels = this.getTags();
        }
        if (this.product.headerImageUrl) {
            var imageWidthSizes = [680, 900, 1200];
            this.srcsetHeaderImage = this.imageTransformationService.getSrcSetForImage(this.product.headerImageUrl, imageWidthSizes);
        }
    };
    //  Will be deprecated when the new tagging system is fully implemented
    VaProductDetailsV2Component.prototype.getTags = function () {
        var _a;
        var tags = [];
        if ((_a = this.product.trialConfiguration) === null || _a === void 0 ? void 0 : _a.trialEnabled) {
            tags.push('Free Trial');
        }
        tags.push.apply(tags, __spread(this.product.getLmiCategoryNames()));
        return tags;
    };
    VaProductDetailsV2Component.prototype.ngAfterViewInit = function () {
        var _this = this;
        setTimeout(function () {
            _this.detectWrap('chipItem');
        });
    };
    VaProductDetailsV2Component.prototype.onResize = function (event) {
        this.detectWrap('chipItem');
    };
    VaProductDetailsV2Component.prototype.detectWrap = function (className) {
        var wrappedItems = [];
        var items = Array.from(document.getElementsByClassName(className));
        var initialEl = items[0];
        var initialBounds = initialEl.getBoundingClientRect();
        var itemsLength = items.length;
        var breakIndex = itemsLength;
        items.forEach(function (itemEl, index) {
            var bounds = itemEl.getBoundingClientRect();
            if (initialBounds.top < bounds.top) {
                wrappedItems.push(itemEl.innerText);
                if (breakIndex === itemsLength) {
                    breakIndex = index;
                }
            }
        });
        this.showMoreChip = wrappedItems.length > 0;
        var breakItem = items[breakIndex - 1];
        this.hiddenChipNum = wrappedItems.length;
        this.moreChipPosition = (breakItem.offsetLeft + breakItem.offsetWidth + 4 + 'px');
        this.makeChipList(wrappedItems);
    };
    VaProductDetailsV2Component.prototype.makeChipList = function (chipLabels) {
        var list = '';
        chipLabels.forEach(function (line) {
            list += '• ' + line + '\n';
        });
        this.overflowTagsList = list;
    };
    VaProductDetailsV2Component.prototype.isProductEnabled = function () {
        if (this.parentProduct) {
            return !this.parentProduct.isArchived && this.product && !this.product.isArchived;
        }
        else {
            return this.product && !this.product.isArchived;
        }
    };
    /*
     * Resolves the string that should be used for the Enable button.
     */
    VaProductDetailsV2Component.prototype.getEnableButtonText = function () {
        if (this.isProductEnabled()) {
            return this.translateService.instant('FRONTEND.STORE.ENABLED_STATE.ENABLED');
        }
        else {
            if (this.parentProduct) {
                if (this.parentProduct.isArchived) {
                    return this.translateService.instant('FRONTEND.STORE.ENABLE_WITH_PREREQUISITE', {
                        prerequisite: this.parentProduct.name
                    });
                }
                else {
                    return this.translateService.instant('FRONTEND.STORE.ENABLE_ADD_ON');
                }
            }
            else {
                return this.translateService.instant('FRONTEND.STORE.ENABLED_STATE.ENABLE');
            }
        }
    };
    VaProductDetailsV2Component.ctorParameters = function () { return [
        { type: ImageTransformationService },
        { type: BreakpointObserver },
        { type: TranslateService }
    ]; };
    __decorate([
        Input(),
        __metadata("design:type", Product)
    ], VaProductDetailsV2Component.prototype, "product", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Product)
    ], VaProductDetailsV2Component.prototype, "parentProduct", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Object)
    ], VaProductDetailsV2Component.prototype, "billedProduct", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Array)
    ], VaProductDetailsV2Component.prototype, "appTags", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Array)
    ], VaProductDetailsV2Component.prototype, "editionsPricing", void 0);
    __decorate([
        Input(),
        __metadata("design:type", Number)
    ], VaProductDetailsV2Component.prototype, "priceDisplayMode", void 0);
    __decorate([
        Output(),
        __metadata("design:type", Object)
    ], VaProductDetailsV2Component.prototype, "headerActionClick", void 0);
    __decorate([
        Output(),
        __metadata("design:type", Object)
    ], VaProductDetailsV2Component.prototype, "addonSelected", void 0);
    __decorate([
        Output(),
        __metadata("design:type", Object)
    ], VaProductDetailsV2Component.prototype, "contactActionClick", void 0);
    __decorate([
        Input(),
        __metadata("design:type", String)
    ], VaProductDetailsV2Component.prototype, "businessCountryCode", void 0);
    __decorate([
        HostListener('window:resize', ['$event']),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], VaProductDetailsV2Component.prototype, "onResize", null);
    VaProductDetailsV2Component = __decorate([
        Component({
            selector: 'va-product-details-v2',
            template: "<div class=\"page\">\n\t<ng-container *ngIf='product.headerImageUrl else defaultBanner'>\n\t\t<div class=\"background-logo\">\n\t\t\t<img [src]=\"product.headerImageUrl\" [srcset]=\"srcsetHeaderImage\" class=\"bannerImage\">\n\t\t</div>\n\t</ng-container>\n\n\t<ng-template #defaultBanner>\n\t\t<div class=\"background-logo\">\n\t\t\t<img [src]=\"defaultHeaderImage\" class=\"defaultBannerImage\">\n\t\t</div>\n\t</ng-template>\n\t<div>\n\t\t<div *ngIf=\"mobileLayout else webLayout\" class=\"mobile-container\">\n\t\t\t<div class=\"flex-row\">\n\t\t\t\t<div class=\"icon\">\n\t\t\t\t\t<va-icon [iconUrl]=\"product.iconUrl\" [name]=\"product.name\" [diameter]=\"60\"></va-icon>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"centered-column\">\n\t\t\t\t\t<div class=\"title\">{{ product.name }}</div>\n\t\t\t\t\t<div class=\"tag-line\">{{ product.tagline }}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"mobile-chip-container\">\n\t\t\t\t<mat-chip-list>\n\t\t\t\t\t<div class=\"flex-row\">\n\t\t\t\t\t\t<div class=\"chip-list\">\n\t\t\t\t\t\t\t<mat-chip *ngFor=\"let chip of chipLabels\" class=\"chipItem\">{{ chip }}</mat-chip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"more-chip-spacer\">\n\t\t\t\t\t\t\t<mat-chip\n\t\t\t\t\t\t\t\t*ngIf='showMoreChip'\n\t\t\t\t\t\t\t\t[matTooltip]=\"overflowTagsList\"\n\t\t\t\t\t\t\t\t(mouseenter)=\"$event.stopImmediatePropagation()\"\n\t\t\t\t\t\t\t\t(mouseleave)=\"$event.stopImmediatePropagation()\"\n\t\t\t\t\t\t\t\t#tooltip=\"matTooltip\"\n\t\t\t\t\t\t\t\t(click)=\"tooltip.toggle()\"\n\t\t\t\t\t\t\t\tclass=\"more-chip\"\n\t\t\t\t\t\t\t\t[ngStyle]=\"{'left': moreChipPosition}\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span [matBadge]='hiddenChipNum' [matBadgeOverlap]=\"false\">{{ 'FRONTEND.STORE.MORE' | translate }}</span>\n\t\t\t\t\t\t\t</mat-chip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</mat-chip-list>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"isHeaderActionUsed || isContactActionUsed\" class=\"product-actions-container\">\n\t\t\t\t<button *ngIf=\"isHeaderActionUsed\"  mat-raised-button color=\"primary\" [disabled]=\"isProductEnabled()\" (click)=\"headerActionClick.emit()\">\n\t\t\t\t\t<span>{{ getEnableButtonText() }}</span>\n\t\t\t\t</button>\n\t\t\t\t<a *ngIf=\"isContactActionUsed\" (click)=\"contactActionClick.emit()\">{{ 'FRONTEND.STORE.CONTACT_US' | translate }}</a>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<ng-template #webLayout>\n\t\t\t<div class=\"web-container\">\n\t\t\t\t<div class=\"icon-container\">\n\t\t\t\t\t<div class=\"icon\">\n\t\t\t\t\t\t\t<va-icon [iconUrl]=\"product.iconUrl\" [name]=\"product.name\" [diameter]=\"120\" id='thing'></va-icon>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"web-center-container\">\n\t\t\t\t\t<div class=\"web-name-chips-container\">\n\t\t\t\t\t\t<div class=\"title small-gutter\">{{ product.name }}</div>\n\t\t\t\t\t\t<div class=\"web-chip-container\">\n\t\t\t\t\t\t\t<mat-chip-list>\n\t\t\t\t\t\t\t\t<div class=\"flex-row\">\n\t\t\t\t\t\t\t\t\t<div class=\"chip-list\">\n\t\t\t\t\t\t\t\t\t\t<mat-chip *ngFor=\"let chip of chipLabels\" class=\"chipItem\">{{ chip }}</mat-chip>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class=\"more-chip-spacer\">\n\t\t\t\t\t\t\t\t\t\t<mat-chip\n\t\t\t\t\t\t\t\t\t\t\t*ngIf='showMoreChip'\n\t\t\t\t\t\t\t\t\t\t\t[matTooltip]=\"overflowTagsList\"\n\t\t\t\t\t\t\t\t\t\t\t(mouseenter)=\"$event.stopImmediatePropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t(mouseleave)=\"$event.stopImmediatePropagation()\"\n\t\t\t\t\t\t\t\t\t\t\t#tooltip=\"matTooltip\"\n\t\t\t\t\t\t\t\t\t\t\t(click)=\"tooltip.toggle()\"\n\t\t\t\t\t\t\t\t\t\t\tclass=\"more-chip\"\n\t\t\t\t\t\t\t\t\t\t\t[ngStyle]=\"{'left': moreChipPosition}\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<span [matBadge]='hiddenChipNum' [matBadgeOverlap]=\"false\">{{ 'FRONTEND.STORE.MORE' | translate }}</span>\n\t\t\t\t\t\t\t\t\t\t</mat-chip>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</mat-chip-list>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"tag-line small-gutter\">\n\t\t\t\t\t\t{{ product.tagline }}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"isHeaderActionUsed || isContactActionUsed\" class=\"web-product-actions-container\">\n\t\t\t\t\t<button *ngIf=\"isHeaderActionUsed\" mat-raised-button color=\"primary\" [disabled]=\"isProductEnabled()\" (click)=\"headerActionClick.emit()\">\n\t\t\t\t\t\t<span>{{ getEnableButtonText() }}</span>\n\t\t\t\t\t</button>\n\t\t\t\t\t<a *ngIf=\"isContactActionUsed\" (click)=\"contactActionClick.emit()\">{{ 'FRONTEND.STORE.CONTACT_US' | translate }}</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-template>\n\t</div>\n\t<mat-tab-group>\n\t\t<mat-tab label=\"Product Information\">\n\t\t\t<va-product-info\n\t\t\t\t[product]='product'\n\t\t\t\t[productPricing]=\"billedProduct\"\n\t\t\t\t[editionsPricing]=\"editionsPricing\"\n\t\t\t\t[priceDisplayMode]=\"priceDisplayMode\"\n\t\t\t\t[businessCountryCode] = \"businessCountryCode\"\n\t\t\t\t(addonSelected)='addonSelected.emit($event)'\n\t\t\t></va-product-info>\n    </mat-tab>\n    <mat-tab label=\"Screenshots & Files\">\n      <va-screenshots-files [app] = \"product\"></va-screenshots-files>\n    </mat-tab>\n\t</mat-tab-group>\n</div>\n",
            styles: [".page{position:relative;margin:0 auto 20px;background:#fff;color:#212121;box-shadow:0 3px 10px rgba(33,33,33,.3);overflow:hidden;font-size:16px}:host ::ng-deep div.mat-chip-list-wrapper{display:flex;flex-wrap:nowrap;overflow-x:auto;min-width:180px}:host ::ng-deep div.mat-chip-list-wrapper .mat-chip{flex:0 0 auto;color:grey}:host ::ng-deep div.mat-tab-body-content{background-color:#e0e0e0;padding:12px}.background-logo{width:100%;height:200px;background-color:#e0e0e0;display:flex}@media screen and (max-width:768px){.background-logo{height:150px}}@media screen and (max-width:600px){:host ::ng-deep div.mat-tab-body-content{padding:0}.background-logo{height:100px}}.background-logo .defaultBannerImage{height:inherit;margin-left:auto;margin-right:auto}.background-logo .bannerImage{-o-object-fit:cover;object-fit:cover;width:100%;-o-object-position:top;object-position:top}.icon-container{position:relative;width:150px;height:0;margin:0 16px;min-width:150px}.icon{display:flex;align-items:center;justify-content:center;height:150px;width:150px;border:1px solid #d3d3d3;border-radius:4px;position:absolute;bottom:-59px;background-color:#fff}.icon img{width:75%;height:75%}@media screen and (max-width:600px){.icon{position:initial;width:75px;height:75px;min-height:75px;min-width:75px;margin:0;border:none}}.title{font-size:24px;white-space:nowrap}.tag-line{padding-top:8px!important;font-size:16px}.centered-column{display:flex;flex-direction:column;justify-content:center}.small-gutter{padding:0 8px}.flex-row{display:flex;flex-direction:row}.flex-row-center{display:flex;flex-direction:row;justify-content:center}.mobile-container{display:flex;flex-direction:column;padding:8px}.mobile-chip-container{width:100%;padding:16px 16px 0}.web-chip-container{padding:0 8px;min-width:0;max-width:300px}.chip-list{display:flex;flex-flow:row wrap;overflow:hidden;height:40px}.product-actions-container{display:flex;flex-direction:column;justify-content:center;padding:16px}.product-actions-container a{text-align:center;margin-top:16px}.web-product-actions-container{display:flex;flex-direction:column;margin-left:auto;padding-left:8px}.web-product-actions-container a{text-align:center;margin-top:16px}.web-center-container{min-width:300px}.web-container{padding:16px;display:flex}.web-name-chips-container{display:flex;align-content:center}:host ::ng-deep .mat-tooltip{font-size:14px;white-space:pre}.more-chip{overflow:visible;position:absolute}.more-chip-spacer{min-width:77px}"]
        }),
        __metadata("design:paramtypes", [ImageTransformationService,
            BreakpointObserver,
            TranslateService])
    ], VaProductDetailsV2Component);
    return VaProductDetailsV2Component;
}());
export { VaProductDetailsV2Component };
//# sourceMappingURL=data:application/json;base64, 