<template>
    <tree draggable
          cross-tree
          :data="sekcie"
          @change="onChange"
    >
        <div slot-scope="{data, store}">
            <template v-if="!data.isDragPlaceHolder">
                <b style="font-weight: bold; font-size: 1.3em; vertical-align: super;"
                   v-if="data.children && data.children.length"
                   @click="store.toggleOpen(data)"
                >
                    {{data.open ? '-' : '+'}}
                </b>
                <span class="ml-1">
                  <a class="text-truncate d-inline-block" :style="{maxWidth: 250 - (data._vm.level * 15) + 'px', minWidth: '60px'}" :href="data.link">
                    {{ data.nazov }}
                  </a>
                </span>
                <kontextove-menu :sekcia="data"
                                 @delete="odstranitSekciu"
                ></kontextove-menu>
            </template>
        </div>
    </tree>
</template>

<script>
  import KontextoveMenu from './components/KontextoveMenu'
  import { DraggableTree } from 'vue-draggable-nested-tree'

  export default {
    name: 'ZoznamComponent',
    components: {
      Tree: DraggableTree,
      KontextoveMenu,
    },
    props: {
      sekcie: {
        required: true,
        type: Array,
        default () {
          return []
        },
      },
    },
    data () {
      return {}
    },
    methods: {
      onChange(node) {
        const parent = node.parent;
        const children = parent.children;
        const index = children.indexOf(node);
        let moveType;
        let targetNode;
        let that = this

        if (children.length === 1) {
          moveType = 'append';
          targetNode = parent;
        } else if (index === 0) {
          moveType = 'before';
          targetNode = children[1];
        } else {
          moveType = 'after';
          targetNode = children[index - 1];
        }

        axios.patch(`/kategorie/${node.ucebnica.kategoria.hash_id}/ucebne-materialy/${node.ucebnica.hash_id}/sekcie/${node.hash_id}`, {
          typ: moveType,
          cielovaSekciaId: targetNode.id,
        }).then(() => {
          that.makeToast('Sekcia bola presunutá.', 'success', true)
        }).catch((error) => {
          that.makeToast(error.response.data.error, 'warning', true)
        });

        if (parent.isRoot) {
          this.$emit('change', this.mutableItems);
        }
      },
      odstranitSekciu(sekcia) {
        let that = this

        axios.delete(`/kategorie/${sekcia.ucebnica.kategoria.hash_id}/ucebne-materialy/${sekcia.ucebnica.hash_id}/sekcie/${sekcia.hash_id}`)
            .then((data) => {
              that.makeToast('Sekcia bola odstránená.', 'success', true)

              // presmerovanie na zoznam sekcii
              location.assign(`/vzdelavanie/sprava/kniznica/kategorie/${sekcia.ucebnica.kategoria.hash_id}/ucebny-material/${sekcia.ucebnica.hash_id}/sekcie`)
            })
            .catch((error) => {
              that.makeToast(error.response.data.message, 'warning', true)
            })
      },
      makeToast(sprava, variant = 'primary', pridat = false) {
        this.toastCount++
        this.$bvToast.toast(`${sprava}`, {
          title: 'Upozornenie',
          autoHideDelay: 5000,
          appendToast: pridat,
          solid: true,
          variant: variant,
        })
      },
    },
  }
</script>

<style scoped>

</style>