<template>
  <div class="w-full h-full">
    <SplitterGroup direction="vertical">
      <SplitterPanel>
        <el-tabs
          v-model="activeTab"
          type="border-card"
          class="w-full h-full scanvas"
          @tab-remove="handleTabRemove"
        >
          <el-tab-pane label="界面设计" name="design" :closable="false">
            <SplitterGroup :direction="appStore.screenLayout">
              <SplitterPanel ref="screen1Ref" collapsible>
                <Stage
                  ref="stage1Ref"
                  v-if="projectStore.project?.screens[0]"
                  :key="projectStore.project.screens[0].id"
                  :screen="projectStore.project?.screens[0]"
                  :page="projectStore.openPages[0]"
                />
              </SplitterPanel>
              <SplitterResizeHandle
                class="bg-border"
                :class="appStore.screenLayout === 'vertical' ? 'h-2px' : 'w-2px'"
                v-if="projectStore.project?.meta.screenType === 'dual'"
              />
              <SplitterPanel
                ref="screen2Ref"
                v-if="projectStore.project?.meta.screenType === 'dual'"
                collapsible
              >
                <Stage
                  ref="stage2Ref"
                  :screen="projectStore.project?.screens[1]"
                  :key="projectStore.project.screens[1].id"
                  :page="projectStore.openPages[1]"
                />
              </SplitterPanel>
            </SplitterGroup>
          </el-tab-pane>
          <el-tab-pane
            v-for="item in tabPaneList"
            :key="item.name"
            :label="item.label"
            :name="item.name"
            closable
          >
            <div class="w-full">
              <component :is="item.component" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </SplitterPanel>
      <SplitterResizeHandle v-show="appStore.showComposite" class="bg-border h-2px" />
      <SplitterPanel v-show="appStore.showComposite" :default-size="30">
        <div class="w-full h-full relative">
          <Composite />
        </div>
      </SplitterPanel>
    </SplitterGroup>
  </div>
</template>

<script setup lang="ts">
import type { TabPaneName } from 'element-plus'

import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
import { useProjectStore } from '@/store/modules/project'
import { useAppStore } from '@/store/modules/app'
import { usePipeStore } from '@/store/modules/pipe'

import MonacoEditor from '@/components/MonacoEditor/index.vue'
import Stage from './stage/index.vue'
import Composite from './composite/index.vue'

type TabItem = {
  label: string
  name: string
  component: any
}

const projectStore = useProjectStore()
const appStore = useAppStore()
const pipeStore = usePipeStore()
// panel ref
const screen1Ref = ref<InstanceType<typeof SplitterPanel>>()
const screen2Ref = ref<InstanceType<typeof SplitterPanel>>()
// stage
const stage1Ref = ref<InstanceType<typeof Stage>>()
const stage2Ref = ref<InstanceType<typeof Stage>>()

const activeTab = ref<TabPaneName>('design')
let removePipeListener: (() => void) | undefined
// tab pane列表
const tabPaneList = shallowRef<TabItem[]>([
  {
    label: '文件代码',
    name: '111',
    component: MonacoEditor
  }
])
onMounted(() => {
  removePipeListener = window.electron.ipcRenderer.on(
    'pipe-event',
    (_event, data) => {
      pipeStore.append(data)
    }
  )

  window.electron.ipcRenderer.send('connect-pipe')
})

onUnmounted(() => {
  removePipeListener?.()
  removePipeListener = undefined
  window.electron.ipcRenderer.send('disconnect-pipe')
})

// 关闭tab
const handleTabRemove = (tabName: TabPaneName) => {
  tabPaneList.value = tabPaneList.value.filter((item) => item.name !== tabName)
  // 如果关闭的是当前激活前一个tab
  if (tabName === activeTab.value) {
    activeTab.value = tabPaneList.value.at(-1)?.name || 'design'
  }
}

/**
 * 监听当前最大化屏幕
 */
watch(
  () => projectStore.currentMaxScreen,
  (id) => {
    if (projectStore.project?.meta.screenType === 'dual' && id) {
      if (id === projectStore.project?.screens[0].id) {
        // 屏幕1最大化
        screen2Ref.value?.resize(0)
        setTimeout(() => {
          stage1Ref.value?.handleCenter()
        }, 0)
      } else {
        // 屏幕2最大化
        screen1Ref.value?.resize(0)
        setTimeout(() => {
          stage2Ref.value?.handleCenter()
        }, 0)
      }
    }
  }
)

/**
 * 屏幕布局切换
 * 修改屏幕大小
 * 重置页面位置大小
 */
watch(
  () => appStore.screenLayout,
  () => {
    if (projectStore.project?.meta.screenType === 'dual') {
      screen1Ref.value?.expand()
      screen2Ref.value?.expand()
      screen1Ref.value?.resize(50)
      screen2Ref.value?.resize(50)
      setTimeout(() => {
        stage1Ref.value?.handleCenter()
        stage2Ref.value?.handleCenter()
      }, 0)
    }
  }
)
</script>

<style scoped>
::v-deep(.el-tab-pane) {
  height: 100%;
  width: 100%;
}
::v-deep(.el-tabs__content) {
  padding: 0;
}
.el-tabs {
  background: var(--bg-primary);
}
/* ::v-deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  background: var(--bg-primary);
} */
</style>
