import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, } from '@angular/core';
import { FormArray } from '@angular/forms';
import { Permission } from '@ishop/admin-ui/core';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
export class ProductVariantsTableComponent {
    constructor(changeDetector) {
        this.changeDetector = changeDetector;
        this.formGroupMap = new Map();
        this.updatePermission = [Permission.UpdateCatalog, Permission.UpdateProduct];
    }
    ngOnInit() {
        this.subscription = this.formArray.valueChanges
            .pipe(map(value => value.length), debounceTime(1), distinctUntilChanged())
            .subscribe(() => {
            this.buildFormGroupMap();
        });
        this.buildFormGroupMap();
    }
    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
    getFeaturedAsset(variant) {
        var _a;
        return ((_a = this.pendingAssetChanges[variant.id]) === null || _a === void 0 ? void 0 : _a.featuredAsset) || variant.featuredAsset;
    }
    optionGroupName(optionGroupId) {
        const group = this.optionGroups.find(g => g.id === optionGroupId);
        return group && group.name;
    }
    buildFormGroupMap() {
        this.formGroupMap.clear();
        for (const controlGroup of this.formArray.controls) {
            this.formGroupMap.set(controlGroup.value.id, controlGroup);
        }
        this.changeDetector.markForCheck();
    }
}
ProductVariantsTableComponent.decorators = [
    { type: Component, args: [{
                selector: 'vdr-product-variants-table',
                template: "<vdr-data-table [items]=\"variants\">\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'catalog.sku' | translate }}</vdr-dt-column>\r\n    <ng-container *ngFor=\"let optionGroup of optionGroups | sort: 'id'\">\r\n        <vdr-dt-column>{{ optionGroup.name }}</vdr-dt-column>\r\n    </ng-container>\r\n    <vdr-dt-column>{{ 'catalog.price' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'catalog.stock-on-hand' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.enabled' | translate }}</vdr-dt-column>\r\n    <ng-template let-variant=\"item\" let-i=\"index\">\r\n        <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n            <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                <div class=\"card-img\">\r\n                    <div class=\"featured-asset\">\r\n                        <img\r\n                            *ngIf=\"getFeaturedAsset(variant) as featuredAsset; else placeholder\"\r\n                            [src]=\"featuredAsset | assetPreview: 'tiny'\"\r\n                        />\r\n                        <ng-template #placeholder>\r\n                            <div class=\"placeholder\">\r\n                                <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                            </div>\r\n                        </ng-template>\r\n                    </div>\r\n                </div>\r\n            </td>\r\n            <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        formControlName=\"name\"\r\n                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        [placeholder]=\"'common.name' | translate\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n            <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        formControlName=\"sku\"\r\n                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n            <ng-container *ngFor=\"let option of variant.options | sort: 'groupId'\">\r\n                <td\r\n                    class=\"left align-middle\"\r\n                    [class.disabled]=\"!formGroup.get('enabled')!.value\"\r\n                    [style.color]=\"optionGroupName(option.groupId) | stringToColor\"\r\n                >\r\n                    {{ option.name }}\r\n                </td>\r\n            </ng-container>\r\n            <td class=\"left align-middle price\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                <clr-input-container>\r\n                    <vdr-currency-input\r\n                        *ngIf=\"!channelPriceIncludesTax\"\r\n                        clrInput\r\n                        [currencyCode]=\"variant.currencyCode\"\r\n                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        formControlName=\"price\"\r\n                    ></vdr-currency-input>\r\n                    <vdr-currency-input\r\n                        *ngIf=\"channelPriceIncludesTax\"\r\n                        clrInput\r\n                        [currencyCode]=\"variant.currencyCode\"\r\n                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        formControlName=\"priceWithTax\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n            </td>\r\n            <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                        formControlName=\"stockOnHand\"\r\n                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n            <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                <clr-toggle-wrapper>\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrToggle\r\n                        name=\"enabled\"\r\n                        formControlName=\"enabled\"\r\n                        [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                    />\r\n                </clr-toggle-wrapper>\r\n            </td>\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [".placeholder{color:var(--color-grey-300)}.price input,.stock input{max-width:96px}td{transition:background-color .2s}td.disabled{background-color:var(--color-component-bg-200)}"]
            },] }
];
ProductVariantsTableComponent.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
ProductVariantsTableComponent.propDecorators = {
    formArray: [{ type: Input, args: ['productVariantsFormArray',] }],
    variants: [{ type: Input }],
    channelPriceIncludesTax: [{ type: Input }],
    optionGroups: [{ type: Input }],
    pendingAssetChanges: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64, 