<template>
  <ui-overlay-editor class="pages-recyclebin-actions">
    <template v-slot:header>
      <ui-header-bar :title="model.name" :back-button="false" :close-button="true" />
    </template>
    <template v-slot:footer>
      <ui-button type="light onbg" label="@ui.close" @click="config.hide"></ui-button>
    </template>

    <button class="pages-recyclebin-action" @click="restore(false)">
      <span class="pages-recyclebin-action-icon">
        <ui-icon symbol="fth-rotate-ccw"></ui-icon>
      </span>
      <p class="pages-recyclebin-action-text">
        <strong>Restore page</strong>
        <span>Moves this page back into the page tree.</span>
      </p>
    </button>

    <button class="pages-recyclebin-action" v-if="model.operationId" @click="restore(true)">
      <span class="pages-recyclebin-action-icon">
        <ui-icon symbol="fth-zap"></ui-icon>
      </span>
      <p class="pages-recyclebin-action-text">
        <strong>Undo operation</strong>
        <span>Restores all {{operationCount}} pages from the affected operation.</span>
      </p>
    </button>

    <button class="pages-recyclebin-action">
      <span class="pages-recyclebin-action-icon is-negative">
        <ui-icon symbol="fth-trash"></ui-icon>
      </span>
      <p class="pages-recyclebin-action-text">
        <strong>Delete page...</strong>
        <span>Remove this recycled page forever.</span>
      </p>
    </button>
  </ui-overlay-editor>
</template>


<script>
  import RecycleBinApi from 'zero/api/recycle-bin.js'
  import PagesApi from 'zero/api/pages.js';

  export default {

    props: {
      isCopy: {
        type: Boolean,
        default: false
      },
      model: Object,
      config: Object
    },

    data: () => ({
      state: 'default',
      operationCount: 0
    }),


    mounted()
    {
      RecycleBinApi.getCountByOperation(this.model.operationId).then(count =>
      {
        this.operationCount = count;
      });
    },


    methods: {

      restore(includeDescendants)
      {
        this.state = 'loading';

        PagesApi.restore(this.model.id, includeDescendants).then(res =>
        {
          if (res.success)
          {
            this.state = 'success';
            this.config.confirm(res.model);
          }
          else
          {
            this.state = 'error';
          }
        });
      },

      delete()
      {
        this.state = 'loading';

        RecycleBinApi.delete(this.model.id).then(res =>
        {
          if (res.success)
          {
            this.state = 'success';
            res.model.deleted = true;
            this.config.confirm(res.model);
          }
          else
          {
            this.state = 'error';
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  .pages-recyclebin-action
  {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--padding);
    align-items: center;
    width: 100%;
    background: var(--color-box);
    box-shadow: var(--shadow-short);
    border-radius: var(--radius);
    padding: 16px;

    & + .pages-recyclebin-action
    {
      margin-top: 16px;
    }
  }

  .pages-recyclebin-action-text
  {
    margin: 16px 0;
    line-height: 1.5;

    strong
    {
      display: block;
      margin-bottom: 5px;
    }

    span
    {
      color: var(--color-text-dim);
    }
  }

  .pages-recyclebin-action-icon
  {
    margin-right: -6px;
    align-self: stretch;
    background: var(--color-box-nested);
    padding: 10px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius);
    color: var(--color-text);

    &.is-negative
    {
      color: var(--color-accent-error);
    }
  }

  .pages-recyclebin-actions content
  {
    padding-top: 0;
  }
</style>