<template>
  <div class="tiny-engine-toolbar">
    <div class="toolbar-left">
      <tiny-popover
        v-if="workspaceRegistry.length"
        :visible-arrow="false"
        trigger="hover"
        placement="bottom-start"
        popper-class="center-popover"
      >
        <template #reference>
          <div class="app-center-icon">
            <svg-icon name="workspace-menu"></svg-icon>
          </div>
        </template>
        <div class="app-center-item">
          <span v-for="node in workspaceRegistry" :key="node.id" @click="$emit('openWorkspace', node.id)">{{
            node.title
          }}</span>
        </div>
      </tiny-popover>
      <component
        :is="getMergeMeta(comp)?.entry"
        v-for="comp in toolbars.left"
        :key="comp"
        :options="getMergeMeta(comp)?.options"
      ></component>
    </div>
    <div class="toolbar-center">
      <component
        :is="getMergeMeta(comp)?.entry"
        v-for="comp in toolbars.center"
        :key="comp"
        :options="getMergeMeta(comp)?.options"
      ></component>
    </div>
    <div class="toolbar-right">
      <div class="toolbar-right-content">
        <div class="toolbar-right-item" v-for="(item, idx) in toolbars.right" :key="idx">
          <div v-if="typeof item === 'string'">
            <component
              :is="getMergeMeta(item)?.entry"
              :options="getMergeMeta(item)?.options"
              position="right"
            ></component>
          </div>
          <div class="toolbar-right-item-arr" v-if="Array.isArray(item)">
            <div class="toolbar-right-item-comp" v-for="comp in item" :key="comp">
              <component
                :is="getMergeMeta(comp)?.entry"
                :options="getMergeMeta(comp)?.options"
                position="right"
              ></component>
            </div>
            <span class="toolbar-right-line" v-if="layoutRegistry.options?.isShowLine">|</span>
          </div>
        </div>
      </div>
      <toolbar-collapse
        :collapseBar="toolbars.collapse"
        v-if="layoutRegistry.options?.isShowCollapse"
      ></toolbar-collapse>
      <div class="toolbar-right-setting">
        <div class="toolbar-right-item" v-for="(item, idx) in toolbars.setting" :key="idx">
          <div class="toolbar-right-item-arr" v-if="Array.isArray(item)">
            <div class="toolbar-right-item-comp" v-for="comp in item" :key="comp">
              <component
                :is="getMergeMeta(comp)?.entry"
                :options="getMergeMeta(comp)?.options"
                position="right"
              ></component>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/* metaService: engine.layout.DesignToolbars */
import { computed } from 'vue'
import { Popover } from '@opentiny/vue'
import { getMergeMeta, useLayout } from '@opentiny/tiny-engine-meta-register'
import ToolbarCollapse from './ToolbarCollapse.vue'

export default {
  components: {
    ToolbarCollapse,
    TinyPopover: Popover
  },
  props: {
    layoutRegistry: {
      type: Object,
      default: () => ({})
    },
    workspaceRegistry: {
      type: Array,
      default: () => []
    }
  },
  emits: ['openWorkspace'],
  setup() {
    const { getFinalLayoutConfig } = useLayout()

    const toolbars = computed(() => {
      const layoutConfig = getFinalLayoutConfig()

      return layoutConfig.toolbars
    })

    return {
      getMergeMeta,
      toolbars
    }
  }
}
</script>

<style lang="less" scoped>
.tiny-engine-toolbar {
  user-select: none;
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: var(--base-top-panel-height);
  text-align: center;
  background-color: var(--te-layout-common-bg-color);
  position: relative;
  z-index: 1001;
  border-bottom: 1px solid var(--te-layout-common-border-color);

  .toolbar-left,
  .toolbar-center,
  .toolbar-right {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .toolbar-left,
  .toolbar-center,
  .toolbar-right {
    :deep(.icon) {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      vertical-align: middle;
      width: 26px;
      height: 26px;
      border-radius: 4px;
      position: relative;
      margin-right: 4px;
      svg {
        cursor: pointer;
        font-size: 20px;
        color: var(--te-layout-common-text-color);
      }
    }
  }

  .toolbar-left {
    margin: 0 1px;
    :deep(.icon) {
      background: var(--te-layout-common-active-bg);
      svg {
        font-size: 16px;
      }
      &:not(.disabled):hover {
        background: var(--te-layout-common-icon-bg-color-hover);
      }
    }
    .app-center-icon {
      background: var(--te-layout-common-active-bg);
      display: inline-flex;
      justify-content: center;
      align-items: center;
      vertical-align: middle;
      width: 26px;
      height: 26px;
      border-radius: 4px;
      position: relative;
      margin-left: 4px;

      .svg-icon {
        font-size: 16px;
      }
    }
  }

  .toolbar-right {
    margin: 0 6px;
    margin-right: 12px;
    align-items: center;
    :deep(.icon) {
      margin-right: 0;
      &:not(.disabled):hover {
        background: var(--te-layout-common-active-bg);
      }
      &.active {
        color: var(--te-layout-common-text-color-secondary-checked);
      }
      &.disabled {
        cursor: not-allowed;
      }
    }
    .toolbar-right-main {
      display: flex;
    }
    .toolbar-right-content {
      display: flex;
      .toolbar-right-item-arr,
      .toolbar-right-item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .toolbar-right-item {
        margin: 0 2px;
      }
    }

    .toolbar-right-line {
      color: var(--te-layout-common-border-color);
      margin: 0 6px;
    }
    .tiny-locales {
      height: 35px;
      padding: 5px 12px;
      font-size: 12px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      :deep(span) {
        color: var(--te-layout-common-text-color-secondary);
        opacity: 0.4;
      }

      &:hover {
        :deep(span) {
          opacity: 0.8;
        }
      }
    }
    .toolbar-right-setting {
      margin-left: 10px;
    }
  }
}
.toolbar-right-content .toolbar-right-item:last-child {
  .toolbar-right-line {
    display: none;
  }
}
.center-popover {
  .app-center-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 8px;

    span {
      cursor: pointer;
    }
  }
}

@media only screen and (max-width: 1280px) {
  .tiny-engine-toolbar {
    .toolbar-center {
      flex: 1;
      justify-content: center;
    }

    :deep(.top-panel-breadcrumb) {
      width: auto;
    }
  }
}
.progress {
  position: absolute;
  top: var(--base-top-panel-height);
  left: 0;
  width: 100%;
  z-index: 1002;
  :deep(.tiny-progress-bar__innerText) {
    display: none;
  }
}
</style>