<template>
  <q-item class="col-12" clickable @click="navigateTo" :class="generateCssClass()">
    <div class="content row">
      <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>
    </div>
  </q-item>
</template>

<script lang="ts">
import {Vue, Component, Prop, Emit} from 'vue-property-decorator';

@Component
export default class SubItemMenu 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: Number, required: true})
  readonly itemId !: number;

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

  get isSelectedItemMenu() {
    return this.selectedItemMenu === this.label ||
      this.selectedItemMenu === this.path;
  }

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

  generateCssClass(): string {
    return this.isSelectedItemMenu ? 'subitem-menu selected-subitem' : 'subitem-menu no-selected-subitem'
  }
}
</script>

<style lang="scss" scoped>
.subitem-menu {
  .content {
    margin-left: 5%;
    width: 100%;
    flex-wrap: nowrap;
  }

  .icon {
    font-size: $font-h1;
  }

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

.no-selected-subitem {
  .icon {
    color: $yellow-orange;
  }
}

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

  .icon {
    color: $white;
  }
}

.selected-subitem {
  background-color: $yellow-orange;
  color: $white;
}

</style>
