import { Component, Input, OnChanges } from "@angular/core";
import { ActivatedRoute, Params }   from '@angular/router';
import { Router }        from '@angular/router';

import { MaterialService } from '../../../services/svc.material';

@Component({
    moduleId: module.id+ '',
    selector: 'material',
    templateUrl: './tpl.material.pug',
    styleUrls: ['./sty.material.scss'],
    providers: [MaterialService]
})

export class MaterialComponent implements OnChanges {
   
    @Input() mat: string;

    materials = [];
    description: string;
    readmore: any = [];

    constructor(
        private _router: Router,
        private route: ActivatedRoute,
        private _materialService: MaterialService
    ) {}

    ngOnChanges(): void {

        this.materials = [];

        for(let material of this.mat) {

            this._materialService.httpGetMaterial(material).then((response) => {

                if(!!response){

                    for(let material of response) {
                        this.materials.push(material)
                        this.readmore.push(0)
                    }


                }
            })  
        }
    }

    readMore(element:any) {
        this.readmore[element] = 1;
    }

    sanitize(string:string): string {
        return string.replace('-', ' ');
    }
}