<!doctype html>
<html>
<head>

  <title>x-repeat</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="../../../perf-lib/perf.js"></script>
  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../polymer.html">
  <link rel="import" href="../../../layout/layout.html">

</head>
<body>

<style>
  body {
    font-family: sans-serif;
    font-size: 14px;
  }
</style>

<dom-module id="x-labeled-input">
  <style>
    :host {
      width: 400px
    }
    #label {
      width: 200px;
      overflow: hidden;
      border-bottom: 1px solid gray;
      border-bottom-style: dashed;
    }
    input {
      margin-right: 5px;
    }
  </style>
  <template>
    <div class="layout horizontal">
      <span id="label" class="flex">{{label}}</span>
      <input value="{{value::input}}" disabled$="{{disabled}}">
    </div>
  </template>
</dom-module>


<dom-module id="x-test">
  <style>
    .outer {
      padding: 10px;
    }
    .column {
      width: 400px;
      overflow: auto;
    }
    .item {
      margin: 5px;
      margin-left: 10px;
      margin-right: 0;
      padding: 5px;
      padding-right: 0;
      background-color: rgba(0,0,0,0.1);
    }
    .index {
      display: inline-block;
      background-color: gray;
      color: white;
      padding: 4px;
      margin-bottom: 4px;
      border-radius: 4px;
    }
  </style>
  <template>

    <div class="fit layout vertical">

      <div class="outer">
        <div class="index">Outer scope:</div>
        <x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
        <x-labeled-input label="outerB" value="{{outerB}}"></x-labeled-input>
        <x-labeled-input label="outerC" value="{{outerC}}"></x-labeled-input>
        <x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
        <x-labeled-input label="outerObjB.value" value="{{outerObjB.value}}"></x-labeled-input>
        <x-labeled-input label="outerObjC.value" value="{{outerObjC.value}}"></x-labeled-input>
      </div>

      <div class="layout horizontal flex">

        <div class="column flex">
          <template is="x-repeat" id="xr1-1" items="{{items}}">
            <div class="item" id="xr1-1" idx$="{{index}}">
              <div class="index">idx: <span>{{index}}</span></div>
              <button on-click="handleClickA">Change outerA</button>
              <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
              <x-labeled-input label="parent.outerA" value="{{parent.outerA}}"></x-labeled-input>
              <x-labeled-input label="parent.outerObjA.value" value="{{parent.outerObjA.value}}"></x-labeled-input>
              <x-labeled-input label="innerA" value="{{innerA}}"></x-labeled-input>
              <x-labeled-input label="innerB" value="{{innerB}}"></x-labeled-input>
              <x-labeled-input label="computeInner(innerA, innerB)" value="{{computeInner(innerA, innerB)}}" disabled></x-labeled-input>
              <template is="x-repeat" id="xr1-2" idx$="{{index}}" items="{{item.items}}">
                <div class="item" id="xr1-2" idx$="{{index}}">
                  <div class="index">idx: <span>{{index}}</span></div>
                  <button on-click="handleClickB">Change outerB</button>
                  <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
                  <x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
                  <x-labeled-input label="parent.parent.outerB" value="{{parent.parent.outerB}}"></x-labeled-input>
                  <x-labeled-input label="parent.parent.outerObjB.value" value="{{parent.parent.outerObjB.value}}"></x-labeled-input>
                  <template is="x-repeat" id="xr1-3" idx$="{{index}}" items="{{item.items}}">
                    <div class="item" id="xr1-3" idx$="{{index}}">
                      <div class="index">idx: <span>{{index}}</span></div>
                      <button on-click="handleClickC">Change outerC</button>
                      <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
                      <x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
                      <x-labeled-input label="parent.parent.item.name" value="{{parent.parent.item.name}}"></x-labeled-input>
                      <x-labeled-input label="parent.parent.parent.outerC" value="{{parent.parent.parent.outerC}}"></x-labeled-input>
                      <x-labeled-input label="parent.parent.parent.outerObjC.value" value="{{parent.parent.parent.outerObjC.value}}"></x-labeled-input>
                    </div>
                  </template>
                </div>
              </template>
            </div>
          </template>
        </div>

        <div class="column flex">
          <template is="x-repeat" id="xr2-1" idx$="{{index}}" items="{{items}}">
            <div class="item" id="xr2-1" idx$="{{index}}">
              <div class="index">idx: <span>{{index}}</span></div>
              <button on-click="handleClickA">Change outerA</button>
              <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
              <x-labeled-input label="parent.outerA" value="{{parent.outerA}}"></x-labeled-input>
              <x-labeled-input label="parent.outerObjA.value" value="{{parent.outerObjA.value}}"></x-labeled-input>
              <x-labeled-input label="innerA" value="{{innerA}}"></x-labeled-input>
              <x-labeled-input label="innerB" value="{{innerB}}"></x-labeled-input>
              <x-labeled-input label="computeInner(innerA, innerB)" value="{{computeInner(innerA, innerB)}}" disabled></x-labeled-input>
              <template is="x-repeat" id="xr2-2" idx$="{{index}}" items="{{item.items}}">
                <div class="item" id="xr2-2" idx$="{{index}}">
                  <div class="index">idx: <span>{{index}}</span></div>
                  <button on-click="handleClickB">Change outerB</button>
                  <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
                  <x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
                  <x-labeled-input label="parent.parent.outerB" value="{{parent.parent.outerB}}"></x-labeled-input>
                  <x-labeled-input label="parent.parent.outerObjB.value" value="{{parent.parent.outerObjB.value}}"></x-labeled-input>
                  <template is="x-repeat" id="xr2-3" idx$="{{index}}" items="{{item.items}}">
                    <div class="item" id="xr2-3" idx$="{{index}}">
                      <div class="index">idx: <span>{{index}}</span></div>
                      <button on-click="handleClickC">Change outerC</button>
                      <x-labeled-input label="item.name" value="{{item.name}}"></x-labeled-input>
                      <x-labeled-input label="parent.item.name" value="{{parent.item.name}}"></x-labeled-input>
                      <x-labeled-input label="parent.parent.item.name" value="{{parent.parent.item.name}}"></x-labeled-input>
                      <x-labeled-input label="parent.parent.parent.outerC" value="{{parent.parent.parent.outerC}}"></x-labeled-input>
                      <x-labeled-input label="parent.parent.parent.outerObjC.value" value="{{parent.parent.parent.outerObjC.value}}"></x-labeled-input>
                    </div>
                  </template>
                </div>
              </template>
            </div>
          </template>
        </div>

      </div>

    </div>

  </template>
</dom-module>

<script>
  HTMLImports.whenReady(function() {

    Polymer ({
      is: 'x-labeled-input',
      properties: {
        value: {
          notify: true
        },
        label: String,
        disabled: Boolean
      }
    });

    Polymer ({
      is: 'x-test',
      properties: {
        items: {
          value: function() {
            return [
              {name: 'item 1', items: [
                {name: 'item 1-1', items: [
                  {name: 'item 1-1-1'},
                  {name: 'item 1-1-2'},
                  {name: 'item 1-1-3'}
                ]},
                {name: 'item 1-2', items: [
                  {name: 'item 1-2-1'},
                  {name: 'item 1-2-2'},
                  {name: 'item 1-2-3'}
                ]},
                {name: 'item 1-3', items: [
                  {name: 'item 1-3-1'},
                  {name: 'item 1-3-2'},
                  {name: 'item 1-3-3'}
                ]}
              ]},
              {name: 'item 2', items: [
                {name: 'item 2-1', items: [
                  {name: 'item 2-1-1'},
                  {name: 'item 2-1-2'},
                  {name: 'item 2-1-3'}
                ]},
                {name: 'item 2-2', items: [
                  {name: 'item 2-2-1'},
                  {name: 'item 2-2-2'},
                  {name: 'item 2-2-3'}
                ]},
                {name: 'item 2-3', items: [
                  {name: 'item 2-3-1'},
                  {name: 'item 2-3-2'},
                  {name: 'item 2-3-3'}
                ]}
              ]},
              {name: 'item 3', items: [
                {name: 'item 3-1', items: [
                  {name: 'item 3-1-1'},
                  {name: 'item 3-1-2'},
                  {name: 'item 3-1-3'}
                ]},
                {name: 'item 3-2', items: [
                  {name: 'item 3-2-1'},
                  {name: 'item 3-2-2'},
                  {name: 'item 3-2-3'}
                ]},
                {name: 'item 3-3', items: [
                  {name: 'item 3-3-1'},
                  {name: 'item 3-3-2'},
                  {name: 'item 3-3-3'}
                ]},
              ]}
            ];
          }
        },
        outerA: {
          value: 'outerA'
        },
        outerB: {
          value: 'outerB'
        },
        outerC: {
          value: 'outerC'
        },
        outerObjA: {
          value: function() { return { value: 'outerObjA.value' }; }
        },
        outerObjB: {
          value: function() { return { value: 'outerObjB.value' }; }
        },
        outerObjC: {
          value: function() { return { value: 'outerObjC.value' }; }
        }
      },
      handleClickA: function() {
        this.outerA = this.outerA + 'A';
      },
      handleClickB: function() {
        this.outerB = this.outerB + 'B';
      },
      handleClickC: function() {
        this.outerC = this.outerC + 'C';
      },
      computeInner: function(a, b) {
        return a + '-' + b;
      }
    });

  });
</script>

<script>console.perf && console.perf();</script>

<x-test class="fit"></x-test>

<script>setTimeout(function() { console.perf && console.perfEnd(); });</script>
