import { Component, QueryList, ViewChildren } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { AuthenticationService, IsLogedIn } from '../../services/api/authentication.service';
import { LoginComponent } from '../login/login.component';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { ColorModeBttnComponent } from '../common/color-mode-bttn/color-mode-bttn.component';
import { MatIconModule } from '@angular/material/icon';
import { RefreshService } from '../../services/button/refresh.service';
import { CreationService } from '../../services/button/creation.service';
import { DeletionService } from '../../services/button/deletion.service';
import { ButtonVisibilityService } from '../../services/button/button-visibility.service';
import { UpdateService, UpdateEvent } from '../../services/button/update.service';
import { TransferService } from '../../services/button/transfer.service';
import { MatBadgeModule } from '@angular/material/badge';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { FormsModule } from '@angular/forms';
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
import { MatButtonModule } from '@angular/material/button';

@Component({
  standalone: true,
  imports: [RouterModule, CommonModule, ColorModeBttnComponent, MatIconModule, MatBadgeModule, MatSlideToggleModule, FormsModule, MatButtonModule, MatTooltipModule],
  selector: 'app-nav-menu',
  templateUrl: './nav-menu.component.html',
  styleUrls: ['./nav-menu.component.css']
})
export class NavMenuComponent {
  isLogedIn() {
    return IsLogedIn();
  }
  isExpanded = false;

  updateActCount: number;

  isChecked = true;

  constructor(private dialog: MatDialog, private authService: AuthenticationService, public refreshService: RefreshService, public creationService: CreationService, public updateService: UpdateService, public transferService: TransferService, public buttonVisibilityService: ButtonVisibilityService, public deletionService: DeletionService) {
    this.authService.isAuthenticated().then().catch()
    this.updateActCount = this.updateService.totalCount;
    this.updateService.addChangeListener(UpdateEvent.CountChange, () => {
      this.updateActCount = updateService.totalCount;
    })
  }

  get isDarkTheme(): boolean {
    return (typeof window !== 'undefined') ? (localStorage.getItem('theme') === 'dark') : true;
  }

  collapse() {
    this.isExpanded = false;
  }

  toggle() {
    this.isExpanded = !this.isExpanded;
  }

  async auth() {
    const isLoggedIn = await this.authService.isAuthenticated();
    if (isLoggedIn)
      this.authService.logout().subscribe();
    else {
      const dialogRef = this.dialog.open(LoginComponent, {
        width: "35vw",
        data: {
          afterLogin: () => {
            dialogRef.close();
          }
        }
      });
    }
  }

  @ViewChildren(MatTooltip) tooltips: QueryList<MatTooltip> | undefined;

  private __tooltip_timeout_set = false;

  showInfo() {
    this.tooltips?.forEach(t => {
      t.show();
    });

    if(!this.__tooltip_timeout_set){
      this.__tooltip_timeout_set = true;
      setTimeout(() => {
        this.__tooltip_timeout_set = false;
        this.tooltips?.forEach(t => {
          t.hide();
        });
      }, 3000);    
    }    
  }

  async saveAsync() {
    await this.updateService.executeAllAsync().then(() => this.refreshService.executeAll())
  }
}