import { environment } from '../../environments/environment';
import { UrlTree } from '@angular/router';

export function getMultiDpiImageUrl(familyCode: string, index: string, height: number, width: number, webpSupport: boolean, dpi: string, type: string): string {
  let result: string = '';

  result += getImageUrl(familyCode, index, height, width, webpSupport, dpi, type) + ' 1x, ';
  result += getImageUrl(familyCode, index, height, width, webpSupport, dpi, type) + ' 1.1x, ';
  result += getImageUrl(familyCode, index, height, width, webpSupport, dpi, type) + ' 1.5x, ';
  result += getImageUrl(familyCode, index, height, width, webpSupport, dpi, type) + ' 2x ';

  return result;
}

export function getImageUrl(familyCode: string, index: string, height: number, width: number, dpi: string, type: string): string {

  let webpSupport = this.browserSupport.getWebpSupport();

  let url = '?index=' + index;

  if (height) {
      url += '&height=' + height;
  }

  if (width) {
      url += '&width=' + width;
  }

  if (!dpi) {
    dpi = '100';
    if (window.devicePixelRatio > 1.50) {
      dpi = '200';
    } else if (window.devicePixelRatio > 1.25) {
      dpi = '150';
    } else if (window.devicePixelRatio > 1) {
      dpi = '125';
    }
  }

  url += '&dpi=' + dpi;

  if (type) {
      url += '&type=' + type;
  }

  url += '&format='.concat(webpSupport ? 'webp' : 'jpg');

  return environment.mediaImageUrl + familyCode + url;
}

export function getImageUrlStatic(imagePath:string, width: number, height: number,  dpi: string): string {

  let webpSupport = this.browserSupport.getWebpSupport();

  let url = '';

  if(imagePath.indexOf('?') > 0)
  {
    url = imagePath;
  }
  else
  {
    url = imagePath + '?';
  }

  if (height) {
    url += '&height=' + height;
  }

  if (width) {
    url += '&width=' + width;
  }

  if (!dpi) {
    dpi = '100';
    if (window.devicePixelRatio > 1.50) {
      dpi = '200';
    } else if (window.devicePixelRatio > 1.25) {
      dpi = '150';
    } else if (window.devicePixelRatio > 1) {
      dpi = '125';
    }
  }

  url += '&dpi=' + dpi;
  url += '&format='.concat(webpSupport ? 'webp' : 'jpg');

  return url;
}

export function getTextWidth(text, font): number {
  // if given, use cached canvas for better performance
  // else, create new canvas
  // @ts-ignore
  const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
  const context = canvas.getContext('2d');
  context.font = font;
  const metrics = context.measureText(text);
  return metrics.width;
}