
<template>
  <ul>
    <li v-for="directory in directories"
        class="fotkipress-directory-element"
        v-bind:class="{
            'fotkipress-directory-element-dragged': isDraggedDirectory(directory),
        }">
      <router-link :to="{name: 'browser', params: [directory.path]}"
                   v-bind:class="{
                       'fotkipress-active-tree-link': directory.path === path,
                       'fotkipress-directory-element-dragged-over': isDraggedOverDirectory(directory)
                       }">
        <span class="fotkipress-directory-toggle-directory" v-if="isVisibleToggle(directory)">
          <a @click="toggleDirectory($event, directory.path)" href="" v-if="!isVisiblePath(directory.path)" ondragstart="return false;" ondrop="return false;">[+]</a>
          <a @click="toggleDirectory($event, directory.path)" href="" v-if="isVisiblePath(directory.path)" ondragstart="return false;" ondrop="return false;">[-]</a>
        </span>
        <div @dragstart="directoryStartDrag(directory)"
             @dragenter="directoryDragEnter($event)"
             @dragover="directoryDragOver($event, directory)"
             @dragleave="directoryDragLeave($event)"
             @dragend="directoryDragEnd()"
             @drop="directoryDrop(directory)"
             :draggable="isDraggable(directory)">
          {{directory.name}}
        </div>
        <div class="fotkipress-directory-element-subpaths" v-if="isVisiblePath(directory.path)">
          <directory-sub-tree :path="path"
                              :directories="directory.subpaths"
                              :visibledirectories="visibledirectories"
                              :ontoggle="ontoggle"
                              :dragstart="dragstart"
                              :dragover="dragover"
                              :dragend="dragend"
                              :drop="drop"
                              :draggedpath="draggedpath"
                              :draggedoverpath="draggedoverpath"/>
        </div>
      </router-link>
    </li>
  </ul>
</template>


<script>
import API from './../../api';

export default {
    props: {
        path: {
            type: String,
            required: true
        },
        directories: {
            type: Array,
            required: true
        },
        visibledirectories: {
            type: Array,
            required: true
        },
        ontoggle: {
            type: Function,
            required: true
        },
        dragstart: {
            type: Function,
            required: true
        },
        dragover: {
            type: Function,
            required: true
        },
        dragend: {
            type: Function,
            required: true
        },
        drop: {
            type: Function,
            required: true
        },
        draggedpath: {
            type: Object,
            required: true
        },
        draggedoverpath: {
            type: Object,
            required: true
        }
    },

    methods: {
        toggleDirectory(evt, path) {
            evt.preventDefault();

            this.ontoggle(path);
        },

        isVisibleToggle(directory) {
            return directory.subpaths.length !== 0;
        },

        isVisiblePath(path) {
            return this.visibledirectories.indexOf(path) !== -1;
        },

        /* --- */

        isDraggable(directory) {
            return directory.path !== '' && directory.path !== 'public';
        },

        directoryStartDrag(directory) {
            this.dragstart(directory);
        },

        directoryDragOver(evt, directory) {
            evt.preventDefault();
            this.dragover(directory);
        },

        directoryDragEnter(evt) {
            evt.preventDefault();
        },

        directoryDragLeave(evt) {
            evt.preventDefault();
        },

        directoryDragEnd() {
            this.dragend();
        },

        directoryDrop(directory) {
            if (this.isDraggedOverDirectory(directory)) {
                this.drop(directory);
            }
        },

        isDraggedDirectory(directory) {
            return directory.path === this.draggedpath;
        },

        isDraggedOverDirectory(directory) {
            if (directory.path === this.draggedoverpath) {
                var draggedParendDir = this.getDirectoryParent(this.draggedpath);

                if (draggedParendDir === this.draggedoverpath) {
                    return false;
                }

                if (this.draggedpath === null) {
                    return false;
                }

                var isSubpath = this.draggedoverpath.indexOf(this.draggedpath + '/') === 0;
                return !isSubpath;
            }

            return false;
        },

        getDirectoryParent(path) {
            if (!path) {
                return path;
            }

            var segs = path.split('/');
            return segs.splice(0, segs.length - 1).join('/');
        }
    }
}
</script>
