<template>
  <div class="flow-inspector">
    <template v-if="nodeInspect">
      <!-- VIEWER -->
      <div class="flow-inspector__container">
        <svg
          class="flow-view preview activity flow-node--detail flow-node--activity flow-linking flow-inspector__area flow-inspector--view "
          width="100%"
          height="100%"
          viewBox="0 0 300 200">
          <flow-panzoom>
            <flow-node
              style="pointer-events:none"
              ref="modalPreviewNode"
              :id="nodeInspect.id"
              transform="translate(150,100)"
              :match="{}"
              :label="nodeInspect.label"
              :inputs= "registry[nodeInspect.src].inputs"
              :output= "registry[nodeInspect.src].output"
              :activity= "activity[nodeInspect.id]"
              :nodeStyle= "registry[nodeInspect.src].style"
            />
          </flow-panzoom>
        </svg>

        <!-- DESCRIPTIONS -->
        <div class="flow-inspector__area flow-inspector--properties ">

          <label>Description</label>
          <div class="property">Bogus description</div>
          <label>Help</label>
          <div class="property">Connect to input a thing and goes to output another thing</div>
        </div>
        <div class="flow-inspector__activity flow-inspector__area">
          <div
            v-if="activity && activity[nodeInspect.id] && activity[nodeInspect.id].data"
            class="flow-inspector--properties-result">
            <label>Result</label>
            <div class="property">{{ activity && activity[nodeInspect.id] && activity[nodeInspect.id].data }}</div>
          </div>
          <div
            v-if="activity && activity[nodeInspect.id] && activity[nodeInspect.id].error"
            class="flow-inspector--properties-error">
            <label>Error</label>
            <div class="property">{{ activity && activity[nodeInspect.id] && activity[nodeInspect.id].error }}</div>
          </div>
        </div>
        <!-- PARAMETERS -->
        <div class="flow-inspector--params flow-inspector__area" v-if="nodeInspect.prop" >
          <div class="flow-inspector__param" v-for="(v,k) in nodeInspect.prop">
            <label>{{ k }}</label>
            <input
              ref="props"
              type="text"
              v-model="nodeInspect.prop[k]">
          </div>
        </div>

        <!-- STATIC PARAM -->
        <div class="flow-inspector__area  flow-inspector--static">
          <label>label</label>
          <input ref="labelInput" type="text" v-model="nodeInspect.label">
        </div>
      </div><!-- /container -->

      <div class="flow-inspector__area flow-inspector--control">
        <button
          class="primary-inverse"
          @click="$emit('nodeProcess',nodeInspect)">Run</button>
      </div>
    </template>
    <template v-else>
      Select a node
    </template>
  </div>
</template>
<script>
import FlowPanzoom from '@/components/flow/panzoom'
import FlowNode from '@/components/flow/node'
import HxCollapsible from '@/components/shared/hx-collapsible'

export default {
  name: 'FlowInspector',
  components: {FlowPanzoom, FlowNode, HxCollapsible},
  props: {
    nodeInspect: {type: Object, default: null},
    activity: {type: Object, default: null},
    registry: {type: Object, default: null}
  },
  watch: {
    nodeInspect () {
      this.$nextTick(() => this.$forceUpdate())
    }
  }
}
</script>
<style>
.flow-inspector {
  font-size:12px;
  flex:1;
  overflow:hidden;
  height: available;
  display:flex;
  flex-flow:column;
  color: var(--normal);
  padding:10px;
}

.flow-inspector__container {
  display:flex;
  flex-flow:column;
  white-space: nowrap;
  width:100%;
  flex-basis:100%;
  transition: all var(--transition-speed);
  overflow:hidden;
}

.flow-inspector input {
  background: var(--background);
  color: var(--normal);
}

.flow-inspector__area {
  flex:1;
}

.flow-inspector__area label{
  display:block;
  padding:5px 0;
  color: var(--primary);
}

.flow-inspector__area h3{
  display:none;
  background: var(--background);
  font-size:14px;
  color: var(--primary);
  padding:4px 4px;
  border-bottom: solid 1px rgba(150,150,150,0.2);
}

.flow-inspector--view {
  flex-basis:150px;
  flex-shrink: 0;
}

.flow-inspector--properties-error {
  color: red;
}

.flow-inspector--parameters {
  padding:20px;
}

.flow-inspector--control {
  flex:0;
  padding-top:10px;
}

.flow-inspector--control button {
  width: 100%;
}
</style>
