import 'package:angular/angular.dart';

import 'dart:html' as html;
import 'package:rules_of_living/src/Engine.dart';

@Component(
    selector: 'my-app',
    templateUrl: "app_component.html",
    directives: [coreDirectives])
class AppComponent implements OnInit {
  var name = "World";

  Engine engine;

  @ViewChild("caCanvas")
  html.CanvasElement canvas;

  @override
  void ngOnInit() {
    canvas.context2D.setFillColorRgb(200, 0, 0);
    canvas.context2D.fillRect(0, 0, canvas.width, canvas.height);
    canvas.context2D.setFillColorRgb(0, 255, 0);
    canvas.context2D.fillText('''
    If you see this 
    the app is broken :(
    ''', canvas.width/2, canvas.height/2);
    engine = new Engine(canvas);

    html.window.animationFrame.then(animFrame);
  }

  void animFrame(num now) {
    engine.process(now);
    html.window.animationFrame.then(animFrame);
  }

  void onStartClicked() {
    engine.running = !engine.running;
  }

  void onStepClicked() {
    engine.step();
  }

  void onResetClicked() {
    engine.reset();
  }

  void onRandomClicked() {
    engine.running = false;
    engine.addPattern();
  }

  void onEdgesClicked() {
    engine.toggleEdgeRendering();
  }

  void onClearClicked() {
    engine.clear();
  }
}