<template>
  <div class="w-full h-full overflow-hidden flex flex-col">
    <ViewTitle title="Schema" />
    <div class="w-full flex-1 overflow-hidden">
      <MonacoEditor
        ref="editorRef"
        value-format="json"
        :config="{ minimap: { enabled: true } }"
        :allow-fullscreen="false"
        read-only
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import MonacoEditor from '@/components/MonacoEditor/index.vue'
import { useProjectStore } from '@/store/modules/project'
import ViewTitle from '@/components/ViewTitle/index.vue'

const projectStore = useProjectStore()
const editorRef = ref<InstanceType<typeof MonacoEditor>>()

watch(
  () => projectStore.project,
  () => {
    editorRef.value?.setValue(JSON.stringify(projectStore.project, null, 2))
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<style scoped></style>
