import { Component, OnInit } from "@angular/core";
import {
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from "@angular/forms";
import { MatFormFieldModule } from "@angular/material/form-field";
import { TranslateModule } from "@ngx-translate/core";
import { MatInputModule } from "@angular/material/input";
import { MatButtonModule } from "@angular/material/button";

import { ServiceComm } from "../../services/service-comm.service";
import { GearService } from "../../services/gear.service";
import { AddAction } from "../../models/add-action.enum";

@Component({
  selector: "app-new-gear",
  templateUrl: "./new-gear.component.html",
  styleUrls: ["./new-gear.component.css"],
  imports: [
    TranslateModule,
    MatFormFieldModule,
    ReactiveFormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatButtonModule,
  ],
})
export class NewGearComponent implements OnInit {
  public addForm: FormGroup;

  constructor(
    private serviceComm: ServiceComm,
    private serviceApi: GearService
  ) {
    this.addForm = new FormGroup(
      {
        name: new FormControl("", Validators.required),
        manufacturer: new FormControl("", Validators.required),
        minSize: new FormControl("", [
          Validators.required,
          Validators.min(60),
          Validators.max(320),
        ]),
        maxSize: new FormControl("", [
          Validators.required,
          Validators.min(60),
          Validators.max(320),
        ]),
        aad: new FormControl("", Validators.required),
        mainCanopy: new FormControl("", [
          Validators.required,
          Validators.min(60),
          Validators.max(320),
        ]),
        reserveCanopy: new FormControl("", [
          Validators.required,
          Validators.min(60),
          Validators.max(320),
        ]),
      },
      { updateOn: "blur" }
    );
  }

  ngOnInit() {}

  onSubmit(formData) {
    this.serviceApi
      .addGear(
        formData.name,
        formData.manufacturer,
        +formData.minSize,
        +formData.maxSize,
        formData.aad,
        formData.mainCanopy,
        formData.reserveCanopy
      )
      .subscribe(() => {
        this.serviceComm.refreshData(AddAction.Gear);
      });
  }
}