<template>
  <div class="flex flex-row flex-nowrap justify-around" v-if="! objectIsEmpty">
    <span v-for="(skill, skillIndex) in skills" :key="skillIndex" class="tooltip-parent">
      <img
        :class="(skill.keyid !== null && party_mode !== $MODE.ReadOnly) ? 'cursor-pointer' : ''"
        style="width: 30px; height: 30px;"
        :src="'/img/weapon_skills/' + skill.icon"
        @click="showKeyModal(skillIndex, skill.keyid)"
      >
      <span class="tooltip">
        {{ skill.name }} <span v-if="skill.boost">({{ skill.boost }})</span><br>
        <p v-if="skill.data !== null">
          <span class="font-mono text-xs" v-for="(data, dataIndex) in skill.data" :key="dataIndex">
            <span class="capitalize">{{ data.aura_type }}</span> {{ data.stat }} {{ (data.value * 100).toFixed(2) }}%<br>
          </span>
        </p>
      </span>
    </span>

    <!-- Modal -->
    <modal-keys
      v-if="party_mode !== $MODE.ReadOnly"
      v-model="show_modal_keys"
      :keyId="modal_key_id"
      @key-selected="selectKey"
    ></modal-keys>
  </div>  
</template>

<script>
import { objectIsEmpty } from "@/js/mixins"
import { mapState } from 'vuex'

import ModalKeys from '@/components/ModalKeys.vue'

export default {
  components: {
    ModalKeys,
  },
  mixins: [
    objectIsEmpty
  ],
  props: {
    object: Object,
    skills: Array,
  },
  data() {
    return {
      show_modal_keys: false,
      modal_skill_index: 0,
      modal_key_id: 0,
    }
  },
  methods: {
    showKeyModal(index, keyid) {
      if (keyid !== null && this.party_mode !== this.$MODE.ReadOnly) {
        this.modal_skill_index = index;
        this.modal_key_id = keyid;
        this.show_modal_keys = true;
      }
    },
    selectKey(key) {
      this.$set(this.object.keys, this.modal_skill_index, key);
    }
  },
  computed: {
    ...mapState({
      party_mode: state => state.party_builder.party_mode
    }),
  }
}
</script>