
<template>
  <div class="fotkipress-directory-tree">
    <directory-sub-tree :path="path"
                        :directories="directoryTree"
                        :visibledirectories="visibleDirectoryTreePaths"
                        :ontoggle="toggleDirectoryTree"
                        :dragstart="directoryDragStart"
                        :dragover="directoryDragOver"
                        :dragend="directoryDragEnd"
                        :drop="directoryDrop"
                        :draggedpath="draggedSrcFilePath"
                        :draggedoverpath="draggedDstFilePath"/>
  </div>
</template>


<script>
import {mapGetters} from 'vuex';

import API from './../../api';


export default {
    props: {
        path: {
            type: String,
            required: true
        }
    },

    data() {
        return {
            directories: [],
            visibledirectories: []
        }
    },

    computed: mapGetters({
        directoryTree: 'directoryTree',
        visibleDirectoryTreePaths: 'visibleDirectoryTreePaths',

        draggedSrcFilePath: 'draggedSrcFilePath',
        draggedDstFilePath: 'draggedDstFilePath'
    }),

    created() {
        this.getDirectoryTree('');
    },

    methods: {
        getDirectoryTree(path) {
            this.$store.dispatch('getDirectoryTree', {path});
        },

        updateDirectoryTree(path) {
            this.$store.dispatch('updateDirectoryTree', {path});
        },

        toggleDirectoryTree(path) {
            this.$store.dispatch('toggleDirectoryTree', {path});
        },

        /* --- */

        directoryDragStart(directory) {
            this.$store.dispatch('setDraggedSrcFilePath', {path: directory.path});
        },

        directoryDragOver(directory) {
            this.$store.dispatch('setDraggedDstFilePath', {path: directory.path});
        },

        directoryDragEnd() {
            this.$store.dispatch('unsetDraggedSrcFilePath');
            this.$store.dispatch('unsetDraggedDstFilePath');
        },

        directoryDrop(directory) {
            if (this.draggedSrcFilePath === null || this.draggedDstFilePath === null) {
                return;
            }

            var dirSource = this.draggedSrcFilePath;
            var parentDirSource = this.getDirectoryParent(dirSource);
            var dirDestination = directory.path;
            var parentDirDestination = this.getDirectoryParent(dirDestination);

            if (this.path === dirSource || this.path.indexOf(dirSource + '/') === 0) {
                if (dirDestination === '') {
                    this.$router.push('/');
                } else {
                    if (dirDestination.indexOf('/') === 0) {
                        this.$router.push('/browser' + dirDestination);
                    } else {
                        this.$router.push('/browser/' + dirDestination);
                    }
                }
            }

            this.$store.dispatch('moveDirectoryTreeFile', {dirSource, dirDestination}).then((file) => {
                this.$store.dispatch('updateDirectoryTree', {path: dirDestination});
                this.$store.dispatch('handleFileChanges', {dirSource, dirDestination, file});
            }).catch((errors) => {
                if (this.path === dirSource) {
                    this.$router.push('/');
                }

                this.$store.dispatch('setTempErrors', {errors});
            });
        },

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