// Copyright (c) 2013, 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 template_binding.test.custom_element_bindings_test;

import 'dart:async';
import 'dart:html';
import 'dart:collection' show MapView;
import 'package:template_binding/template_binding.dart';
import 'package:observe/observe.dart';
import 'package:unittest/html_config.dart';
import 'package:unittest/unittest.dart';
import 'package:web_components/polyfill.dart';
import 'utils.dart';

Future _registered;

main() => dirtyCheckZone().run(() {
  useHtmlConfiguration();

  _registered = customElementsReady.then((_) {
    document.registerElement('my-custom-element', MyCustomElement);
  });

  group('Custom Element Bindings', customElementBindingsTest);
});

customElementBindingsTest() {
  setUp(() {
    document.body.append(testDiv = new DivElement());
    return _registered;
  });

  tearDown(() {
    testDiv.remove();
    testDiv = null;
  });

  test('override bind/bindFinished', () {
    var element = new MyCustomElement();
    var model = toObservable({'a': new Point(123, 444), 'b': new Monster(100)});

    var pointBinding = nodeBind(element)
        .bind('my-point', new PathObserver(model, 'a'));

    var scaryBinding = nodeBind(element)
        .bind('scary-monster', new PathObserver(model, 'b'));

    expect(element.attributes, isNot(contains('my-point')));
    expect(element.attributes, isNot(contains('scary-monster')));

    expect(element.myPoint, model['a']);
    expect(element.scaryMonster, model['b']);

    model['a'] = null;
    return new Future(() {
      expect(element.myPoint, null);
      expect(element.bindFinishedCalled, 0);
      pointBinding.close();

      model['a'] = new Point(1, 2);
      model['b'] = new Monster(200);
    }).then(endOfMicrotask).then((_) {
      expect(element.scaryMonster, model['b']);
      expect(element.myPoint, null, reason: 'a was unbound');

      scaryBinding.close();
      model['b'] = null;
    }).then(endOfMicrotask).then((_) {
      expect(element.scaryMonster.health, 200);
      expect(element.bindFinishedCalled, 0);
    });
  });

  test('template bind uses overridden custom element bind', () {

    var model = toObservable({'a': new Point(123, 444), 'b': new Monster(100)});
    var div = createTestHtml('<template bind>'
          '<my-custom-element my-point="{{a}}" scary-monster="{{b}}">'
          '</my-custom-element>'
        '</template>');

    templateBind(div.query('template')).model = model;
    var element;
    return new Future(() {
      element = div.nodes[1];

      expect(element is MyCustomElement, true,
          reason: '$element should be a MyCustomElement');

      expect(element.myPoint, model['a']);
      expect(element.scaryMonster, model['b']);

      expect(element.attributes, isNot(contains('my-point')));
      expect(element.attributes, isNot(contains('scary-monster')));

      expect(element.bindFinishedCalled, 1);

      model['a'] = null;
    }).then(endOfMicrotask).then((_) {
      expect(element.myPoint, null);
      expect(element.bindFinishedCalled, 1);


      templateBind(div.query('template')).model = null;
    }).then(endOfMicrotask).then((_) {
      // Note: the detached element
      expect(element.parentNode is DocumentFragment, true,
          reason: 'removed element is added back to its document fragment');
      expect(element.parentNode.parentNode, null,
          reason: 'document fragment is detached');
      expect(element.bindFinishedCalled, 1);

      model['a'] = new Point(1, 2);
      model['b'] = new Monster(200);
    }).then(endOfMicrotask).then((_) {
      expect(element.myPoint, null, reason: 'model was unbound');
      expect(element.scaryMonster.health, 100, reason: 'model was unbound');
      expect(element.bindFinishedCalled, 1);
    });
  });

}

class Monster {
  int health;
  Monster(this.health);
}

/** Demonstrates a custom element overriding bind/bindFinished. */
class MyCustomElement extends HtmlElement implements NodeBindExtension {
  Point myPoint;
  Monster scaryMonster;
  int bindFinishedCalled = 0;

  factory MyCustomElement() => new Element.tag('my-custom-element');

  MyCustomElement.created() : super.created();

  Bindable bind(String name, value, {oneTime: false}) {
    switch (name) {
      case 'my-point':
      case 'scary-monster':
        attributes.remove(name);
        if (oneTime) {
          _setProperty(name, value);
          return null;
        }
        _setProperty(name, value.open((x) => _setProperty(name, x)));

        if (!enableBindingsReflection) return value;
        if (bindings == null) bindings = {};
        var old = bindings[name];
        if (old != null) old.close();
        return bindings[name] = value;
    }
    return nodeBindFallback(this).bind(name, value, oneTime: oneTime);
  }

  void bindFinished() {
    bindFinishedCalled++;
  }

  get bindings => nodeBindFallback(this).bindings;
  set bindings(x) => nodeBindFallback(this).bindings = x;
  get templateInstance => nodeBindFallback(this).templateInstance;

  void _setProperty(String property, newValue) {
    if (property == 'my-point') myPoint = newValue;
    if (property == 'scary-monster') scaryMonster = newValue;
  }
}