import { DOMOrientation, DOMOrientationType } from "../dom/DOMOrientation";
import { EventSlot } from "../events/EventSlot";
import { ElementType } from "./ElementType";



export class LandscapeScale
{
  private _styleElement:Element;
  private _lastWidth:number;
  private _lastHeight:number;
  private _lastOrientation:DOMOrientationType;
  private _ultraWideRatio:number = 2.2;
  private _sw:number;
  private _sh:number;
  private _swidth:number;
  private _sheight:number;
  private _sx:number;
  private _sy:number;
  private _spx:number;

  get sw()
  {
    return this._sw;
  }
  
  onScreenSizeChange = new EventSlot<LandscapeScale>();
  onOrientationChange = new EventSlot<LandscapeScale>();


  update()
  {
    let newWidth = window.innerWidth;
    let newHeight = window.innerHeight;
    let newOrientation = DOMOrientation.type;

    if ( newWidth === this._lastWidth && newHeight === this._lastHeight )
    {
      return;
    }


    this.onScreenSizeChange.dispatch( this );

    if ( this._lastOrientation != newOrientation )
    {
      this._lastOrientation = newOrientation;
      this.onOrientationChange.dispatch( this );
    }
    
    if ( this._styleElement == null )
    {
      this._styleElement = ElementType.style.create();
      document.body.appendChild( this._styleElement );
    }

    let ratio = newWidth / newHeight;
    this._lastWidth = newWidth;
    this._lastHeight = newHeight;

    this._sw = newWidth / 100;

    if ( ratio > this._ultraWideRatio )
    {
      this._sw *= ( this._ultraWideRatio / ratio );
      this._sh = this._sw / 16 * 9;

      this._sx = ( newWidth - ( this._sw * 100 ) ) / 2;
      this._sy = 0;

      this._spx =  ratio / this._ultraWideRatio;
      
    } 
    else
    {
      this._spx = 1;
      this._sx = 0;
      this._sy = 0;
      
    }

    

    this._swidth = this._sw  * 100;
    this._sheight = this._sh * 100;


    this._styleElement.innerHTML = 
    `
      :root
      {
        --sw:${this._sw}px;
        --sh:${this._sh}px;
        --sx:${this._sx}px;
        --sy:${this._sy}px;
        --swidth:${this._swidth}px;
        --sheight:${this._sheight}px;
        --spx:${this._spx}px;
        --spx-raw:${this._spx};
        --spx-inv:${1/this._spx}px;
      }
    `

  }
}