/**
 * Door Context Menus Component
 * Handles all context menus for Door (门型) tab
 */
Vue.component('door-context-menus', {
  props: {
    folderContextMenuVisible: Boolean,
    folderContextMenuPosition: Object,
    separatorContextMenuVisible: Boolean,
    separatorContextMenuPosition: Object,
    contentContextMenuVisible: Boolean,
    contentContextMenuPosition: Object,
    selectedType: String,
    showDetails: Boolean,
    itemContextMenuVisible: Boolean,
    itemContextMenuPosition: Object,
    isSketchupModel: Boolean,
    selectedItemType: String,
    sidebarOpen: Boolean,
    isMediumWindow: Boolean,
    onlineContextMenuVisible: Boolean,
    onlineContextMenuPosition: Object
  },

  computed: {
    collectionMenuItems() {
      const items = [
        { action: 'rename', icon: 'text_input_short', text: 'rename', condition: true, divider: 1 },
        { action: 'remove', icon: 'delete', text: 'remove', condition: true, divider: 1 },
        { action: 'add_separator', icon: 'drag_vertical', text: 'addSeparator', condition: true, divider: 2 },
        { action: 'open_location', icon: 'launch', text: this.$root.explorerName === 'finder' ? 'viewInFinder' : 'viewInExplorer', condition: true, divider: 2 }
      ];
      return items.filter(item => item.condition !== false);
    },
    separatorMenuItems() {
      const items = [{ action: 'remove', icon: 'close', text: 'removeSeparator', condition: true, divider: 1 }];
      return items.filter(item => item.condition !== false);
    },
    contentMenuItems() {
      const items = [
        { action: 'add_selected', icon: 'add_bold', text: 'addObjectFolder', condition: this.selectedType !== 'in-model', divider: 1 },
        { action: 'purge_unused', icon: 'no_package', text: 'purgeUnused', condition: this.selectedType === 'in-model', divider: 1 }
      ];
      return items.filter(item => item.condition !== false);
    },
    itemMenuItems() {
      const items = [
        { action: 'rename', icon: 'text_input_short', text: 'rename', condition: this.selectedType !== 'favorites' && this.selectedType !== 'recent' && this.showDetails, divider: 3 },
        { action: 'save_as', icon: 'save_as', text: 'saveAs', condition: this.selectedType === 'in-model', divider: 3 },
        { action: 'delete', icon: 'delete', text: 'delete', condition: this.selectedType !== 'favorites' && this.selectedType !== 'recent', divider: 3 },
        { action: 'purge_unused', icon: 'no_package', text: 'purgeUnused', condition: this.selectedType === 'in-model', divider: 4 },
        { action: 'add_selected', icon: 'add_bold', text: 'addObjectFolder', condition: this.selectedItemType === 'folder', divider: 4 },
        { action: 'remove_recent', icon: 'close', text: 'removeFromRecent', condition: this.selectedType === 'recent', divider: 4 },
        { action: 'open_location', icon: 'launch', text: this.$root.explorerName === 'finder' ? 'viewInFinder' : 'viewInExplorer', condition: this.selectedType !== 'in-model', divider: 4 },
        { action: 'find', icon: 'search', text: 'findInModel', condition: this.selectedType === 'in-model', divider: 4 }
      ];
      return items.filter(item => item.condition !== false);
    },
    onlineMenuItems() {
      const items = [
        { action: 'rename', icon: 'text_input_short', text: 'rename', condition: true, divider: 1 },
        { action: 'delete', icon: 'delete', text: 'remove', condition: true, divider: 1 }
      ];
      return items.filter(item => item.condition !== false);
    },
    firstItems() { return this.getMenuItems.filter(item => item.divider === 1); },
    secondItems() { return this.getMenuItems.filter(item => item.divider === 2); },
    thirdItems() { return this.getMenuItems.filter(item => item.divider === 3); },
    fourthItems() { return this.getMenuItems.filter(item => item.divider === 4); },
    getMenuItems() {
      if (this.folderContextMenuVisible) return this.collectionMenuItems;
      if (this.separatorContextMenuVisible) return this.separatorMenuItems;
      if (this.shouldShowContent) return this.contentMenuItems;
      if (this.shouldShowItem) return this.itemMenuItems;
      return [];
    },
    menuVisible() {
      return this.folderContextMenuVisible || this.separatorContextMenuVisible || this.shouldShowContent || this.shouldShowItem;
    },
    menuPosition() {
      if (this.folderContextMenuVisible) return this.folderContextMenuPosition;
      if (this.separatorContextMenuVisible) return this.separatorContextMenuPosition;
      if (this.shouldShowContent) return this.contentContextMenuPosition;
      if (this.shouldShowItem) return this.itemContextMenuPosition;
      return { x: -9999, y: -9999 };
    },
    shouldShowContent() {
      return this.contentContextMenuVisible && this.selectedType !== 'favorites' && this.selectedType !== 'recent';
    },
    shouldShowItem() {
      return this.itemContextMenuVisible && !(this.sidebarOpen && this.isMediumWindow);
    }
  },

  methods: {
    translated(key) { return this.$root.translated(key); },
    handleCollectionActions(action) { this.$emit('collection-actions', action); },
    handleSeparatorActions(action) { if (action === 'remove') this.$emit('remove-separator'); },
    handleContentActions(action) { this.$emit('content-actions', action); },
    handleItemActions(action) { this.$emit('item-actions', action); },
    handleOnlineActions(action) { this.$emit('online-actions', action); },
    handleMenuAction(action) {
      if (this.folderContextMenuVisible) this.handleCollectionActions(action);
      else if (this.separatorContextMenuVisible) this.handleSeparatorActions(action);
      else if (this.shouldShowContent) this.handleContentActions(action);
      else if (this.shouldShowItem) this.handleItemActions(action);
    }
  },

  template: /*html*/ `
    <div>
      <div v-if="menuVisible" :style="{ top: menuPosition.y + 'px', left: menuPosition.x + 'px' }" class="context-menu custom-menu bg-gray-light border">
        <ul v-if="firstItems.length > 0" class="list-group list-group-borderless p-2">
          <li v-for="(item, index) in firstItems" :key="'first-' + index" class="list-group-item list-item-left-control custom-list-group-item" @click="handleMenuAction(item.action)">
            <i class="modus-icons">{{ item.icon }}</i><span class="custom-span">{{ translated(item.text) }}</span>
          </li>
        </ul>
        <div v-if="secondItems.length > 0" class="dropdown-divider m-0"></div>
        <ul v-if="secondItems.length > 0" class="list-group list-group-borderless p-2">
          <li v-for="(item, index) in secondItems" :key="'mid-' + index" class="list-group-item list-item-left-control custom-list-group-item" @click="handleMenuAction(item.action)">
            <i class="modus-icons">{{ item.icon }}</i><span class="custom-span">{{ translated(item.text) }}</span>
          </li>
        </ul>
        <div v-if="thirdItems.length > 0" class="dropdown-divider m-0"></div>
        <ul v-if="thirdItems.length > 0" class="list-group list-group-borderless p-2">
          <li v-for="(item, index) in thirdItems" :key="'last-' + index" class="list-group-item list-item-left-control custom-list-group-item" @click="handleMenuAction(item.action)">
            <i class="modus-icons">{{ item.icon }}</i><span class="custom-span">{{ translated(item.text) }}</span>
          </li>
        </ul>
        <div v-if="fourthItems.length > 0" class="dropdown-divider m-0"></div>
        <ul v-if="fourthItems.length > 0" class="list-group list-group-borderless p-2">
          <li v-for="(item, index) in fourthItems" :key="'last-' + index" class="list-group-item list-item-left-control custom-list-group-item" @click="handleMenuAction(item.action)">
            <i class="modus-icons">{{ item.icon }}</i><span class="custom-span">{{ translated(item.text) }}</span>
          </li>
        </ul>
      </div>
      <div v-if="onlineContextMenuVisible" :style="{ top: onlineContextMenuPosition.y + 'px', left: onlineContextMenuPosition.x + 'px' }" class="context-menu custom-menu bg-gray-light border">
        <ul class="list-group list-group-borderless p-2">
          <li v-for="item in onlineMenuItems" :key="item.action" class="list-group-item list-item-left-control custom-list-group-item" @click="handleOnlineActions(item.action)">
            <i class="modus-icons">{{ item.icon }}</i><span class="custom-span">{{ translated(item.text) }}</span>
          </li>
        </ul>
      </div>
    </div>
  `
});
