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

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

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

export class MediaComponent implements OnChanges {

    // Variables ----
    @Input('path') path: any
    @Input('sku') sku: string
    @Input('type') type: string
    imageManager: boolean
    size: string
    server: string = this._helper.server
    images: [string]

    constructor(
        private _helper: HelperService
    ) {
        this.imageManager = false;
    }

    // Lifecycle hooks ----
    ngOnInit() {
        this.serveImages()
    }

    ngOnChanges(): void {
        if(this.type == 'configurable') {
            this.size = 'xlarge'
        } else {
            this.size = 'large'
        }

        this.serveImages()
    }



    // Functions ----
    getImage(): string {
        return this.server + '/images/i/'+this.sku+'/'+this.size;
    }



    /**
     * Serve the correct size images for the device
     * 
     * @todo Serve smaller image on phone
     */
    serveImages() {
        
        // if(!!this.path) {
        //     if(this._helper.isRetina()) {
        //         this.images = this.path.square.retina
        //     }
        //     else {
        //         this.images = this.path.square.large
        //     }
        // }
    }
}