import 'dart:html' as html;

import 'package:angular/angular.dart';
import 'package:rules_of_living/service/engine_service.dart';

@Component(
  selector: 'gol-simulation',
  templateUrl: "simulation_component.html",
  directives: [coreDirectives],
  providers: [],
//  styleUrls: const ['package:angular_components/app_layout/layout.scss.css'],
)
class SimulationComponent implements OnInit {
  final EngineService engineService;

  SimulationComponent(this.engineService);

  @override
  void ngOnInit() {
    html.CanvasElement canvas = html.CanvasElement()..id = "simulation";
    html.querySelector("#simulation")..append(canvas);
    canvas.width = 500;
    canvas.height = 500;

    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\n
    the app is broken :(
    ''', canvas.width / 2 - 50, canvas.height / 2);
    engineService.create(canvas);

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

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