<template>
  <div class="flex flex-col" style="min-width: 110px; max-width: 110px;">
    <!-- Title -->
    <a
      class="text-xs text-primary hover:text-primary rounded-t h-5 px-1 text-center truncate"
      target="_blank"
      :href="'https://gbf.wiki/' + object.nameen"
      :style="getTitleColor"
      :title="getName"
      v-if="! objectIsEmpty"
    >{{ getName }}</a>
    <span class="text-xs h-5" v-else> </span>

    <!-- Portrait -->
    <portrait
      :object="object"
      @drag-portrait="$emit('drag-portrait', $event)"
      @drop-portrait="drop"
      @click-portrait="$emit('click-portrait')"
      @stars-changed="starsChanged"
    ></portrait>

    <!-- Stats -->
    <div class="flex flex-row flex-nowrap justify-around text-xs" v-if="! objectIsEmpty && showLevel">
      <stat-input shortName="lvl" longName="Summon level" :prop.sync="object.level" :length="3"></stat-input>
      <stat-input shortName="+" longName="Plus bonuses" :prop.sync="object.pluses" :length="3"></stat-input>
    </div>
  </div>
</template>

<script>
import { objectIsEmpty, getName } from "@/js/mixins"
import UtilsParty from '@/js/utils-party'

import Portrait from '@/components/BoxSummonPortrait.vue'
import StatInput from '@/components/common/StatInput.vue'

export default {
  components: {
    StatInput,
    Portrait
  },
  mixins: [
    objectIsEmpty,
    getName
  ],
  props: {
    object: {
      type: Object,
      required: true
    },
    showLevel: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    drop(ev) {
      const data = ev.dataTransfer.getData("summon");
      if (data.length > 0) {
        this.$emit('swap', JSON.parse(data));
      }
    },
    starsChanged(count) {
      this.$set(this.object, "stars", count);

      if ( ! this.showLevel || this.object.level > this.getLevel) {
        this.$set(this.object, "level", this.getLevel);
      }

      UtilsParty.setSummonCurrentData(this.object);
    },
  },
  computed: {
    getTitleColor() {
      switch (this.object.stars) {
        case 3:
          return 'color: #ffa826;';
        case 4:
          return 'color: #e3b7ff;';
        case 5:
          return 'color: #a1e3ff;';
        default:
          return '';
      }
    },
    getLevel() {
      return UtilsParty.getSummonLevel(this.object);
    }
  },
}
</script>