/* jshint multistr: true */

Vue.component('object-detail', {

  name: 'object-detail',

  mixins: [notificationMixin],

  props: {

    object: {
      type: Object,
      required: true,
    },

    links: {
      type: Object
    },

    transformer: {
      type: Function
    },

    pathPrefix: {
      type: String,
      default: "",
    },

    collapsed: {
      type: Object,
      default: function() { return {}; },
    },

  },

  template: '\
    <div class="object-detail">\
      <div class="object-key-value" v-for="(value, key) in object" :class="[typeof(key) == \'string\' ? key.toLowerCase() : key]">\
        <div v-if="Array.isArray(value)">\
          <collapse :collapsed="collapsedState(path(key))">\
            <div slot="collapse-header" slot-scope="props" class="object-key">\
              {{key}} :\
              <span class="pull-right">\
                <i class="glyphicon glyphicon-chevron-left rotate" :class="{\'down\': props.active}"></i>\
              </span>\
            </div>\
            <div slot="collapse-body">\
              <div v-for="(v, index) in value">\
                <div v-if="typeof v == \'object\'" class="object-sub-detail" style="margin-left: 20px;">\
                  <span v-if="Object.keys(v).length > 0" class="object-key" :class="typeof(value)" style="float:left">- </span>\
                  <object-detail :object="v" :pathPrefix="path(key)" :transformer="transformer" :collapsed="collapsed"></object-detail>\
                </div>\
                <div v-else class="object-sub-detail">\
                  <div class="object-detail copy-clipboard" :class="typeof(value)" @click="copyToClipboard(v)">- {{ transform(key, v) }}</div>\
                </div>\
              </div>\
            </div>\
          </collapse>\
        </div>\
        <div v-else-if="typeof value == \'object\'" class="object-sub-detail">\
          <span class="object-key">{{key}}</span>\
          <object-detail :object="value" :pathPrefix="path(key)" :transformer="transformer" :collapsed="collapsed"></object-detail>\
        </div>\
        <div v-else>\
          <span class="object-key">{{key}}</span> :\
          <span class="object-value copy-clipboard" :class="typeof(value)" v-html="transform(key, value)" @click="copyToClipboard(value)"></span>\
          <i v-if="links && links[key]" :class="links[key].class" @click="links[key].onClick" \
            @mouseover="links[key].onMouseOver" @mouseout="links[key].onMouseOut"></i>\
        </div>\
      </div>\
    </div>\
  ',

  methods: {

    path: function(key) {
      if (this.pathPrefix) {
        return this.pathPrefix + "." + key;
      }
      else {
        return key;
      }
    },

    transform: function(key, value) {
      if (this.transformer) {
        return this.transformer(this.path(key), value);
      }
      return value;
    },

    collapsedState: function(path) {
      if (path in this.collapsed)
        return this.collapsed[path];
      return true;
    },

    copyToClipboard(value) {
      var textArea = document.createElement("textarea");
      textArea.value = value;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand("Copy");
      textArea.remove();

      this.$success({message: 'Copied `' + value + '`'});
    }
  }
});

@@ -1901,48 +1901,398 @@
    %3C
-span class=%22object-key%22%3E%7B%7Bkey%7D%7D%3C/span%3E%5C%0A
+collapse :collapsed=%22collapsedState(path(key))%22%3E%5C%0A            %3Cdiv slot=%22collapse-header%22 slot-scope=%22props%22 class=%22object-key%22%3E%5C%0A              %7B%7Bkey%7D%7D :%5C%0A              %3Cspan class=%22pull-right%22%3E%5C%0A                %3Ci class=%22glyphicon glyphicon-chevron-left rotate%22 :class=%22%7B%5C'down%5C': props.active%7D%22%3E%3C/i%3E%5C%0A              %3C/span%3E%5C%0A            %3C/div%3E%5C%0A            %3Cdiv slot=%22collapse-body%22%3E%5C%0A    
     
@@ -2412,32 +2412,75 @@
 object-detail%3E%5C%0A
+            %3C/div%3E%5C%0A          %3C/collapse%3E%5C%0A
         %3C/div%3E%5C%0A

add collapse/expand for map/dict