import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { Subject } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@vendure/admin-ui/core";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@ngx-translate/core";
export class DraftOrderVariantSelectorComponent {
    constructor(dataService) {
        this.dataService = dataService;
        this.addItem = new EventEmitter();
        this.customFieldsFormGroup = new UntypedFormGroup({});
        this.selectedVariantId$ = new Subject();
        this.quantity = 1;
    }
    ngOnInit() {
        this.selectedVariant$ = this.selectedVariantId$.pipe(switchMap(id => {
            if (id) {
                return this.dataService.product
                    .getProductVariant(id)
                    .mapSingle(({ productVariant }) => productVariant);
            }
            else {
                return [undefined];
            }
        }));
        for (const customField of this.orderLineCustomFields) {
            this.customFieldsFormGroup.addControl(customField.name, new UntypedFormControl(''));
        }
    }
    addItemClick(selectedVariant) {
        if (selectedVariant) {
            this.addItem.emit({
                productVariantId: selectedVariant.id,
                quantity: this.quantity,
                customFields: this.orderLineCustomFields.length
                    ? this.customFieldsFormGroup.value
                    : undefined,
            });
            this.selectedVariantId$.next(undefined);
            this.customFieldsFormGroup.reset();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DraftOrderVariantSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DraftOrderVariantSelectorComponent, selector: "vdr-draft-order-variant-selector", inputs: { currencyCode: "currencyCode", orderLineCustomFields: "orderLineCustomFields" }, outputs: { addItem: "addItem" }, ngImport: i0, template: "<div class=\"card\">\n    <div class=\"card-block\">\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\n        <vdr-product-variant-selector\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\n        ></vdr-product-variant-selector>\n    </div>\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\n        <div class=\"variant-details\">\n            <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\n            <div class=\"details\">\n                <div>{{ selectedVariant?.name }}</div>\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\n            </div>\n            <div class=\"details ml-4\">\n                <div class=\"small\">\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\n                </div>\n                <div class=\"small\">\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\n                </div>\n            </div>\n            <div class=\"flex-spacer\"></div>\n            <div class=\"details\">\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\n                </div>\n            </div>\n            <div>\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\n            </div>\n            <button\n                [disabled]=\"!selectedVariant\"\n                class=\"btn btn-small btn-primary\"\n                (click)=\"addItemClick(selectedVariant)\"\n            >\n                {{ 'order.add-item-to-order' | translate }}\n            </button>\n        </div>\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\n            <div class=\"custom-field\" *ngFor=\"let field of orderLineCustomFields\">\n                <vdr-custom-field-control\n                    [compact]=\"true\"\n                    [readonly]=\"false\"\n                    [customField]=\"field\"\n                    [customFieldsFormGroup]=\"customFieldsFormGroup\"\n                ></vdr-custom-field-control>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: ["productSelected"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DraftOrderVariantSelectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-draft-order-variant-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\">\n    <div class=\"card-block\">\n        <h4 class=\"card-title\">{{ 'order.add-item-to-order' | translate }}</h4>\n        <vdr-product-variant-selector\n            (productSelected)=\"selectedVariantId$.next($event.productVariantId)\"\n        ></vdr-product-variant-selector>\n    </div>\n    <div class=\"card-block\" *ngIf=\"selectedVariant$ | async as selectedVariant\">\n        <div class=\"variant-details\">\n            <img class=\"mr-2\" [src]=\"selectedVariant.featuredAsset || selectedVariant.product.featuredAsset | assetPreview: 32\">\n            <div class=\"details\">\n                <div>{{ selectedVariant?.name }}</div>\n                <div class=\"small\">{{ selectedVariant?.sku }}</div>\n            </div>\n            <div class=\"details ml-4\">\n                <div class=\"small\">\n                    {{ 'catalog.stock-on-hand' | translate }}: {{ selectedVariant.stockOnHand }}\n                </div>\n                <div class=\"small\">\n                    {{ 'catalog.stock-allocated' | translate }}: {{ selectedVariant.stockAllocated }}\n                </div>\n            </div>\n            <div class=\"flex-spacer\"></div>\n            <div class=\"details\">\n                <div>{{ selectedVariant?.priceWithTax | localeCurrency: currencyCode }}</div>\n                <div class=\"small\" [title]=\"'order.net-price' | translate\">\n                    {{ selectedVariant?.price | localeCurrency: currencyCode }}\n                </div>\n            </div>\n            <div>\n                <input [disabled]=\"!selectedVariant\" type=\"number\" min=\"0\" [(ngModel)]=\"quantity\" />\n            </div>\n            <button\n                [disabled]=\"!selectedVariant\"\n                class=\"btn btn-small btn-primary\"\n                (click)=\"addItemClick(selectedVariant)\"\n            >\n                {{ 'order.add-item-to-order' | translate }}\n            </button>\n        </div>\n        <ng-container *ngIf=\"orderLineCustomFields.length\">\n            <div class=\"custom-field\" *ngFor=\"let field of orderLineCustomFields\">\n                <vdr-custom-field-control\n                    [compact]=\"true\"\n                    [readonly]=\"false\"\n                    [customField]=\"field\"\n                    [customFieldsFormGroup]=\"customFieldsFormGroup\"\n                ></vdr-custom-field-control>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [".variant-details{display:flex;align-items:center}.variant-details img{border-radius:var(--border-radius-img);width:32px;height:32px}.variant-details .details{font-size:.65rem;line-height:.7rem}.variant-details input{width:48px;margin:0 6px}.variant-details .small{font-size:11px;color:var(--color-text-300)}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.DataService }]; }, propDecorators: { currencyCode: [{
                type: Input
            }], orderLineCustomFields: [{
                type: Input
            }], addItem: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 