import { AfterViewInit, Component, OnInit } from "@angular/core";
import { app, tauri } from "@tauri-apps/api";
import { invoke } from "@tauri-apps/api/tauri";
import { ShortcutHandler, register } from "@tauri-apps/api/globalShortcut";
import { Event, listen } from '@tauri-apps/api/event';
import { Observable, Subscriber, from } from "rxjs";
import { ShortcutService } from "./services/shortcut.service";
import { EventsService } from "./services/events.service";

class StateEvent {
  Visible?: any;
  Interactable?: any;
  Hidden?: any;
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  auto_hide: boolean = true;
  interactable: boolean = false;

  constructor(private shortcuts: ShortcutService, private events: EventsService) { }

  ngOnInit(): void {

    invoke("set_auto_hide", { auto_hide: this.auto_hide }).then();

    this.shortcuts.register('F6').subscribe((s) => {

      if (this.interactable) {
        this.interactable = false;
      } else {
        this.interactable = true;
      }

      invoke("set_interactable", { interactable: this.interactable }).then();
    })

    this.events.listen<StateEvent>("OverlayStateChange").subscribe(event => {
      this.interactable = event.payload.Interactable != null;
    })


  }

  toggleAutoHide() {
    console.log("toggle auto hide!!");
    invoke("set_auto_hide", { autoHide: this.auto_hide }).then();
  }

}