import { Breakpoints } from './Breakpoints';

export class Lazysizes {

  private config: any = window['lazySizesConfig'] || {};

  public static configure() {
    return new Lazysizes;
  }

  constructor() {
    this.stopAutoInit();
    this.createCustomMedia();
    window['lazySizesConfig'] = this.config;
    this.init();
  }

  stopAutoInit() {
    this.config.init = false;
  }

  createCustomMedia() {
    let customMedia = {};
    let sizes = Object.keys(Breakpoints);
    for (let i = 0; i < sizes.length; i++) {
      if (!sizes[i + 1]) {
        break;
      }
      customMedia[`--${sizes[i]}`] = `(max-width: ${Breakpoints[sizes[i + 1]]}px)`;
    }
    this.config.customMedia = customMedia;
  }

  init() {
    require(['lazysizes'], (lazySizes) => {
      lazySizes.init();
    });
  }

}
