import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { ChangeToppingDto, CreateToppingGQL } from 'src/generated/graphql';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-topping-create',
  templateUrl: './topping-create.component.html',
  styleUrls: ['./topping-create.component.scss']
})
export class ToppingCreateComponent implements OnInit {

  toppingName = new FormControl('');
  toppingCreateForm = new FormGroup({
    toppingName: this.toppingName,
  });


  create(): void {
    if (!this.toppingCreateForm.valid) {
      return;
    }
    const createToppingDto: ChangeToppingDto = {
      name: this.toppingName.value,
    };
    this.createToping
      .mutate({ createToppingDto })
      .subscribe((res) => {
        this.snackBar.open(
          `created Topping ${res.data.createTopping.name}`,
          'ok',
          {
            duration: 1000
          }
        );
      });
    this.toppingName.setValue(null);
  }

  ngOnInit(): void {
  }

  constructor(
    protected createToping: CreateToppingGQL,
    private snackBar: MatSnackBar
  ) {
  }

}
