import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButton } from '@angular/material/button';
import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardActions } from '@angular/material/card';
import { MatFormField, MatLabel } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { ActivatedRoute, Router } from '@angular/router';

import { CostCentre } from '../../core/cost-centre';
import { MatSnackBar } from '@angular/material/snack-bar';
import { CostCentreService } from '../cost-centre.service';

@Component({
  selector: 'app-cost-centre-detail',
  templateUrl: './cost-centre-detail.component.html',
  styleUrls: ['./cost-centre-detail.component.css'],
  standalone: true,
  imports: [
    MatCard,
    MatCardHeader,
    MatCardTitle,
    MatCardContent,
    ReactiveFormsModule,
    MatFormField,
    MatLabel,
    MatInput,
    MatCardActions,
    MatButton,
  ],
})
export class CostCentreDetailComponent implements OnInit, AfterViewInit {
  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
  form: FormGroup<{
    name: FormControl<string | null>;
  }>;

  item: CostCentre = new CostCentre();

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private snackBar: MatSnackBar,
    private ser: CostCentreService,
  ) {
    this.form = new FormGroup({
      name: new FormControl<string | null>(null),
    });
  }

  ngOnInit() {
    this.route.data.subscribe((value) => {
      const data = value as { item: CostCentre };

      this.showItem(data.item);
    });
  }

  showItem(item: CostCentre) {
    this.item = item;
    this.form.setValue({
      name: this.item.name,
    });
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.nameElement.nativeElement.focus();
    }, 0);
  }

  save() {
    this.ser.saveOrUpdate(this.getItem()).subscribe({
      next: () => {
        this.snackBar.open('', 'Success');
        this.router.navigateByUrl('/cost-centres');
      },
      error: (error) => {
        this.snackBar.open(error, 'Danger');
      },
    });
  }

  getItem(): CostCentre {
    const formModel = this.form.value;
    this.item.name = formModel.name ?? '';
    return this.item;
  }
}