<template>
  <q-page class="items-stretch row">
    <q-splitter v-model="splitter" class="col" :limits="[50, 80]">
      <template #before>
        <input
          v-show="false"
          ref="import"
          accept=".bpmn"
          type="file"
          @change="(e) => loadTextFromFile(e)"
        />
        <a v-show="false" ref="export" />
        <div ref="container" class="full-height" />
        <q-btn
          class="absolute-top-right q-ma-md"
          color="primary"
          icon="settings"
          round
        >
          <q-menu
            v-model="menu"
            anchor="top left"
            self="top right"
            transition-show="scale"
            transition-hide="scale"
            :offset="[20, 0]"
          >
            <q-list>
              <q-item clickable>
                <q-item-section>
                  <q-item-label>
                    {{ $t('processes.bpmnEditor.import.label') }}...
                  </q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-icon name="keyboard_arrow_right" />
                </q-item-section>
                <q-menu anchor="top right" auto-close self="top left">
                  <q-list>
                    <q-item clickable @click="importHandler('device')">
                      <q-item-section>
                        <q-item-label>
                          {{ $t('processes.bpmnEditor.import.byDevice') }}
                        </q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item clickable @click="importHandler('cloud')">
                      <q-item-section>
                        <q-item-label>
                          {{ $t('processes.bpmnEditor.import.byCloud') }}
                        </q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-item>
              <q-item clickable @click="createHandler">
                <q-item-section>
                  <q-item-label>
                    {{ $t('processes.bpmnEditor.create') }}
                  </q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable>
                <q-item-section>
                  <q-item-label>
                    {{ $t('processes.bpmnEditor.export.label') }}...
                  </q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-icon name="keyboard_arrow_right" />
                </q-item-section>
                <q-menu anchor="top right" auto-close self="top left">
                  <q-list>
                    <q-item clickable @click="exportHandler('device')">
                      <q-item-section>
                        <q-item-label>
                          {{ $t('processes.bpmnEditor.export.toDevice.label') }}
                        </q-item-label>
                      </q-item-section>
                    </q-item>
                    <q-item clickable @click="exportHandler('cloud')">
                      <q-item-section>
                        <q-item-label>
                          {{ $t('processes.bpmnEditor.export.toCloud.label') }}
                        </q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
        <BaseBpmnCloudLoader
          :show.sync="cloud.dialog"
          value-mode="string"
          @getBpmn="bpmnSchemaUploadHandler"
        />
      </template>
      <template #separator>
        <q-avatar
          color="primary"
          icon="drag_indicator"
          size="24px"
          text-color="white"
        />
      </template>
      <template #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>
</template>

<script lang="ts" src="./index.ts"></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>
