import 'dart:html';
import 'package:browserloop/game/Game.dart';
import 'package:browserloop/game/LoopExample.dart';
import 'package:browserloop/src/03-FixedLoopVariableRender.dart';
import 'package:browserloop/src/02-AnimationFrameWhile.dart';

List<Example> examples = [
  Example("While Loop Example","#while_output"),
  Example("Fixed Update, Variable Render","#variable_output")
];
LoopExample active;

class Example {
  final String query;
  final String name;
  CanvasElement canvas = CanvasElement(width: 480, height: 480);
  LoopExample loop;

  Example(this.name, this.query);
}

void main() {
  examples.forEach((ex) {
    appendToDOM(ex);
  });
  resetPlaceHolders();
}

void appendToDOM(Example example) {
  querySelector(example.query).append(example.canvas);
  example.canvas.onClick.forEach(activate);
  print("${example.query} appended");
}

void readdToDOM(Example example) {
  querySelector(example.query).children.clear();
  print("${example.query} removed");
  appendToDOM(example);
}

void resetPlaceHolders([Example current]) {
  examples.forEach((Example ex) {
    if(current == null || ex != current) {
      if(ex.loop != null) {
        ex.loop.stop();
        ex.loop = null;
      }
      ex.canvas = new CanvasElement(width: ex.canvas.width,height: ex.canvas.height);
      readdToDOM(ex);

      CanvasRenderingContext2D ctx = ex.canvas.context2D;
      Point c = Point(ex.canvas.width/2, ex.canvas.height/2);
      ctx.setFillColorRgb(255, 150, 10);
      ctx.fillRect(0, 0, ex.canvas.width, ex.canvas.height);

      ctx.beginPath();
      ctx.moveTo(c.x-25, c.y-25);
      ctx.lineTo(c.x+25, c.y+25);
      ctx.lineTo(c.x-25, c.y+75);
      ctx.closePath();
      ctx.lineWidth = 10;
      ctx.setStrokeColorRgb(155, 155, 155);
      ctx.setFillColorRgb(255, 255, 255);
      ctx.stroke();
      ctx.fill();
      ctx.fillText(ex.name, c.x - ctx.measureText(ex.name).width/2, c.y - 50);

      print("reset ${ex.query}");
    }
  });
}

void activate(MouseEvent e) {
  if(e.target is! CanvasElement) return;
  CanvasElement c = (e.target as CanvasElement);

  examples.forEach((Example ex) {
    if (ex.canvas == c) {
      resetPlaceHolders(ex);
      switch (ex.query) {
        case "#while_output":
          ex.loop = new WhileLoop(new Game(c));
          break;
        case "#variable_output":
          ex.loop = new FixedLoopVariableRender(new Game(c));
          break;
      }

      querySelector(ex.query).append(new ButtonElement()
        ..text = "start"
        ..onClick.listen((e) {
          ex.loop.stop();
          ex.loop.start();
        }));
      querySelector(ex.query).append(new ButtonElement()
        ..text = "stop"
        ..onClick.listen((e) {
          ex.loop.stop();
        }));
//    querySelector('#reset').onClick.listen((e) => ex.loop.game.reset());
//    querySelector('#plus').onClick.listen((e) => _changeGrid(-5));
//    querySelector('#minus').onClick.listen((e) => _changeGrid(5));
    }
  });

}



//when a button is clicked delete all the other Loops containing games and replace them with a canvas (fn above)