import { Component, Input, OnInit } from '@angular/core'
import { ActivatedRoute, Params }   from '@angular/router'

import { CategoryService }          from '../../../../services/svc.category'
import { HelperService }            from '../../../../services/svc.helper'

import { CategoryType }             from '../../../../types/category'


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

export class OtherItemsComponent implements OnInit {

    items: any = [];
    products: any = [];
    types: any;

    filterableProducts: any = []

    @Input('id') id: number;
    @Input('categories') categories: any;
    @Input('data') data: any;

    imageList: Array<any> = ["https:\/\/www.gloster.com\/pub\/media\/klean\/manstack\/sliderimages\/storeview_gle\/grid\/GRID1.jpg","https:\/\/www.gloster.com\/pub\/media\/klean\/manstack\/sliderimages\/storeview_gle\/grid\/GRID2.jpg","https:\/\/www.gloster.com\/pub\/media\/klean\/manstack\/sliderimages\/storeview_gle\/grid\/GRID3.jpg","https:\/\/www.gloster.com\/pub\/media\/klean\/manstack\/sliderimages\/storeview_gle\/grid\/GRID4.jpg","https:\/\/www.gloster.com\/pub\/media\/klean\/manstack\/sliderimages\/storeview_gle\/grid\/GRID5.jpg","https:\/\/www.gloster.com\/pub\/media\/klean\/manstack\/sliderimages\/storeview_gle\/grid\/GRID6.jpg","https:\/\/www.gloster.com\/pub\/media\/klean\/manstack\/sliderimages\/storeview_gle\/grid\/GRID7.jpg"];

    //,"https:\/\/www.gloster.com\/pub\/media\/klean\/manstack\/sliderimages\/storeview_gle\/grid\/GRID8.jpg"
    constructor(
        private _categoryService: CategoryService,
        private route: ActivatedRoute,
        private helper: HelperService
    ) {}

    ngOnInit(): void {

        this.types = this.helper.types;

        // Iterate over categories, find all products and add unique SKU to items array
        for(let category of this.categories) {
            this._categoryService.getCollection( category.id ).then((response) => {
                    for (let product of response.products) {
                        if(this.products.indexOf(product.sku) < 0) {
                            this.items.push(product);
                            this.products.push(product.sku);

                        }
                    }
                }
            ).then(() => {
                for(let product of this.items) {
                    for(let attribute of product.attributes) {
                        if(attribute.code == 'type') {
                            product.attribute_type = attribute.value
                            this.filterableProducts.push(product)
                        }
                    }
                }

                this.filterableProducts.sort((a, b) => {

                    let result = 0

                    if(a.name < b.name) result = result - 1;
                    if(a.name > b.name) result = result + 1;

                    if( this.types.indexOf(a.attribute_type) < this.types.indexOf(b.attribute_type)) result = result - 100;
                    if (this.types.indexOf(a.attribute_type) > this.types.indexOf(b.attribute_type)) result = result + 100;

                    return result
                })
            })
        }
    }
}