import 'package:angular/angular.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_slider/material_slider.dart';
import 'package:angular_components/material_tooltip/material_tooltip.dart';
import 'package:rules_of_living/service/configuration_service.dart';

@Component(
    selector: "configuration",
    templateUrl: "configuration_component.html",
    styleUrls: ["configuration_component.css"],
    directives: [
      MaterialButtonComponent,
      MaterialIconComponent,
      MaterialSliderComponent,
      MaterialTooltipDirective
    ])
class ConfigurationComponent {
  final ConfigurationService config;

  int get simSpeed => config.simSpeed;
  int set simSpeed(int value) => config.simSpeed = value;

  String get speedSliderTooltip => "Simulation Speed: $simSpeed";

  ConfigurationComponent(this.config);

  void onEdgesClicked() {
    config.toggleGrid();
  }
}