// Copyright (c) 2015, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

library timeline_page_element;

import 'dart:async';
import 'dart:html';
import 'dart:convert';
import 'package:observatory/models.dart' as M;
import 'package:observatory/src/elements/helpers/nav_bar.dart';
import 'package:observatory/src/elements/helpers/nav_menu.dart';
import 'package:observatory/src/elements/helpers/rendering_scheduler.dart';
import 'package:observatory/src/elements/helpers/tag.dart';
import 'package:observatory/src/elements/helpers/uris.dart';
import 'package:observatory/src/elements/nav/notify.dart';
import 'package:observatory/src/elements/nav/refresh.dart';
import 'package:observatory/src/elements/nav/top_menu.dart';
import 'package:observatory/src/elements/nav/vm_menu.dart';

class TimelinePageElement extends HtmlElement implements Renderable {
  static const tag =
      const Tag<TimelinePageElement>('timeline-page', dependencies: const [
    NavTopMenuElement.tag,
    NavVMMenuElement.tag,
    NavRefreshElement.tag,
    NavNotifyElement.tag
  ]);

  RenderingScheduler<TimelinePageElement> _r;

  Stream<RenderedEvent<TimelinePageElement>> get onRendered => _r.onRendered;

  M.VM _vm;
  M.TimelineRepository _repository;
  M.EventRepository _events;
  M.NotificationRepository _notifications;
  M.TimelineRecorder _recorder;
  Set<M.TimelineStream> _availableStreams;
  Set<M.TimelineStream> _recordedStreams;
  Set<M.TimelineProfile> _profiles;

  M.VM get vm => _vm;
  M.NotificationRepository get notifications => _notifications;

  factory TimelinePageElement(M.VM vm, M.TimelineRepository repository,
      M.EventRepository events, M.NotificationRepository notifications,
      {RenderingQueue queue}) {
    assert(vm != null);
    assert(repository != null);
    assert(events != null);
    assert(notifications != null);
    TimelinePageElement e = document.createElement(tag.name);
    e._r = new RenderingScheduler<TimelinePageElement>(e, queue: queue);
    e._vm = vm;
    e._repository = repository;
    e._events = events;
    e._notifications = notifications;
    return e;
  }

  TimelinePageElement.created() : super.created();

  @override
  attached() {
    super.attached();
    _r.enable();
    _setupInitialState();
  }

  @override
  detached() {
    super.detached();
    _r.disable(notify: true);
    children = <Element>[];
  }

  IFrameElement _frame;
  DivElement _content;

  bool get usingVMRecorder =>
      _recorder.name != "Fuchsia" && _recorder.name != "Systrace";

  void render() {
    if (_frame == null) {
      _frame = new IFrameElement()..src = 'timeline.html';
    }
    if (_content == null) {
      _content = new DivElement()..classes = ['content-centered-big'];
    }
    _content.children = <Element>[
      new HeadingElement.h1()..text = 'Timeline settings',
      _recorder == null
          ? (new DivElement()..text = 'Loading...')
          : (new DivElement()
            ..classes = ['memberList']
            ..children = <Element>[
              new DivElement()
                ..classes = ['memberItem']
                ..children = <Element>[
                  new DivElement()
                    ..classes = ['memberName']
                    ..text = 'Recorder:',
                  new DivElement()
                    ..classes = ['memberValue']
                    ..text = _recorder.name
                ],
              new DivElement()
                ..classes = ['memberItem']
                ..children = <Element>[
                  new DivElement()
                    ..classes = ['memberName']
                    ..text = 'Recorded Streams Profile:',
                  new DivElement()
                    ..classes = ['memberValue']
                    ..children = _createProfileSelect()
                ],
              new DivElement()
                ..classes = ['memberItem']
                ..children = <Element>[
                  new DivElement()
                    ..classes = ['memberName']
                    ..text = 'Recorded Streams:',
                  new DivElement()
                    ..classes = ['memberValue']
                    ..children = _availableStreams
                        .map<Element>(_makeStreamToggle)
                        .toList()
                ]
            ])
    ];

    children = <Element>[
      navBar(<Element>[
        new NavTopMenuElement(queue: _r.queue),
        new NavVMMenuElement(vm, _events, queue: _r.queue),
        navMenu('timeline', link: Uris.timeline()),
        new NavRefreshElement(queue: _r.queue)
          ..onRefresh.listen((e) async {
            e.element.disabled = true;
            await _refresh();
            e.element.disabled = !usingVMRecorder;
          }),
        new NavRefreshElement(label: 'clear', queue: _r.queue)
          ..onRefresh.listen((e) async {
            e.element.disabled = true;
            await _clear();
            e.element.disabled = !usingVMRecorder;
          }),
        new NavRefreshElement(label: 'save', queue: _r.queue)
          ..onRefresh.listen((e) async {
            e.element.disabled = true;
            await _save();
            e.element.disabled = !usingVMRecorder;
          }),
        new NavRefreshElement(label: 'load', queue: _r.queue)
          ..onRefresh.listen((e) async {
            e.element.disabled = true;
            await _load();
            e.element.disabled = !usingVMRecorder;
          }),
        new NavNotifyElement(_notifications, queue: _r.queue)
      ]),
      _content,
      _createIFrameOrMessage(),
    ];
  }

  HtmlElement _createIFrameOrMessage() {
    if (_recorder == null) {
      return new DivElement()
        ..classes = ['content-centered-big']
        ..text = 'Loading...';
    }

    if (_recorder.name == "Fuchsia") {
      return new DivElement()
        ..classes = ['content-centered-big']
        ..children = <Element>[
          new BRElement(),
          new SpanElement()
            ..text =
                "This VM is forwarding timeline events to Fuchsia's system tracing. See the ",
          new AnchorElement()
            ..text = "Fuchsia Tracing Usage Guide"
            ..href =
                "https://fuchsia.googlesource.com/garnet/+/master/docs/tracing_usage_guide.md",
          new SpanElement()..text = ".",
        ];
    }

    if (_recorder.name == "Systrace") {
      return new DivElement()
        ..classes = ['content-centered-big']
        ..children = <Element>[
          new BRElement(),
          new SpanElement()
            ..text =
                "This VM is forwarding timeline events to Android's systrace. See the ",
          new AnchorElement()
            ..text = "systrace usage guide"
            ..href =
                "https://developer.android.com/studio/command-line/systrace",
          new SpanElement()..text = ".",
        ];
    }

    return new DivElement()
      ..classes = ['iframe']
      ..children = <Element>[_frame];
  }

  List<Element> _createProfileSelect() {
    return [
      new SpanElement()
        ..children = (_profiles.expand((profile) {
          return <Element>[
            new ButtonElement()
              ..text = profile.name
              ..onClick.listen((_) {
                _applyPreset(profile);
              }),
            new SpanElement()..text = ' - '
          ];
        }).toList()
          ..removeLast())
    ];
  }

  Future _refresh() async {
    final params =
        new Map<String, dynamic>.from(await _repository.getIFrameParams(vm));
    return _postMessage('refresh', params);
  }

  Future _clear() async {
    await _repository.clear(vm);
    return _postMessage('clear');
  }

  Future _save() async {
    return _postMessage('save');
  }

  Future _load() async {
    return _postMessage('load');
  }

  Future _postMessage(String method,
      [Map<String, dynamic> params = const <String, dynamic>{}]) async {
    if (_frame.contentWindow == null) {
      return null;
    }
    var message = {'method': method, 'params': params};
    _frame.contentWindow
        .postMessage(json.encode(message), window.location.href);
    return null;
  }

  Future _setupInitialState() async {
    await _updateRecorderUI();
    await _refresh();
  }

  void _applyPreset(M.TimelineProfile profile) {
    _recordedStreams = new Set<M.TimelineStream>.from(profile.streams);
    _applyStreamChanges();
    _updateRecorderUI();
  }

  Future _updateRecorderUI() async {
    // Grab the current timeline flags.
    final M.TimelineFlags flags = await _repository.getFlags(vm);
    // Grab the recorder name.
    _recorder = flags.recorder;
    // Update the set of available streams.
    _availableStreams = new Set<M.TimelineStream>.from(flags.streams);
    // Update the set of recorded streams.
    _recordedStreams = new Set<M.TimelineStream>.from(
        flags.streams.where((s) => s.isRecorded));
    // Update the set of presets.
    _profiles = new Set<M.TimelineProfile>.from(flags.profiles);
    // Refresh the UI.
    _r.dirty();
  }

  Element _makeStreamToggle(M.TimelineStream stream) {
    LabelElement label = new LabelElement();
    label.style.paddingLeft = '8px';
    SpanElement span = new SpanElement();
    span.text = stream.name;
    InputElement checkbox = new InputElement();
    checkbox.onChange.listen((_) {
      if (checkbox.checked) {
        _recordedStreams.add(stream);
      } else {
        _recordedStreams.remove(stream);
      }
      _applyStreamChanges();
      _updateRecorderUI();
    });
    checkbox.type = 'checkbox';
    checkbox.checked = _recordedStreams.contains(stream);
    label.children.add(checkbox);
    label.children.add(span);
    return label;
  }

  Future _applyStreamChanges() {
    return _repository.setRecordedStreams(vm, _recordedStreams);
  }
}