<script setup lang="ts">
import { getSceneById } from '@api/scene';
import { EditorService } from '@core/editor.service';
import { watch } from 'vue';
import { ref } from 'vue';
import { onMounted, provide, shallowRef } from 'vue';

const EDITOR_KEY = Symbol('editor-key');

type Props = {
  id: string;
};
const props = defineProps<Props>();

//#region 接口
const readScene = async () => {
  const res = await getSceneById(props.id);
  title.value = res?.label ?? '';
  editor.value?.load(res?.json, !editable.value);
};
//#endregion

const title = ref<string>('');
watch(
  () => props.id,
  () => readScene(),
  { immediate: true, flush: 'post' },
);

const container = shallowRef<HTMLDivElement>();
const editor = shallowRef<EditorService>();
provide(EDITOR_KEY, editor);
onMounted(() => {
  editor.value = new EditorService(container.value!);
});

const editable = ref<boolean>(false);
watch(editable, (v) => editor.value?.setState(v));

const current = ref<string>();
</script>

<template>
  <a-layout class="full">
    <a-layout-header class="p-16" style="height: 64px">
      <a-flex justify="space-between" align="center">
        <a-typography-text strong>{{ title }}</a-typography-text>
        <a-space align="center">
          <a-button v-if="editable" class="warning" @click="editable = false">
            <i class="icon exit size-18 mr-8" />
            <span>{{ $t('退出编辑器') }}</span>
          </a-button>
          <a-button v-else type="primary" @click="editable = true">
            <i class="icon edit size-18 mr-8" />
            <span>{{ $t('启用编辑器') }}</span>
          </a-button>
          <a-button>{{ $t('推送') }}</a-button>
          <a-button>{{ $t('导入') }}</a-button>
          <a-button>{{ $t('导出') }}</a-button>
        </a-space>
      </a-flex>
    </a-layout-header>

    <a-layout class="p-16">
      <a-layout-sider :width="320">
        <a-tabs class="full" type="card">
          <a-tab-pane key="1" :tab="$t('机器人')">
            <RobotGroups
              v-if="editor"
              :token="EDITOR_KEY"
              :editable="editable"
              :current="current"
              @change="current = $event"
            />
          </a-tab-pane>
          <a-tab-pane key="2" :tab="$t('库区')">Content of Tab Pane 2</a-tab-pane>
          <a-tab-pane key="3" :tab="$t('高级组')">Content of Tab Pane 3</a-tab-pane>
        </a-tabs>
      </a-layout-sider>
      <a-layout-content>
        <div ref="container" class="editor-container full"></div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<style scoped lang="scss">
.editor-container {
  background-color: transparent !important;
}
</style>
