import {
    ChangeDetectionStrategy,
    Component,
    EventEmitter,
    Input,
    Output,
} from '@angular/core';

import {
    ProductsAndPricesContentInterface,
} from './../../models/index';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'product-products-and-prices-content-component',
    styleUrls: [
        './product-products-and-prices-content.component.scss',
    ],
    templateUrl:
        './product-products-and-prices-content.component.template.pug',
})
export class ProductProductsAndPricesContentComponent {
    @Input()
    public title: string = 'Products and Prices';

    @Input()
    public priceColumnLabel: string = 'Price';

    @Input()
    public printAreaColumnLabel: string = 'Print area';

    @Input()
    public printQualityColumnLabel: string = 'Print quality';

    @Input()
    public templateColumnLabel: string = 'Template';

    @Input()
    public downloadLinkLabel: string = 'Download';

    @Input()
    public currency = 'GBP';

    @Input()
    public productContent: ProductsAndPricesContentInterface[];

    @Input()
    public unitsOfMeasure: Map<string, boolean> = new Map(
        [
            ['CM', true],
            ['INCH', false],
        ],
    );

    @Output()
    public onChangeUnitsOfMeasure = new EventEmitter<string>();

    public get showContent() {
        return Boolean(this.productContent && this.productContent.length > 0);
    }

    public get getUnitsOfMeasureAsArray() {
        return Array.from(this.unitsOfMeasure);
    }

    public changeSelectedUnitsOfMeasure(units: string) {
        this.onChangeUnitsOfMeasure.emit(units);
    }
}