import { Component } from '@angular/core';
import { 
  animate, 
  state, 
  style, 
  transition, 
  trigger 
} from '@angular/animations';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-triangle',
  standalone: true,
  imports: [ReactiveFormsModule],
  animations: [
    trigger('result', [
      state('disable', style({
        backgroundColor: 'white',
      })),
      state('enable', style({
        backgroundColor: 'blue',
      })),
      transition('disable => enable', [
        animate('4s')
      ]),
      transition('enable => disable', [
        animate('4s')
      ])
    ])    
  ],

  templateUrl: './triangle.component.html',
  styleUrl: './triangle.component.css'
})
export class TriangleComponent {

  constructor(private builder: FormBuilder) {}

  triangleForm = this.builder.group({
    base: '',
    height: '',
    area: ''
  })

  isVisible = false;  
 
  onCalcButtonClick() {
    this.isVisible = true;
    let area = this.calcTriangleArea(
      Number(this.triangleForm.value.base),
      Number(this.triangleForm.value.height)
    );
    this.triangleForm.patchValue({area: String(area)});
  }
  onDeleteButtonClick() {
    this.isVisible = false;
    this.triangleForm.reset();
  }
  calcTriangleArea(base: number, height: number) {
    return base * height / 2;
  }
}