<template>
  <fragment>
    <portal to="header">
      <h2>
        Delete
        <strong>
          {{ schemaName }}
        </strong>
      </h2>
    </portal>

    <div class="delete-document-page el-loading-parent__min-height">
      <el-card>
        <template slot="header">
          <h3>Are you sure you want to delete {{ schemaName }}?</h3>
        </template>
        <div class="dockite-document--detail">
          <p class="dockite-text--subtitle">
            You won't be able to recover this Schema later on and all corresponding documents will
            be deleted too.
          </p>
        </div>
        <el-row type="flex" justify="space-between">
          <el-button @click.prevent="$router.go(-1)">
            Cancel
          </el-button>
          <el-button
            v-if="$can('internal:schema:delete')"
            :disabled="loading > 0"
            type="danger"
            @click.prevent="handleDeleteSchema"
          >
            Delete
          </el-button>
        </el-row>
      </el-card>
    </div>
  </fragment>
</template>

<script lang="ts">
// import { Document } from '@dockite/database';
import { Component, Vue, Watch } from 'nuxt-property-decorator';
import { Fragment } from 'vue-fragment';

import * as data from '~/store/data';
import * as schema from '~/store/schema';

@Component({
  components: {
    Fragment,
  },
})
export default class DeleteSchemaPage extends Vue {
  public loading = 0;

  get schemaName(): string {
    return this.$store.getters[`${data.namespace}/getSchemaNameById`](this.schemaId);
  }

  get schemaId(): string {
    return this.$route.params.id;
  }

  public async fetchSchemaById(force = false): Promise<void> {
    try {
      this.loading += 1;

      await this.$store.dispatch(`${data.namespace}/fetchSchemaWithFieldsById`, {
        id: this.schemaId,
        force,
      });
    } catch (_) {
      this.$message({
        message: 'Unable to fetch schema: ' + this.schemaId,
        type: 'error',
      });
    } finally {
      this.$nextTick(() => {
        this.loading -= 1;
      });
    }
  }

  public async handleDeleteSchema(): Promise<void> {
    try {
      this.loading += 1;

      await this.$store.dispatch(`${schema.namespace}/deleteSchema`, this.schemaId);

      this.$message({
        message: 'Schema deleted successfully',
        type: 'success',
      });

      this.$router.push('/schemas');
    } catch (_) {
      this.$message({
        message: 'Unable to delete schema, please try again later.',
        type: 'error',
      });
    } finally {
      this.$nextTick(() => {
        this.loading -= 1;
      });
    }
  }

  @Watch('schemaId', { immediate: true })
  handleSchemaIdChange(): void {
    this.fetchSchemaById();
  }
}
</script>

<style lang="scss">
.dockite-element--pagination {
  /* background: #ffffff; */
  background: transparent;

  li {
    background: transparent;
  }

  button {
    background: transparent;
  }
}

.dockite-document--detail {
  padding-bottom: 1.5rem;
}
</style>
