<template>
  <div class="w-full h-full text-textPrimary">
    <div class="h-full flex flex-col">
      <div class="p-0! border-b-1px border-b-solid border-b-border">
        <Tools />
      </div>
      <div class="flex-1 bg-bg-primary p-0!">
        <SplitterGroup direction="horizontal">
          <SplitterPanel :default-size="20">
            <Sidebar />
          </SplitterPanel>
          <SplitterResizeHandle class="w-2px bg-border" />
          <SplitterPanel :minSize="20">
            <Workspace />
          </SplitterPanel>
          <SplitterResizeHandle class="w-2px bg-border" />
          <SplitterPanel :minSize="14" :default-size="20">
            <Config />
          </SplitterPanel>
        </SplitterGroup>
      </div>
      <!-- <Info></Info> -->
    </div>
  </div>
  <ProjectModal ref="projectModel" />
  <CreateComponentModal />
</template>

<script setup lang="ts">
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
import Tools from './tools/index.vue'
import Sidebar from './sidebar/index.vue'
import Workspace from './workspace/index.vue'
import Config from './config/index.vue'
// import Info from './info/index.vue'
import ProjectModal from './modals/projectModal/index.vue'
import CreateComponentModal from './modals/createComponentModal/index.vue'
import { ref, provide } from 'vue'

const projectModel = ref<InstanceType<typeof ProjectModal>>()

const handleMenuClick = (menuKey: string) => {
  switch (menuKey) {
    case 'new':
      projectModel.value?.create()
  }
}

provide('onMenuClick', handleMenuClick)
</script>

<style lang="less" scoped></style>
