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

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'product-colours-materials-tech-content-component',
    styleUrls: [
        './product-colours-materials-tech-content.component.scss',
    ],
    templateUrl:
        './product-colours-materials-tech-content.component.template.pug',
})
export class ProductColoursMaterialsTechContentComponent {
    @Input()
    public title: string = 'Colours, materials and print technology';
    @Input()
    public productDisplaySkus: string[];
    @Input()
    public coloursByDisplaySku: {[key: string]: Array<{[key: string]: string}>};
    @Input()
    public materialsByDisplaySku: {[key: string]: string};

    public get showContent() {
        return Boolean(
            this.productDisplaySkus && this.productDisplaySkus.length > 0
            &&
            (
                (
                    this.coloursByDisplaySku
                    && Object.keys(this.coloursByDisplaySku).length > 0
                )
                || (
                    this.materialsByDisplaySku
                    && Object.keys(this.materialsByDisplaySku).length > 0
                )
            ),
        );
    }

    public getMaterialsForBrand(brand: string) {
        return this.materialsByDisplaySku[brand];
    }

    public getColoursForBrand(brand: string) {
        return this.coloursByDisplaySku[brand];
    }

    public isBrandTitleVisible() {
        return this.productDisplaySkus.length > 1;
    }
}