import { Component, OnDestroy, OnInit } from "@angular/core";
import { invoke } from "@tauri-apps/api/tauri";
import { ShortcutService } from "./services/shortcut.service";
import { EventsService } from "./services/events.service";
import { Event } from "@tauri-apps/api/event";
import { WorldAreaService } from "./services/world-area.service";

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

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

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

  ngOnDestroy(): void {
    this.shortcuts.unregister(this.onToggleOverlay);
  }

  ngOnInit(): void {
    invoke("set_auto_hide", { auto_hide: this.auto_hide }).then();
    console.log("Loading world areas");
    this.shortcuts.register('F6', this.onToggleOverlay);
    this.events.listen<StateEvent>("OverlayStateChange").subscribe(this.onOverlayStateChange)
  }

  onOverlayStateChange(event: Event<StateEvent>) {
    this.interactable = event.payload.Interactable != null;
  }

  onToggleOverlay = () => {
    console.log(this);
    if (this.interactable) {
      this.interactable = false;
    } else {
      this.interactable = true;
    }

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

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

  onBindFinish(keys: string[]) {
    this.isBinding = false;
    let chord = keys.reduce((acc, curr) => {
      if (acc === '') return curr;

      return acc.concat('+').concat(curr);
    }, '');
    console.log(chord);

    this.shortcuts.rebind(chord, this.onToggleOverlay);

  }
}