<template>
  <div
    class="flow-funcs__container"
    :class="{active:active}">
    <!--<div class="flow-funcs__control">
    <button
      class="item"
      @click="funcsViewBlocks=!funcsViewBlocks">
      {{ funcsViewBlocks ? 'List':'Blocks' }} view
    </button>
    <button
      class="item"
      @click="$emit('toggleResizeable')">
      Resize
    </button>
  </div>-->
    <div class="flow-funcs__search">
      <input type="text" placeholder="search" v-model="search">
    </div>

    <div class="flow-funcs__inner">
      <hx-collapsible
        v-for="g in funcsGroups"
        :key="g">
        <div
          class="flow-funcs__header"
          slot="header">{{ g }}</div>
        <div
          class="flow-funcs__group"
          :class="{blocks:funcsViewBlocks}">
          <div
            ref="src"
            v-for="k in funcsGroupItems(g)"
            :key="k.src"
            class="flow-funcs__src hover"
            draggable="true"
            @dragstart="fnDrag($event,k.src)"
            :style="{ 'background': registry[k.src].style && registry[k.src].style.color, }"
            :title="k.src"
            v-html="k.label"
          />
        </div>
      </hx-collapsible>
    </div>
  </div>
</template>
<script>
import HxCollapsible from '@/components/shared/hx-collapsible'
import utils from '@/utils/utils'

export default {
  name: 'FlowPanel',
  components: {HxCollapsible},
  props: {
    active: {type: Boolean, default: true},
    registry: {type: Object, default: () => {}}
  },
  data () {
    return {
      search: null,
      funcsViewBlocks: true
    }
  },
  computed: {
    funcsGroups () {
      // Set
      let group = new Set()
      for (let r in this.registry) {
        for (let c of this.registry[r].categories) {
          if (this.funcsGroupItems(c).length === 0) {
            continue
          }
          group.add(c)
        }
      }
      return [...group]
    },
    funcsGroupItems () {
      return (g) => {
        const ret = Object.keys(this.registry).filter(v => this.registry[v].categories.includes(g))
          .map(v => {
            return { src: v, label: v.split('.').join('<br/>') }
          })
        if (!this.search) {
          return ret
        }

        const filtered = []
        ret.forEach(e => {
          let r = utils.fuzzysearch(this.search, e.label)
          if (r !== false) {
            filtered.push({src: e.src, label: r})
          }
        })
        return filtered
      }
    }
  },
  methods: {
    fnDrag (ev, src) {
      ev.dataTransfer.setData('text/plain', src)
    }
  }
}
</script>
<style>
.flow-funcs {
  opacity:1;
}

.flow-funcs__container {
  white-space: nowrap;
  width:0;
  transition: all var(--transition-speed);
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}

.flow-funcs__container.active {
  width:100%;
}

.flow-funcs__control {
  display:flex;
  flex-flow:row;

}

.flow-funcs__control .item{
  font-size:14px;
  padding:13px;
  flex:1;
  height:100%;
  text-align:center;
  color:black;
  text-overflow: ellipsis;
  min-width:50px;
  height:50px;
  overflow:hidden;
}

.flow-funcs__search input {
  background: transparent;
  padding:13px;
  min-width:50px;
  height:50px;
  box-shadow:none;
}

.flow-funcs__inner {
  overflow:hidden;
  margin-top:20px;
}

.flow-funcs__header {
  transition: all var(--transition-speed);
}

.flow-funcs__inner .hx-collapsible__header {
  font-size:14px;
  padding:5px 10px;
  transition: all var(--transition-speed);
}

.flow-funcs__group{
  display:flex;
  flex-flow:column;
  padding:10px;
  transition: all var(--transition-speed);
}

.flow-funcs__src {
  font-size:14px;
  padding:12px 4px;
  margin-top:1px;
  text-align:center;
  transition: all var(--transition-speed);
  position:relative;
  display:flex;
  justify-content: center;
  align-items: center;
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.flow-funcs__src b{
  font-weight:bold;
  color: var(--primary);
}

.flow-funcs__group.blocks {
  flex-flow: row;
  flex-wrap: wrap;
  align-content: center;
}

.flow-funcs__group.blocks .flow-funcs__src {
  display:block;
  font-size:10px;
  width: calc(50% - 2px);
  padding:18px 4px;
  text-overflow: ellipsis;
  margin:1px;
  word-wrap: break-all;
  overflow:hidden;
}

.flow-funcs__toggle {
  margin:0;
  position:relative;
}

</style>
