/**
 * Material Context Menus Component
 * Handles all context menus for Material tab
 */
Vue.component('material-context-menus', {
  props: {
    // Folder menu
    folderContextMenuVisible: Boolean,
    folderContextMenuPosition: Object,

    // Separator menu
    separatorContextMenuVisible: Boolean,
    separatorContextMenuPosition: Object,

    // Content menu
    contentContextMenuVisible: Boolean,
    contentContextMenuPosition: Object,
    selectedType: String,

    // Item menu
    showDetails: Boolean,
    itemContextMenuVisible: Boolean,
    itemContextMenuPosition: Object,
    isSketchupMaterial: Boolean,
    selectedItemType: String,
    sidebarOpen: Boolean,
    isMediumWindow: Boolean,

    // Online menu
    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: 'create_material',
          icon: 'add_bold',
          text: 'createMaterial',
          condition: this.selectedType === 'in-model',
          divider: 1
        },
        {
          action: 'purge_unused',
          icon: 'image_disabled',
          text: 'purgeUnused',
          condition: this.selectedType === 'in-model',
          divider: 2
        },
      ];

      return items.filter(item => item.condition !== false);
    },

    itemMenuItems() {
      const items = [
        {
          action: 'edit_material',
          icon: 'paint_bucket',
          text: 'editMaterial',
          condition:  this.selectedType === 'in-model' &&
                      this.selectedType !== 'recent',
          divider: 2
        },
        {
          action: 'resize_textures',
          icon: 'expand',
          text: 'resizeTexture',
          condition:  this.selectedType === 'in-model',
          divider: 2
        },
        {
          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: 'image_disabled',
          text: 'purgeUnused',
          condition: this.selectedType === 'in-model',
          divider: 4
        },
        {
          action: 'remove_recent',
          icon: 'close',
          text: 'removeFromRecent',
          condition:  this.selectedType === 'recent',
          divider: 4
        },
        {
          action: 'import_material',
          icon: 'image_add',
          text: 'importMaterial',
          condition: this.selectedItemType === 'folder',
          divider: 4
        },
        {
          action: 'open_location',
          icon: 'launch',
          text: this.$root.explorerName === 'finder' ? 'viewInFinder' : 'viewInExplorer',
          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;
      } else if (this.separatorContextMenuVisible) {
        return this.separatorMenuItems;
      } else if (this.shouldShowContent) {
        return this.contentMenuItems;
      } else if (this.shouldShowItem) {
        return this.itemMenuItems;
      }
      return [];
    },

    menuVisible() {
      return this.folderContextMenuVisible ||
             this.separatorContextMenuVisible ||
             this.shouldShowContent ||
             this.shouldShowItem;
    },

    menuPosition() {
      if (this.folderContextMenuVisible) {
        return this.folderContextMenuPosition;
      } else if (this.separatorContextMenuVisible) {
        return this.separatorContextMenuPosition;
      } else if (this.shouldShowContent) {
        return this.contentContextMenuPosition;
      } else 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>
      <!-- Unified Context Menu -->
      <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>

      <!-- Online Source Context Menu -->
      <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>
  `
});
