import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment'

@Injectable({
  providedIn: 'root'
})

export class UtilityService {
    deviceMediaQuery: string = 'screen and (max-device-width: 599px)';
    desktopMediaQuery: string = 'screen and (min-device-width: 600px)';
    deviceQuery = window.matchMedia(this.deviceMediaQuery);
    desktopQuery = window.matchMedia(this.desktopMediaQuery);
    imageFormat;

    constructor(){
        if( window['Modernizr'].webp ){
            this.imageFormat = 'webp';
        }else{
            this.imageFormat = 'jpeg';
        }
    }

    getPath(detailView?:string){
        if(this.deviceQuery.matches){
            return this.getKeyPath(detailView) + this.imageFormat + '/';
        }else{
          if(this.desktopQuery.matches){
            return this.getKeyPath(detailView) + this.imageFormat + '/';
          }
        }
    }

    getKeyPath(detailView?:string){
        if(this.deviceQuery.matches){
            return detailView ? environment.deviceDetailViewKeyPath : environment.deviceKeyPath;
        }else{
            if(this.desktopQuery.matches){
                return detailView ? environment.desktopDetailViewKeyPath : environment.desktopKeyPath;
            }
        }
    }
    
    getImageFormat(){
        return this.imageFormat;
    }
}