<template>
  <div>
    <div
      class="flex items-center bg-white q-pa-md q-mt-md q-mx-md rounded-borders"
    >
      <slot />
      <div class="q-ml-auto">
        <q-btn
          v-if="model"
          @click="saveComponent"
          label="Cохранить"
          unelevated
          color="primary"
        />
      </div>
    </div>

    <div class="bg-white q-mt-md q-mx-md rounded-borders">
      <q-page class="items-stretch row">
        <q-splitter class="col" v-model="splitter" :limits="[50, 80]">
          <template v-slot:before>
            <a ref="export" v-show="false" />
            <div class="full-height" ref="container" />
          </template>
          <template v-slot:separator>
            <q-avatar
              color="primary"
              icon="drag_indicator"
              size="24px"
              text-color="white"
            />
          </template>
          <template v-slot:after>
            <q-scroll-area class="fit">
              <div ref="properties" />
            </q-scroll-area>
          </template>
        </q-splitter>
        <q-inner-loading style="z-index: 1" :showing="cloud.loading">
          <q-spinner-gears color="primary" size="50px" />
        </q-inner-loading>
      </q-page>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, PropSync, Watch } from 'vue-property-decorator';
import BpmnComponent from '@components/processes/editor/components/bpmn';
import {
  updateAttachment,
} from '@services/registry-service';
import { Process } from '@openapi/registry-service';
import isEmpty from 'lodash/isEmpty';
import { uploadBPMN } from '@services/wf';
import { notifyError, notifySuccess } from '@utils/notify';

@Component({})
export default class BpmnEditorComponent extends BpmnComponent {
  @PropSync('schema') bpmnSchema: string;
  @Prop() model?: Process;

  $refs!: {
    properties: HTMLElement;
  };

  protected selectHandler(): void {
    this.clear().then(() => {
      this.importXML(this.bpmnSchema);
    });
  }

  private saveComponent() {
    const invalidField = this.$refs?.properties?.querySelector(
      '.invalid:not(.bpp-hidden)'
    );
    if (invalidField) {
      notifyError(this.$t('validation.basic.formErrors').toString());
      return;
    }
    this.saveXML().then(async (xml) => {
      if (!this.model || !this.model.schema) return;
      const blob: Blob = new Blob([xml], {
        type: 'text/xml',
      });
      const file: File = new File([blob], `${this.model?.name}.bpmn`);
      await updateAttachment(this.model.schema, this.model.id, '', [file]);
      await uploadBPMN(file);

      this.$emit('save', file);

      notifySuccess('Процесс успешно сохранен');
    });
  }

  @Watch('bpmnSchema')
  private updateShema(val: string, oldVal: string): void {
    if (val === oldVal) return;
    if (isEmpty(val)) {
      this.createDiagram();
    } else {
      this.selectHandler();
    }
  }
}
</script>

<style scoped>
@import '~bpmn-js/dist/assets/diagram-js.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
@import '~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';

.q-splitter__panel {
  height: inherit;
}
</style>