<template>
  <ElConfigProvider :locale="zhCn">
    <el-container class="vtj-layout">
      <el-header class="vtj-layout__header" height="32px">
        <Brand ref="brand"></Brand>
        <Toolbar ref="toolbar"></Toolbar>
        <Action ref="action"></Action>
      </el-header>
      <el-container class="vtj-layout__wrapper">
        <el-aside
          v-resizable="{ handles: 'e' }"
          class="vtj-layout__left"
          :class="{ 'is-collapsed': leftCollapsed }"
          width="400px">
          <Apps ref="apps"></Apps>
        </el-aside>
        <el-main class="vtj-layout__main">
          <Workspace ref="workspace"></Workspace>
        </el-main>
        <el-aside
          v-if="showSetting"
          v-resizable="{ handles: 'w' }"
          class="vtj-layout__right"
          width="350px">
          <Setting ref="setting"></Setting>
        </el-aside>
      </el-container>
      <el-footer class="vtj-layout__footer" height="20px">
        <Status ref="status"></Status>
      </el-footer>
    </el-container>
  </ElConfigProvider>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import {
  ElContainer,
  ElHeader,
  ElAside,
  ElMain,
  ElFooter,
  ElConfigProvider
} from 'element-plus';
import zhCn from 'element-plus/lib/locale/lang/zh-CN';
import {
  EVENT_SKELETON_LEFT_COLLAPSED_CHANGE,
  EVENT_DESIGNER_ACTIVE_CHANGE
} from '../../core';
import { Resizable as vResizable } from '../../utils';
import Brand from '../regions/Brand.vue';
import Toolbar from '../regions/Toolbar.vue';
import Action from '../regions/Action.vue';
import Status from '../regions/Status.vue';
import Setting from '../regions/Setting.vue';
import Workspace from '../regions/Workspace.vue';
import Apps from '../regions/Apps.vue';
import useCore from '../hooks/useCore';

const brand = ref(null);
const toolbar = ref(null);
const action = ref(null);
const status = ref(null);
const setting = ref(null);
const workspace = ref(null);
const apps = ref(null);
const leftCollapsed = ref(true);

const { engine, project, isDesignerActive, emitter } = useCore();

const { skeleton } = engine || {};

const showSetting = computed(() => {
  return !!project.current && isDesignerActive.value;
});

onMounted(() => {
  if (skeleton) {
    skeleton.regions.brand = brand.value as any;
    skeleton.regions.toolbar = toolbar.value as any;
    skeleton.regions.action = action.value as any;
    skeleton.regions.status = status.value as any;
    skeleton.regions.setting = setting.value as any;
    skeleton.regions.workspace = workspace.value as any;
    skeleton.regions.apps = apps.value as any;
  }
});

function setLeftCollapsed(collapsed: boolean) {
  leftCollapsed.value = collapsed;
}

emitter.on(EVENT_SKELETON_LEFT_COLLAPSED_CHANGE, (collasped) => {
  setLeftCollapsed(!collasped);
});

emitter.on(EVENT_DESIGNER_ACTIVE_CHANGE, (v) => {
  isDesignerActive.value = v as boolean;
});
</script>
