﻿<template>
  <ui-overlay-editor class="pages-move">
    <template v-slot:header>
      <ui-header-bar title="@ui.move.title" :back-button="false" :close-button="true" />
    </template>
    <template v-slot:footer>
      <ui-button type="light onbg" label="@ui.close" @click="config.hide" />
      <ui-button type="primary" label="@ui.move.action" @click="onSave" :state="state" />
    </template>

    <p class="pages-move-text" v-localize:html="{ key: '@ui.move.text', tokens: { name: model.name } }"></p>
    <div class="ui-box pages-move-items">
      <ui-tree ref="tree" :get="getItems" @select="onSelect" />
    </div>
  </ui-overlay-editor>
</template>


<script>
  import MediaFolderApi from 'zero/api/media-folder.js';
  import MediaApi from 'zero/api/media.js';
  import Notification from 'zero/helpers/notification.js'

  export default {

    props: {
      model: Object,
      config: Object
    },

    data: () => ({
      items: [],
      selected: null,
      state: 'default',
      cache: {},
      prevItem: null,
      selected: null
    }),


    mounted()
    {
      this.selected = this.model;
    },


    methods: {

      onSelect(item)
      {
        item.isSelected = true;

        if (this.prevItem && this.prevItem.id != item.id)
        {
          this.prevItem.isSelected = false;
        }

        this.prevItem = item;
        this.selected = item;
        //this.config.confirm(item);
      },

      getItems(parent)
      {
        const key = !parent ? '__root' : parent;

        if (this.cache[key])
        {
          return Promise.resolve(this.cache[key]);
        }

        return MediaFolderApi.getAllAsTree(parent).then(response =>
        {
          if (!parent)
          {
            response.splice(0, 0, {
              id: null,
              parentId: null,
              sort: 0,
              name: '@page.root',
              icon: 'fth-arrow-down-circle',
              isOpen: false,
              modifier:	null,
              hasChildren: false,
              childCount: 0,
              isInactive: false,
              hasActions: false
            });
          }

          response.forEach(item =>
          {
            //item.disabled = true;
            item.isSelected = this.model.parentId == item.id;

            if (item.isSelected)
            {
              this.prevItem = item;
            }
            item.disabled = item.id === 'recyclebin' || item.id == this.model.id;
            item.hasActions = false;
          });

          this.cache[key] = response;
          return response;
        });
      },

      onSave()
      {
        if (this.model.parentId == this.selected.id)
        {
          this.config.close();
          return;
        }

        this.state = 'loading';

        (this.config.isFolder ? MediaFolderApi : MediaApi).move(this.model.id, this.selected.id).then(res =>
        {
          if (res.success)
          {
            this.state = 'success';
            this.config.confirm(res.model);
          }
          else
          {
            this.state = 'error';
            Notification.error(res.errors[0].message);
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  .pages-move .ui-box
  {
    margin: 0;
    padding: 16px 0;

    .ui-tree-item.is-disabled
    {
      opacity: .5;
    }

    .ui-tree-item.is-selected, .ui-tree-item:hover:not(.is-disabled)
    {
      background: var(--color-tree-selected);
    }

    .ui-tree-item.is-selected
    {
      &:after
      {
        font-family: "Feather";
        content: "\e83e";
        font-size: 16px;
        color: var(--color-primary);
      }
      
      .ui-tree-item-text
      {
        font-weight: bold;
      }
    }
  }

  .pages-move content
  {
    padding-top: 0;
  }

  .pages-move-text
  {
    margin: 0 0 20px;
  }
</style>