import {Component, ViewEncapsulation} from '@angular/core';
import {MatSidenavModule} from "@angular/material/sidenav";
import {Router, RouterLink, RouterOutlet} from "@angular/router";
import {MatCard} from "@angular/material/card";
import {MatButton} from "@angular/material/button";
import {NavigationService} from "@service/navigation.service";
import {catchError, Observable} from "rxjs";
import {DataSpinnerComponent} from "@component/common/data-spinner/data-spinner.component";
import SetupService from "@api/v1/setup.service";

@Component({
  selector: 'app-setup',
  standalone: true,
  imports: [
    MatSidenavModule,
    RouterOutlet,
    MatCard,
    MatButton,
    RouterLink,
    DataSpinnerComponent
  ],
  templateUrl: './setup.component.html',
  styleUrl: './setup.component.css',
  encapsulation: ViewEncapsulation.None,
  providers: [SetupService]
})

export class SetupComponent {
  protected previousButtonDisabled: boolean = false;
  protected previousButtonRoute: string = '';

  protected nextButtonDisabled: boolean = false;
  protected nextButtonRoute!: string;

  protected loaderActive: boolean = false;

  protected routes: Array<string> = ['', 'welcome', 'database', 'cache', 'create-admin', 'schedule', 'logging', 'summary'];
  private index: number = 1;

  protected get getIndex() {
    return this.index;
  }

  constructor(private router: Router, private navigationService: NavigationService, api: SetupService) {
    api.isConfigured().subscribe(x => {
      if (x)
        this.router.navigate(['/']).then();
    });

    if (!this.router.url.includes(this.routes[this.index]))
      this.router.navigate(['setup/', this.routes[this.index]]).then();

    this.setRoutes();
    this.navigationService.nextButtonState$.subscribe(state => {
      this.nextButtonDisabled = !state;
    });

    this.navigationService.skipNavigation.subscribe(action => {
      this.executeAction(action);
    });
  }

  private setRoutes() {
    this.previousButtonRoute = this.routes[this.index - 1];
    this.nextButtonRoute = this.routes[this.index + 1];
  }

  private executeAction(action: () => Observable<boolean>) {
    this.loaderActive = true;
    action().pipe(
      catchError(error => {
        this.nextButtonDisabled = true;
        this.loaderActive = false;
        throw error;
      })
    )
      .subscribe(x => {
        this.nextButtonDisabled = x;
        this.loaderActive = !x;
        if (x) {
          if (this.index < this.routes.length - 1) {
            this.router.navigate(['setup/', this.nextButtonRoute]).then();
            this.index++;
            this.setRoutes();
          } else
            this.router.navigate(['/']).then();
        }
      });
  }

  protected onNextClick() {
    this.executeAction(this.navigationService.nextButtonAction);
  }

  protected onPreviousClick() {
    if (this.index - 1 > 0) {
      this.index--;
      this.setRoutes();
    }
  }
}