import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeroComponent } from "./hero/hero.component";
import { HeaderComponent } from "./header/header.component";
import { ServicesComponent } from "./services/services.component";
import { FooterComponent } from "./footer/footer.component";
import { PortfolioComponent } from "./portfolio/portfolio.component";
import { AboutComponent } from "./about/about.component";
import { ToggleComponent } from "./toggle/toggle.component";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, HeroComponent, HeaderComponent, ServicesComponent, FooterComponent, PortfolioComponent, AboutComponent, ToggleComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'ontvlambaar';
  theme = "light"

  private detectColorScheme(): void {
    //local storage is used to override OS theme settings
    if(localStorage.getItem("theme")){
        if(localStorage.getItem("theme") == "dark"){
            this.theme = "dark";
        }
    } else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
        //OS theme setting detected as dark
        this.theme = "dark";
    }

    document.documentElement.setAttribute("data-theme", this.theme);
  }

  ngOnInit(): void {
    this.detectColorScheme();
  }

  themeChange(theme: string) {
    localStorage.setItem("theme", theme);
    this.theme = theme;
    document.documentElement.setAttribute("data-theme", this.theme);
  }
}
