<template>
  <div class="w-full h-full flex">
    <div class="w-50px h-full bg-bg-sidebar flex flex-col items-center justify-between shrink-0">
      <div class="w-full flex-1">
        <ul class="list-none p-0 m-0 text-12px text-text-secondary sidebar-menu">
          <li
            class="sidebar-menu-item border-l-1 border-l-solid border-l-transparent"
            v-for="item in sidebarMenu"
            :key="item.key"
            :class="
              activeMenu === item.key
                ? 'text-text-active border-l-1 border-l-solid border-l-text-active!'
                : ''
            "
            @click="activeMenu = item.key"
          >
            <el-tooltip
              :content="item.tooltip"
              :enterable="false"
              :focus-on-show="false"
              placement="right"
              trigger="hover"
            >
              <component :is="item.title" />
            </el-tooltip>
          </li>
        </ul>
      </div>
      <div class="w-full flex flex-col">
        <ul class="list-none p-0 m-0 text-12px text-text-secondary">
          <li class="sidebar-menu-item">
            <el-popover placement="right" v-model:visible="showFunctionMenu" trigger="click">
              <template #reference>
                <span>{{ t('functions') }}</span>
              </template>
              <div class="text-12px" @click="showFunctionMenu = false">
                <div
                  class="leading-24px px-12px cursor-pointer hover:bg-accent-blue"
                  @click="handleLanguageSetting"
                >
                  {{ t('multiLanguage') }}
                </div>
                <div
                  class="leading-24px px-12px cursor-pointer hover:bg-accent-blue"
                  @click="handleThemeSetting"
                >
                  {{ t('theme') }}
                </div>
              </div>
            </el-popover>
          </li>
          <li class="sidebar-menu-item h-32px!" @click="toggleShowEvent">
            <el-tooltip
              :content="t('event')"
              :enterable="false"
              :focus-on-show="false"
              placement="right"
              trigger="hover"
            >
              <span
                :class="{
                  'text-text-active':
                    appStore.showComposite && appStore.compositeTabAcitve === 'event'
                }"
                >{{ t('event') }}</span
              >
            </el-tooltip>
          </li>
          <li class="sidebar-menu-item h-32px!" @click="toggleShowLog">
            <el-tooltip
              :content="t('log')"
              :enterable="false"
              :focus-on-show="false"
              placement="right"
              trigger="hover"
            >
              <span
                :class="{
                  'text-text-active':
                    appStore.showComposite && appStore.compositeTabAcitve === 'log'
                }"
                >{{ t('log') }}</span
              >
            </el-tooltip>
          </li>
          <li class="sidebar-menu-item">
            <el-popover placement="right" v-model:visible="showPopoverMenu" trigger="click">
              <template #reference>
                <span><LuSettings2 /></span>
              </template>
              <div class="text-12px" @click="showPopoverMenu = false">
                <div
                  class="leading-24px px-12px cursor-pointer hover:bg-accent-blue"
                  @click="handleProjectSetting"
                >
                  {{ t('projectSetting') }}
                </div>
                <div
                  class="leading-24px px-12px cursor-pointer hover:bg-accent-blue"
                  @click="appStore.showGeneralModal = true"
                >
                  {{ t('generalSetting') }}
                </div>
              </div>
            </el-popover>
          </li>
        </ul>
      </div>
    </div>
    <div class="flex-1 overflow-hidden" v-show="activeMenu === 'widget'">
      <SplitterCollapse>
        <SplitterCollapseItem :title="t('widget')">
          <Libary />
        </SplitterCollapseItem>
        <SplitterCollapseItem :title="t('hierarchy')">
          <Hierarchy />
        </SplitterCollapseItem>
      </SplitterCollapse>
    </div>
    <div class="flex-1 overflow-hidden" v-show="activeMenu === 'resource'">
      <Resource />
    </div>
    <div class="flex-1 overflow-hidden" v-show="activeMenu === 'code'">
      <Method />
    </div>
    <div class="flex-1 overflow-auto" v-show="activeMenu === 'json'">
      <Schema />
    </div>
  </div>
  <GeneralSettingModal />
  <ProjectSettingModal ref="projectSettingModalRef" init-hide />
  <LanguageModal ref="langModalRef" />
  <ThemeModal ref="themeModalRef" />
</template>

<script setup lang="ts">
import { ref, h, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/store/modules/app'

import { SplitterCollapse, SplitterCollapseItem } from '@/components/SplitterCollapse'
import { LuBoxes, LuSettings2, LuInbox, LuCode2 } from 'vue-icons-plus/lu'
import Hierarchy from './Hierarchy.vue'
import Libary from './Libary.vue'
import Schema from './Schema.vue'
import Resource from './Resource.vue'
import Method from './Method.vue'
import GeneralSettingModal from '../modals/settingModal/GeneralSettingModal.vue'
import ProjectSettingModal from '../modals/projectModal/index.vue'
import LanguageModal from './components/LanguageModal.vue'
import ThemeModal from './components/ThemeModal.vue'

const { t } = useI18n()

const sidebarMenu = computed(() => {
  return (
    appStore.lang && [
      {
        key: 'widget',
        title: h('span', null, h(LuBoxes)),
        tooltip: t('widgetLibrary')
      },
      {
        key: 'resource',
        title: h('span', null, h(LuInbox)),
        tooltip: t('resourceManager')
      },
      {
        key: 'code',
        title: h('span', null, h(LuCode2)),
        tooltip: t('codeView')
      },
      {
        key: 'json',
        title: h('span', null, 'JSON'),
        tooltip: t('projectJSON')
      }
    ]
  )
})

const activeMenu = ref('widget')
const appStore = useAppStore()
const showPopoverMenu = ref(false)
const showFunctionMenu = ref(false)
const projectSettingModalRef = ref<InstanceType<typeof ProjectSettingModal>>()
const langModalRef = ref<InstanceType<typeof LanguageModal>>()
const themeModalRef = ref<InstanceType<typeof ThemeModal>>()

const handleProjectSetting = () => {
  projectSettingModalRef.value?.edit()
}

const handleLanguageSetting = () => {
  langModalRef.value?.open()
}

const handleThemeSetting = () => {
  themeModalRef.value?.open()
}

const toggleShowEvent = () => {
  appStore.showComposite = true
  appStore.compositeTabAcitve = 'event'
}

const toggleShowLog = () => {
  appStore.showComposite = true
  appStore.compositeTabAcitve = 'log'
}
</script>

<style scoped lang="less">
:deep(*) {
  .el-collapse-icon-position-right .el-collapse-item__header {
    padding: 0 12px;
    box-sizing: border-box;
  }
  .el-menu-item {
    padding: 0;
    height: 32px;
  }
  .el-popper {
    padding: 4px 12px;
  }
}
.sidebar-menu-item {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  &:hover {
    color: var(--text-primary);
  }
}
</style>
