import { Component, inject, signal } from '@angular/core';
import { FormBuilder, FormsModule, Validators } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { InputText } from 'primeng/inputtext';
import { Button } from 'primeng/button';
import { ApolloService } from '../services/apollo.service';
import { LOGIN } from '../../graphql/base-definitions';
import { LoginMutation } from '../generated';
import { lastValueFrom } from 'rxjs';
import { AuthenticationResult } from '../schema-types';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-login',
  imports: [
    FormsModule,
    ReactiveFormsModule,
    InputText,
    Button,
  ],
  templateUrl: './login.html',
  styles: [`
@tailwind base;
@tailwind components;
@tailwind utilities;
input[pInputText] {
  padding: 0.5rem !important;
  border-width: 2px !important;
}
`],
})
export class Login {
  readonly apollo = inject(ApolloService);
  readonly fb = inject(FormBuilder);
  readonly router = inject(Router);

  readonly loginForm = this.fb.group({
    username: ['', Validators.required],
    password: ['', Validators.required],
  }); 

  redirectTo = '/';

  readonly loading = signal(false);

  constructor(private readonly route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
      if(params['redirectTo']) {
        this.redirectTo = atob(params['redirectTo']);
        console.log('redirectTo', this.redirectTo);
      } else {
        this.redirectTo = '/';
      }
    });
  }

  async onSubmit() {
    this.loading.set(true);
    try {
      const result = await lastValueFrom(this.apollo.apollo().mutate<LoginMutation>({
        mutation: LOGIN,
        variables: {
          username: this.loginForm.value.username,
          password: this.loginForm.value.password,
        },
      }));
      
      const authResult = result.data?.login as AuthenticationResult;
      if(authResult.__typename === 'CurrentUser')
        this.router.navigate([this.redirectTo]);
    } catch (error) {
      console.error(error);
    } finally {
      this.loading.set(false);
    }
  }
}