<template>
  <div class="column">
    <div class="column">
      <q-item class="col-12" clickable @click="openSubMenuOrItem" :class="generateCssClass()">
        <q-item-section class="col-2 icon">
          <q-icon :name="icon"/>
        </q-item-section>
        <q-item-section class="col-10 justify-start label">
          <q-item-label>
            {{ label }}
          </q-item-label>
        </q-item-section>
      </q-item>
    </div>
    <div class="column" v-show="items && subMenuVisible">
      <SubItemMenu v-for="subitem in items" :icon="subitem.icon" :label="subitem.label"
                   :path="subitem.path" :key="subitem.id" :selected-item-menu="selectedItemMenu"
                   :itemId="itemId" @selectedItem="emitSelectedItem"
      />
    </div>
  </div>
</template>

<script lang="ts">
import {Vue, Component, Prop, Emit} from 'vue-property-decorator';
import SubItemMenu from "components/menu/components/SubItemMenu.vue";
import {SubItem} from "src/models/models";

@Component({
  components: {SubItemMenu}
})
export default class ItemMenu extends Vue {
  @Prop({type: String, required: true})
  readonly label !: string;

  @Prop({type: String, required: true})
  readonly path !: string;

  @Prop({type: String, required: true})
  readonly icon !: string;

  @Prop({type: String, required: true})
  selectedItemMenu !: string;

  @Prop({type: Array, required: true})
  readonly items !: SubItem[];

  itemId = 0;
  subMenuVisible = false;

  get isSelectedItemMenu() {
    const isSelectedItem = this.selectedItemMenu === this.label ||
      this.selectedItemMenu === this.path;

    let subItemSelected = false;

    this.items.forEach(subitem => {
      if (subitem.path === this.selectedItemMenu)
        subItemSelected = true;
    })

    return isSelectedItem || subItemSelected;
  }

  @Emit('selectedItem')
  openSubMenuOrItem() {
    if (this.$route.path !== this.path) {
      this.$router.push(this.path)
    }

    // TODO: Pegar Item Id pelo Vuex e definir aqui
    // this.itemId = Vuex.get()

    this.subMenuVisible = !this.subMenuVisible;
    if (this.itemId) {
    }

    return this.path;
  }

  @Emit('selectedItem')
  emitSelectedItem(event: any) {
    return event;
  }

  generateCssClass(): string {
    if (!this.isSelectedItemMenu) {
      this.subMenuVisible = false;
    }

    return this.isSelectedItemMenu ? 'item-menu selected' : 'item-menu no-selected'
  }

  mounted() {
    this.itemId = this.$store.getters['navigationInfo/projectId'];
  }
}
</script>

<style lang="scss" scoped>
.item-menu {
  .icon {
    font-size: $font-h1;
  }

  .label {
    font-size: $font-normal;
  }
}

.no-selected {
  background-color: $white;
  color: $gunmetal;

  .icon {
    color: $yellow-orange;
  }
}

.no-selected:hover {
  background-color: $yellow-orange;
  color: $white;

  .icon {
    color: $white;
  }
}

.selected {
  background-color: $gunmetal-2;
  color: $white;

  .icon {
    color: $yellow-orange;
  }
}
</style>
