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



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


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

  alerted = false;

  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;

    console.log( "Updating size:", this._lastWidth, this._lastHeight );
    this._sw = newWidth / 100;
    this._sh = newHeight / 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._fs = this._sw / 10;

    let isChrome = window.innerWidth != window.visualViewport.width;

    let fsValue = this._fs + "px";
    let ffOffset = "0px";

    console.log(  "is chrome:", isChrome, window.innerWidth, window.visualViewport.width );

    if ( ! isChrome )
    {
      fsValue = `calc( ${this._fs}px * var(--firefoxScale ) * 0.01 )`;
      ffOffset = "19px";
    }

    // if ( ! this.alerted )
    // {
    //   this.alerted = true;
    //   // alert( "is chrome:" + isChrome ); 
    // }

    


    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;
        --fs:${fsValue}; 
        --firefoxOffset:${ffOffset};
      }
    `

  }
}