<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="curly_block.html">
<link rel="import" href="observatory_element.html">
<link rel="import" href="service_ref.html">

<polymer-element name="instance-ref" extends="service-ref">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      .indented {
        margin-left: 1.5em;
        font: 400 14px 'Montserrat', sans-serif;
        line-height: 150%;
      }
      .stackTraceBox {
        margin-left: 1.5em;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        padding: 10px;
        font-family: consolas, courier, monospace;
        font-size: 12px;
        white-space: pre;
        overflow-x: auto;
      }
    </style>
    <span>
      <template if="{{ ref.isSentinel }}">
        <span title="{{ hoverText }}">{{ ref.valueAsString }}</span>
      </template>

      <template if="{{ ref.isBool || ref.isInt ||
                       ref.isDouble || ref.isSimdValue ||
                       ref.isNull }}">
        <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.valueAsString }}</a>
      </template>

      <template if="{{ ref.isStackTrace }}">
        <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em></a>
        <curly-block expandKey="{{ expandKey }}">
          <div class="stackTraceBox">{{ ref.valueAsString }}</div>
        </curly-block>
      </template>

      <template if="{{ ref.isString }}">
        <a on-click="{{ goto }}" _href="{{ url }}">{{ asStringLiteral(ref.valueAsString, ref.valueAsStringIsTruncated) }}</a>
      </template>


      <template if="{{ ref.isAbstractType }}">
        <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a>
      </template>

      <template if="{{ ref.isClosure }}">
        <a on-click="{{ goto }}" _href="{{ url }}">
          <em>Closure</em> ({{ ref.function.qualifiedName }})
        </a>
      </template>

      <template if="{{ ref.isRegExp }}">
        <a on-click="{{ goto }}" _href="{{ url }}">
          <em>{{ ref.clazz.name }}</em> ({{ ref.pattern.valueAsString }})
        </a>
      </template>

      <template if="{{ ref.isPlainInstance }}">
        <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em></a>
        <curly-block callback="{{ expander() }}" expandKey="{{ expandKey }}">
          <div class="indented">
            <template repeat="{{ field in ref.fields }}">
              {{ field['decl'].name }}&nbsp;:&nbsp;
              <any-service-ref ref="{{ field['value'] }}"
                               expandKey="{{ makeExpandKey(field['decl'].name) }}">
              </any-service-ref><br>
            </template>
          </div>
        </curly-block>
      </template>

      <template if="{{ ref.isList }}">
        <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em> ({{ ref.length }})</a>
        <curly-block callback="{{ expander() }}"
                     expandKey="{{ expandKey }}">
          <div class="indented">
            <template repeat="{{ index in ref.elements.asMap().keys }}">
              [ {{ index }} ]&nbsp;&nbsp;
              <any-service-ref ref="{{ ref.elements[index] }}"
                               expandKey="{{ makeExpandKey(index.toString()) }}">
              </any-service-ref><br>
            </template>
          </div>
        </curly-block>
      </template>

      <template if="{{ ref.isMap }}">
        <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em> ({{ ref.length }})</a>
        <curly-block callback="{{ expander() }}" expandKey="{{ expandKey }}">
          <div class="indented">
            <template repeat="{{ association in ref.associations }}">
              [ <any-service-ref ref="{{ association['key'] }}"
                                expandKey="{{ makeExpandKey('key') }}">
              </any-service-ref> ]&nbsp;&nbsp;
              <any-service-ref ref="{{ association['value'] }}"
                                 expandKey="{{ makeExpandKey('value') }}">
              </any-service-ref><br>
            </template>
          </div>
        </curly-block>
      </template>

      <template if="{{ ref.isTypedData }}">
        <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em> ({{ ref.length }})</a>
        <curly-block callback="{{ expander() }}" expandKey="{{ expandKey }}">
          <div class="indented">
            <template repeat="{{ index in ref.typedElements.asMap().keys }}">
              [ {{ index }} ]&nbsp;&nbsp;
              {{ ref.typedElements[index].toString() }}<br>
            </template>
          </div>
        </curly-block>
      </template>

      <template if="{{ ref.isMirrorReference }}">
        <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em></a>
        <curly-block callback="{{ expander() }}" expandKey="{{ expandKey }}">
          <div class="indented">
            &lt;referent&gt;&nbsp;:&nbsp;
            <any-service-ref ref="{{ ref.referent }}"
                             expandKey="{{ makeExpandKey('referent') }}">
            </any-service-ref>
          </div>
        </curly-block>
      </template>

      <template if="{{ ref.isWeakProperty }}">
        <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em></a>
        <curly-block callback="{{ expander() }}" expandKey="{{ expandKey }}">
          <div class="indented">
            &lt;key&gt;&nbsp;:&nbsp;
            <any-service-ref ref="{{ ref.key }}"
                             expandKey="{{ makeExpandKey('key') }}">
            </any-service-ref><br>
            &lt;value&gt;&nbsp;:&nbsp;
            <any-service-ref ref="{{ ref.value }}"
                             expandKey="{{ makeExpandKey('value') }}">
            </any-service-ref><br>
          </div>
        </curly-block>
      </template>
    </span>
  </template>
</polymer-element>

<script type="application/dart" src="instance_ref.dart"></script>