import { Component, OnInit } from '@angular/core';

import { FormControl } from '@angular/forms';

import { FormBuilder } from '@angular/forms';
import { FormArray } from '@angular/forms';

import { Validators } from '@angular/forms';

import { Router } from '@angular/router';

import { Recipe } from '../DataModels/recipe';
import { Ingredient } from '../DataModels/ingredient'
import { Step } from '../DataModels/step';
import { BackendService } from '../REST_service/backend.service';

@Component({
  selector: 'app-add-recipe',
  templateUrl: './add-recipe.component.html',
  styleUrls: ['./add-recipe.component.css']
})

export class AddRecipeComponent {

  recipeForm = this.fb.group({
    recipeName: ['', Validators.required],
    desc: [''],
    ingredients: this.fb.array([
      this.fb.group({
        ingrName: [''],
        amount: ['', Validators.pattern('^[0-9]*(\.[0-9]*)?$')],
        unit: ['']
        })
    ]),
    steps: this.fb.array([
      this.fb.group({
        instruct: [''],
        timer: ['']
        })
    ]),
    servingSize: ['', Validators.pattern('^[0-9]*(\.[0-9]*)?$')],
    cookTime: ['', Validators.pattern('^[0-9]*$')],
    tags: [''],
    photos: ['']
  });

  constructor(private fb: FormBuilder,
              private restService: BackendService,
              private router: Router,
              ) { }

  ngOnInit() {
  }

  get ingredients() {
    return this.recipeForm.get('ingredients') as FormArray;
  }

  addIngredient() {
    this.ingredients.push(
    this.fb.group({
      ingrName: [''],
      amount: ['', Validators.pattern('^[0-9]*(\.[0-9]*)?$')],
      unit: ['']
      })
  );
  }

  rmIngredient(i) {
    this.ingredients.removeAt(i);
  }

  get steps() {
    return this.recipeForm.get('steps') as FormArray;
  }

  addStep() {
    this.steps.push(
    this.fb.group({
      instruct: [''],
      timer: ['', Validators.pattern('^[0-9]*$')]
      })
  );
  }

  rmStep(i) {
    this.steps.removeAt(i);
  }

  onSubmit() {
    var formData = this.recipeForm.value;

    var ingredients = []
    var i;
    for  (i = 0; i < formData.ingredients.length; i++) {
    var tmp_amount = parseFloat(formData.ingredients[i].amount)
      ingredients.push(new Ingredient(formData.ingredients[i].ingrName,
                                      (isNaN(tmp_amount) ? 0 : tmp_amount),
                                      formData.ingredients[i].unit,
                                      ""
                       ));
    }

    var steps = []
    for  (i = 0; i < formData.steps.length; i++) {
      var tmp_timer = parseInt(formData.steps[i].timer)
      steps.push(new Step(formData.steps[i].instruct,
                          (isNaN(tmp_timer) ? 0 : tmp_timer)
                       ));
    }

    var servingsTmp = parseFloat(formData.servingSize)
    var cookTimeTmp = parseInt(formData.cookTime)

    var recipe = new Recipe (0,                    //id
                             formData.recipeName,  //name
                             formData.desc,        //description
                             ingredients,          //ingredients
                             steps,                //steps
                             (isNaN(servingsTmp) ? 0 :servingsTmp), //servingSize
                             (isNaN(cookTimeTmp) ? 0 :cookTimeTmp),    //cookTime
                             0,                    //timesCooked
                             0,                    //rating
                             formData.tags.split(',').filter(word=> !(word==="")),        //tags
                             formData.photos.split(',').filter(word=> !(word===""))       //photos
                             );
    this.restService.createRecipe(recipe).subscribe(res => {
    this.router.navigate(['/']);
    }, err => console.log(err));
  }
}