import { Component, inject, signal } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { firstValueFrom } from 'rxjs';

import { MaterialiApiService } from '../materiali-api.service';

@Component({
  selector: 'app-proponi-materiale',
  imports: [ReactiveFormsModule, RouterLink, MatButtonModule, MatFormFieldModule, MatInputModule],
  templateUrl: './proponi-materiale.html',
  styleUrl: './proponi-materiale.css'
})
export class ProponiMateriale {
  private readonly route = inject(ActivatedRoute);
  private readonly materialiApi = inject(MaterialiApiService);

  readonly nome = new FormControl(this.route.snapshot.queryParamMap.get('nome') ?? '', {
    nonNullable: true,
    validators: [Validators.required, Validators.minLength(2), Validators.maxLength(100)]
  });
  readonly categoria = new FormControl('', {
    nonNullable: true,
    validators: [Validators.required, Validators.maxLength(100)]
  });
  readonly unitaMisura = new FormControl('', {
    nonNullable: true,
    validators: [Validators.required, Validators.maxLength(20)]
  });

  readonly submitting = signal(false);
  readonly errorMessage = signal<string | null>(null);
  readonly successo = signal(false);

  async submit(): Promise<void> {
    if (this.submitting()) {
      return;
    }

    if (this.nome.invalid || this.categoria.invalid || this.unitaMisura.invalid) {
      this.nome.markAsTouched();
      this.categoria.markAsTouched();
      this.unitaMisura.markAsTouched();
      return;
    }

    this.errorMessage.set(null);
    this.successo.set(false);
    this.submitting.set(true);

    try {
      await firstValueFrom(
        this.materialiApi.proponiMateriale({
          nome: this.nome.value.trim(),
          categoria: this.categoria.value.trim(),
          unitaMisura: this.unitaMisura.value.trim()
        })
      );
      this.submitting.set(false);
      this.successo.set(true);
      this.nome.reset('');
      this.categoria.reset('');
      this.unitaMisura.reset('');
    } catch {
      this.submitting.set(false);
      this.errorMessage.set('Impossibile inviare la proposta. Riprova più tardi.');
    }
  }
}