<template>
  <div class="flex justify-between" style="width: 100%">
    <div class="flex items-center justify-between w-200px">
      <div class="editor-brand">
        <el-image
          class="editor-brand__logo"
          :src="deepOilLogo" />
        <el-text
          class="editor-brand__title animate__animated animate__bounceIn animate__slow animate__1 animate__delay-0s"
          >DeepOil</el-text
        >
      </div>
      <el-button
        text
        circle
        size="small"
        @click="emits('update:leftAside', !headerPanelProps.leftAside)">
        <el-icon :size="20">
          <svg-analysis v-if="headerPanelProps.leftAside" name="menu-fold" />
          <svg-analysis v-else name="menu-unfold" />
        </el-icon>
      </el-button>
    </div>
    <div class="flex justify-between" style="width: calc(100% - 440px)">
      <div class="flex items-center">
        <el-button-group>
          <el-button
            text
            circle
            size="small"
            :disabled="!headerPanelProps.undoEnabled"
            @click="emits('onUndoClick')">
            <el-icon :title="`撤销 ${systemShortcutKey}+Z`" :size="20">
              <svg-analysis name="undo" />
            </el-icon>
          </el-button>
          <el-button
            text
            circle
            size="small"
            :disabled="!headerPanelProps.redoEnabled"
            @click="emits('onRedoClick')">
            <el-icon :title="`重做 ${systemShortcutKey}+Y`" :size="20">
              <svg-analysis name="redo" />
            </el-icon>
          </el-button>
        </el-button-group>
        <el-divider direction="vertical" />
        <el-button
          text
          circle
          size="small"
          :disabled="!headerPanelProps.deleteEnabled"
          @click="onDeleteClick">
          <el-icon title="删除 delete" :class="``" :size="20">
            <svg-analysis name="delete" />
          </el-icon>
        </el-button>
        <el-divider direction="vertical" />
        <el-button text circle size="small" @click="onTreeClick">
          <el-icon title="组件树" :size="20">
            <svg-analysis name="tree-list" />
          </el-icon>
        </el-button>
        <el-divider direction="vertical" />
        <el-button-group>
          <el-button text circle size="small" @click="onImportClick">
            <el-icon title="导入数据模型" :size="20">
              <svg-analysis name="import-json" />
            </el-icon>
          </el-button>
          <el-button text circle size="small" @click="onExportClick">
            <el-icon title="导出数据模型" :size="20">
              <svg-analysis name="export-json" />
            </el-icon> </el-button
        ></el-button-group>
        <el-divider direction="vertical" />
        <el-popover
          placement="bottom"
          :width="240"
          trigger="hover"
          :disabled="!headerPanelProps.alignEnabled">
          <template #reference>
            <el-button text circle size="small" :disabled="!headerPanelProps.alignEnabled">
              <el-icon title="对齐" :size="20">
                <svg-analysis name="align" />
              </el-icon>
            </el-button>
          </template>
          <div class="flex justify-center">
            <el-button-group>
              <el-button text circle size="small" @click="alignSelected('left')">
                <el-icon title="左对齐" :size="20">
                  <svg-analysis name="align-left" />
                </el-icon>
              </el-button>
              <el-button text circle size="small" @click="alignSelected('horizontally')">
                <el-icon title="水平居中" :size="20">
                  <svg-analysis name="align-horizontally" />
                </el-icon>
              </el-button>
              <el-button text circle size="small" @click="alignSelected('right')">
                <el-icon title="右对齐" :size="20">
                  <svg-analysis name="align-right" />
                </el-icon>
              </el-button>
              <el-button text circle size="small" @click="alignSelected('top')">
                <el-icon title="上对齐" :size="20">
                  <svg-analysis name="align-top" />
                </el-icon>
              </el-button>
              <el-button text circle size="small" @click="alignSelected('vertically')">
                <el-icon title="垂直居中" :size="20">
                  <svg-analysis name="align-vertical" />
                </el-icon>
              </el-button>
              <el-button text circle size="small" @click="alignSelected('bottom')">
                <el-icon title="下对齐" :size="20">
                  <svg-analysis name="align-bottom" />
                </el-icon>
              </el-button>
              <el-button text circle size="small" @click="alignSelected('horizontal-distribution')">
                <el-icon title="水平分布" :size="20">
                  <svg-analysis name="horizontal-distribution" />
                </el-icon>
              </el-button>
              <el-button text circle size="small" @click="alignSelected('vertical-distribution')">
                <el-icon title="垂直分布" :size="20">
                  <svg-analysis name="vertical-distribution" />
                </el-icon>
              </el-button>
            </el-button-group>
          </div>
        </el-popover>
        <el-divider direction="vertical" />
        <el-button-group>
          <el-button
            text
            circle
            size="small"
            :disabled="!headerPanelProps.groupEnabled"
            @click="onGroupClick">
            <el-icon title="组合" :size="20">
              <svg-analysis name="group" />
            </el-icon>
          </el-button>
          <el-button
            text
            circle
            size="small"
            :disabled="!headerPanelProps.unGroupEnabled"
            @click="onUngroupClick">
            <el-icon title="取消组合" :size="20">
              <svg-analysis name="ungroup" />
            </el-icon>
          </el-button>
        </el-button-group>
        <el-divider direction="vertical" v-if="!is_npm_env" />
        <el-button text circle size="small" @click="onDrawLineClick" v-if="!is_npm_env">
          <el-icon
            title="连线编辑模式"
            :size="20"
            :class="drawline_selected ? 'icon-selected' : ''">
            <svg-analysis name="pen-line" />
          </el-icon>
        </el-button>
      </div>
      <div class="flex justify-center items-center">
        <el-tag v-if="headerPanelProps.realTimeData.show" size="small">{{
          headerPanelProps.realTimeData.text
        }}</el-tag>
      </div>
      <div class="flex items-center mr-20px">
        <el-button text circle size="small" @click="emits('onReturnClick')">
          <el-icon title="返回" :size="20">
            <svg-analysis name="return" />
          </el-icon>
        </el-button>
        <el-divider direction="vertical" />
        <el-button
          text
          circle
          size="small"
          :loading="headerPanelProps.saveLoading"
          :disabled="headerPanelProps.saveLoading"
          @click="emits('onSaveClick')">
          <el-icon title="保存" :size="20">
            <svg-analysis name="save" />
          </el-icon>
        </el-button>
        <el-divider v-if="headerPanelProps.useThumbnail" direction="vertical" />
        <el-button
          v-if="headerPanelProps.useThumbnail"
          text
          circle
          size="small"
          @click="emits('onThumbnailClick')">
          <el-icon title="生成缩略图" :size="20">
            <svg-analysis name="thumbnail" />
          </el-icon>
        </el-button>
        <el-divider direction="vertical" />
        <el-button text circle size="small" @click="emits('onPreviewClick')">
          <el-icon title="预览" :size="20">
            <svg-analysis name="preview" />
          </el-icon>
        </el-button>
      </div>
    </div>
    <div class="flex items-center justify-between w-200px">
      <el-button
        text
        circle
        size="small"
        @click="emits('update:rightAside', !headerPanelProps.rightAside)">
        <el-icon :size="20" style="cursor: pointer">
          <svg-analysis v-if="headerPanelProps.rightAside" name="menu-unfold" />
          <svg-analysis v-else name="menu-fold" />
        </el-icon>
      </el-button>
      <div class="flex items-center">
        <el-button text circle size="small" @click="onHelpClick">
          <el-icon title="帮助" :size="20">
            <svg-analysis name="help" />
          </el-icon>
        </el-button>
        <el-button text circle size="small" @click="toggle">
          <el-icon title="全屏" :size="20">
            <svg-analysis :name="isFullscreen ? 'exit-full-screen' : 'full-screen'" />
          </el-icon>
        </el-button>
        <el-divider direction="vertical" />
        <el-button text circle size="small" @click="changeLockState">
          <el-icon :title="headerPanelProps.lockState ? '已锁定' : '已解锁'" :size="20">
            <svg-analysis :name="headerPanelProps.lockState ? 'lock' : 'unlock'" />
          </el-icon>
        </el-button>
        <el-divider direction="vertical" />
        <el-button text circle size="small" class="mr-10px">
          <el-icon
            :title="isDark ? '切换到日间模式' : '切换到夜间模式'"
            :size="20"
            @click="toggleDark()">
            <svg-analysis :name="isDark ? 'light' : 'dark'" />
          </el-icon>
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useDark, useToggle, useFullscreen } from '@vueuse/core'
import {
  ElIcon,
  ElDivider,
  ElPopover,
  ElButton,
  ElButtonGroup,
  ElImage,
  ElText,
  ElTag
} from 'element-plus'
import SvgAnalysis from '@/components/mt-edit/components/svg-analysis/index.vue'
import type { IRealTimeData } from '@/components/mt-edit/store/types'
import deepOilLogo from '@/assets/imgs/logo.png'
import { getSystemShortcutKeyName } from '@/components/mt-edit/utils'
import { ref } from 'vue'
type HeaderPanelProps = {
  leftAside: boolean
  rightAside: boolean
  selectedItemsId: string[] //已选中组件的id
  groupEnabled: boolean
  unGroupEnabled: boolean
  alignEnabled: boolean
  deleteEnabled: boolean
  lockState: boolean
  undoEnabled: boolean
  redoEnabled: boolean
  realTimeData: IRealTimeData
  useThumbnail?: boolean
  saveLoading?: boolean
}
const headerPanelProps = withDefaults(defineProps<HeaderPanelProps>(), {
  leftAside: true,
  rightAside: true,
  useThumbnail: false,
  saveLoading: false,
  selectedItemsId: () => []
})
const emits = defineEmits([
  'update:leftAside',
  'update:rightAside',
  'onGroupClick',
  'onUngroupClick',
  'onDeleteClick',
  'onExportClick',
  'onTreeClick',
  'alignSelected',
  'update:lockState',
  'onHelpClick',
  'onRedoClick',
  'onUndoClick',
  'onImportClick',
  'onPreviewClick',
  'onReturnClick',
  'onSaveClick',
  'onDrawLineClick',
  'onThumbnailClick'
])
const isDark = useDark({
  selector: '#mt-edit'
})
const { isFullscreen, toggle } = useFullscreen()
const toggleDark = useToggle(isDark)
const drawline_selected = ref(false)
const is_npm_env = ref(import.meta.env.MODE === 'npm')
const systemShortcutKey = getSystemShortcutKeyName()
const onGroupClick = () => {
  emits('onGroupClick')
}
const onUngroupClick = () => {
  emits('onUngroupClick')
}
const onDeleteClick = () => {
  emits('onDeleteClick')
}
const onExportClick = () => {
  emits('onExportClick')
}
const onTreeClick = () => {
  emits('onTreeClick')
}
const alignSelected = (
  type:
    | 'left'
    | 'horizontally'
    | 'right'
    | 'top'
    | 'vertically'
    | 'bottom'
    | 'horizontal-distribution'
    | 'vertical-distribution'
) => {
  emits('alignSelected', type)
}
const changeLockState = () => {
  emits('update:lockState', !headerPanelProps.lockState)
}
const onHelpClick = () => {
  emits('onHelpClick')
}
const onImportClick = () => {
  emits('onImportClick')
}
const onDrawLineClick = () => {
  drawline_selected.value = !drawline_selected.value
  emits('onDrawLineClick', drawline_selected.value)
}
</script>
<style scoped>
.editor-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding-left: 12px;
}

.editor-brand__logo {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(18, 120, 255, 0.16);
}

.editor-brand__title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: 0;
  line-height: 1;
}
</style>
<style scoped>
.icon-selected {
  color: #409eff;
  background-color: #ecf5ff;
}
</style>
