import { Component, HostListener, inject, Inject, OnInit, PLATFORM_ID } from '@angular/core';
// import { RouterOutlet, Router, ActivationEnd, RouterModule, ActivatedRoute } from '@angular/router';
import {
  MatDialog,
  MAT_DIALOG_DATA,
  MatDialogRef,
  MatDialogTitle,
  MatDialogContent,
  MatDialogActions,
  MatDialogClose,
} from '@angular/material/dialog';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { AuthService } from './services/auth.service';
import { ActivatedRoute, NavigationEnd, Router, RouterLink } from '@angular/router';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { filter, firstValueFrom } from 'rxjs';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-root',
  imports: [
    RouterOutlet, RouterLink,
    MatToolbarModule, MatIconModule, MatButtonModule, MatTooltipModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit {
  readonly platformId = inject(PLATFORM_ID);
  readonly route = inject(ActivatedRoute);
  readonly router = inject(Router);
  readonly dialog = inject(MatDialog);
  readonly authService = inject(AuthService);

  popupActivated: boolean = false;
  isAdminPage: boolean = false;
  loggedIn: boolean = false;
  menu: {label: string, url: string}[] = [
    {label: 'مقادیر پایه', url: '/values'},
    {label: 'فهرست آثار', url: '/artworks'},
  ];

  ngOnInit(): void {
    this.authService.appComponent = this;
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.isAdminPage = event.urlAfterRedirects.startsWith('/admin');
      if(isPlatformBrowser(this.platformId))
        document.dir = this.isAdminPage ? 'rtl' : 'ltr';
    })
  }

  @HostListener('window:scroll', ['$event'])
  onScroll(event: Event) {
    let pageTop = document.querySelector('page')?.getBoundingClientRect().top || 0;
    (document.querySelector('nav.primary-menu[desktop]') as HTMLElement)?.style.setProperty('--progress', Math.min(1, -pageTop/(170-50)).toFixed(5));
    (document.querySelector('nav.primary-menu[mobile]')  as HTMLElement)?.style.setProperty('--progress', Math.min(1, -pageTop/(174-64)).toFixed(5));
  }

  async openLoginDialog() {
    const dialogRef = this.dialog.open(LoginDialog, {minWidth: 350, data: {}, disableClose: true});

    let result = await firstValueFrom(dialogRef.afterClosed());
    if(!result) {
      this.router.navigateByUrl('/access-denied');
      this.loggedIn = false;
    }else
      this.loggedIn = true;
    return this.loggedIn;
  }

  logout() {
    this.authService.logout();
    this.router.navigateByUrl('/');
  }
}

@Component({
    selector: 'login-dialog',
    templateUrl: 'login-dialog.html',
    imports: [
        FormsModule,
        MatToolbarModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogTitle,
        MatDialogContent, MatDialogActions, MatDialogClose, MatCheckboxModule, MatProgressSpinnerModule
    ]
})
export class LoginDialog {
  username: string = '';
  password: string = '';
  remember: boolean = false;
  error: boolean = false;
  busy: boolean = false;

  constructor(
    private authService: AuthService,
    public dialogRef: MatDialogRef<LoginDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any,
  ) {}

  async login() {
    this.busy = true;
    let response = await this.authService.login(this.username, this.password, this.remember);
    this.busy = false;

    this.error = response === false;
    if(this.error) return;

    this.dialogRef.close(true);
  }
}