<template>
  <div>
    <bpmn-editor-component :schema="template" :model="model" v-if="!loading">
      <template>
        <q-btn
          padding="xs"
          class="text-grey-7 q-mr-md"
          color="grey-3"
          icon="arrow_back"
          @click="goBack"
        />

        <div class="title text-h6 text-grey-10">{{ model.name }}</div>
      </template>
    </bpmn-editor-component>

    <q-inner-loading :showing="loading">
      <q-spinner-gears color="primary" size="50px" />
    </q-inner-loading>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import BpmnEditorComponent from '@components/cards/processes/BpmnEditorComponent.vue';
import { BaseCardCommon } from '@/interfaces';
import { fetchAttachment } from '@services/registry-service';
import { ProcessApi, Process } from '@openapi/registry-service';

const processApi = new ProcessApi();

@Component({
  components: {
    BpmnEditorComponent,
  },
})
export default class ProcessEditorEditorComponent extends Vue {
  @Prop() common!: BaseCardCommon;

  model: Process | null = null;

  loading = false;

  template = '';

  created() {
    this.init();
  }

  private async init() {
    this.loading = true;
    if (this.common.id) {
      ({ data: this.model } = await processApi.getProcess(this.common.id));
    }

    if (this.model?.id) {
      fetchAttachment(
        'Process',
        this.model.id,
        `${this.model?.name}.bpmn`,
        false
      )
        .then((data) => {
          this.template = data;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }

  private goBack(): void {
    this.$router.push({
      name: 'cards',
      params: {
        id: this.serviceId,
        path: 'additional-settings',
      },
      query: {
        active: 'processes',
        components: this.$store.getters[
          'cardComponents/additionalSettings/components'
        ],
      },
    });
  }

  private get serviceId(): string {
    return this.$route.query?.service?.toString() || '';
  }
}
</script>
