import { MediaMatcher } from '@angular/cdk/layout';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DeviceService {

  private TABLET_WIDTH = 1000;
  private DESKTOP_WIDTH = 1400;
  
  public orientation?: "landscape" | "portraid";
  public flipPhone: boolean = false;
  public width?: number;

  constructor(
    private mediaMacher: MediaMatcher
  ) { 
    this.checkScreen();
    window.addEventListener("resize", () => {
      this.checkScreen();
    });
  }
  checkScreen() {
    const isPortrait = window.outerWidth < window.outerHeight;
    if (
      isPortrait &&
      window.outerWidth <this.TABLET_WIDTH
    ) { 
      this.flipPhone = true;
    } else {
      this.flipPhone = false;
    }
    this.orientation = isPortrait ? "portraid" : "landscape";
    this.width = window.outerWidth;
  }
  isMobile(): boolean {
    return window.outerWidth < this.TABLET_WIDTH;
  }
  isTablet(): boolean {
    return window.outerWidth > this.TABLET_WIDTH && window.outerWidth < this.DESKTOP_WIDTH;
  }
  isDesktop(): boolean {
    return window.outerWidth > this.DESKTOP_WIDTH;
  }
  toString() {
    return `Orientation: ${this.orientation}, Width: ${this.width}, Flip: ${this.flipPhone}, IsMobile: ${this.isMobile()}
      IsTablet: ${this.isTablet()}, IsDesktop: ${this.isDesktop()}`;
  }
}