<template>
  <transition name="fade">
    <div v-if="isOpen"
         class="fl-chess-hover-modal"
         :style="getStyle"
    >
      <div class="fl-chess-hover-modal-title"> {{ getTitleModal(room) }} </div>
      <div class="fl-chess-hover-modal-price"> {{ room.price | currency }} </div>
      <div class="fl-chess-hover-modal-area"> {{getArea(room)}}{{ getPriceSqr }}</div>
      <div
          v-if="room.badges && room.badges.length"
          class="fl-chess-hover-modal-badges">
        <div
            v-for="badge in room.badges"
            :key="badge.id"
            class="fl-chess-hover-modal-badge">
          <div class="fl-chess-hover-modal-badge__circle"/>
          {{ badge.value }}
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import cardMixin from '@/mixins/cardMixin'
import { declinationWord, ROOMS } from '@/lib/data/words'
import { firstUpper } from '@/lib/helpTools'

export default {
  name: 'FlChessHoverModal',
  mixins: [cardMixin],
  props: {
    isOpen: {
      type: Boolean,
      default: false
    },
    room: {
      type: Object,
      default: () => ({})
    },
    event: {
      type: [MouseEvent, Object]
    }
  },

  computed: {
    getStyle () {
      return `top:${this.event.pageY + 10}px;
      left: ${this.event.pageX - 5}px`
    },

    getPriceSqr () {
      return this.room.price && this.room.area && ` - ${(this.room.price / this.room.area).toFixed(2)} ₽/м2.` || ''
    }
  },

  methods: {
    getTitleModal (room) {
      if (!room) return
      let count = `${room.room_count} ${declinationWord(room.room_count, ROOMS)}`
      const type = this.roomType(room)
      if (type !== 'квартира') {
        count = room.room_count && type && `${room.room_count}к-${type}` || 'Неизвестно'
      }
      const title = room.is_studio ? 'Студия' : count
      return firstUpper(title)
    }
  }
}
</script>

<style lang="scss" scoped>
.fl-chess-hover-modal {
  position: fixed;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  padding: 12px;
  background: $light-01;
  border-radius: $border-radius;
  box-shadow: 0 4px 16px rgba($black-01, 0.1);
}

.fl-chess-hover-modal-title {
  margin-bottom: 4px;
  color: $grey-02;
  font-size: 14px;
}

.fl-chess-hover-modal-price {
  margin-bottom: 2px;
  font-size: 18px;
  font-family: $main-ff-bold;
}

.fl-chess-hover-modal-area {
  margin-bottom: 16px;
  color: $grey-02;
  font-size: 14px;
}

.fl-chess-hover-modal-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fl-chess-hover-modal-badge {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
  font-family: $main-ff-bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.fl-chess-hover-modal-badge__circle {
  position: relative;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  background: $primary;
  border-radius: 100%;

  &::after {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 4px;
    height: 4px;
    background: $light-01;
    border-radius: 100%;
    content: " ";
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.4s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
