// Copyright (c) 2016, 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.

import 'dart:html';
import 'dart:async';
import 'package:observatory/app.dart';
import 'package:observatory/service.dart';
import 'package:observatory/src/elements/helpers/tag.dart';
import 'package:observatory/src/elements/shims/binding.dart';
import 'package:observatory/src/elements/isolate/shared_summary.dart';

@bindable
class IsolateSharedSummaryElementWrapper extends HtmlElement {
  static const binder = const Binder<IsolateSharedSummaryElementWrapper>(const {
      'isolate': #isolate
    });

  static const tag =
      const Tag<IsolateSharedSummaryElementWrapper>('isolate-shared-summary');

  IsolateSharedSummaryElementWrapper.created() : super.created() {
    binder.registerCallback(this);
    createShadowRoot();
    render();
  }

  Isolate _isolate;
  StreamSubscription _subscription;

  Isolate get isolate => _isolate;

  void set isolate(Isolate value) {
    _isolate = value;
    _detached();
    _attached();
  }

  @override
  void attached() {
    super.attached();
    _attached();
  }

  @override
  void detached() {
    super.detached();
    _detached();
  }

  void _attached() {
    if (_isolate != null) {
      _subscription = _isolate.changes.listen((_) { render(); });
    }
    render();
  }

  void _detached() {
    _subscription?.cancel();
    _subscription = null;
  }

  void render() {
    if (_isolate == null) {
      return;
    }
    shadowRoot.children = [
      new StyleElement()
        ..text = '''
        a[href] {
          color: #0489c3;
          text-decoration: none;
        }
        a[href]:hover {
          text-decoration: underline;
        }
        .memberList {
          display: table;
        }
        .memberItem {
          display: table-row;
        }
        .memberName, .memberValue {
          display: table-cell;
          vertical-align: top;
          padding: 3px 0 3px 1em;
          font: 400 14px 'Montserrat', sans-serif;
        }
        isolate-shared-summary-wrapped {
          display: block;
        }
        isolate-shared-summary-wrapped > .summary {
          height: 300px;
          position: relative;
        }
        isolate-shared-summary-wrapped .menu {
          float: right;
          top: 0;
          right: 0;
        }
        isolate-shared-summary-wrapped isolate-counter-chart {
          position: absolute;
          left: 0;
          top: 0;
          right: 230px;
          clear: both;
        }
        isolate-shared-summary-wrapped .errorBox {
          background-color: #f5f5f5;
          border: 1px solid #ccc;
          padding: 2em;
          font-family: consolas, courier, monospace;
          font-size: 1em;
          line-height: 1.2em;
          white-space: pre;
        }
        isolate-counter-chart {
          display: block;
          position: relative;
          height: 300px;
          min-width: 350px;
        }
        isolate-counter-chart > div.host {
          position: absolute;
          left: 0;
          bottom: 20px;
          top: 5px;
          right: 250px;
        }
        isolate-counter-chart > div.legend {
          position: absolute;
          width: 250px;
          top: 0;
          right: 0;
          bottom: 0;
          overflow-y: auto;
        }
        .type-pie-rdr > .chart-legend-color {
          border-radius: 6px;
        }
        .chart-legend-row, .chart-legend-more {
          width: 100%;
          display: flex;
          font-size: 14px;
          margin-bottom: 16px;
          position: relative;
          cursor: default;
        }
        .chart-legend-row:hover, .chart-legend-more:hover {
          font-weight: bold;
        }
        .chart-legend-color, .chart-legend-more-color {
          width: 12px;
          height: 12px;
          margin: auto 8px;
          border-radius: 2px;
        }
        .chart-legend-label {
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 120px;
          flex: 1;
        }
        ''',
      new IsolateSharedSummaryElement(_isolate,
                                      queue: ObservatoryApplication.app.queue)
    ];
  }
}