<template>
  <div class="fl-chess-section">
    <div class="fl-chess-section-title" >
      {{ sectionTitle }}
    </div>
    <div
        v-for="(row,i) in listRooms"
        :key="`row-${i}`"
        class="fl-chess-section-row"
        :class="{'chess-plus':chessPlus}"
    >
      <template v-if="row && row.length">
        <fl-chess-item
            v-for="room in row"
            :key="room.id"
            :id="`${room.id}`"
            :count="room.value"
            :type="room.type"
            :chess-plus="chessPlus"
            :area="room.area"
            :active="activeRoomId === room.id || isSelectActive(room)"
            @click="!hasSomeRooms && setActiveRoomId(room)"
            @mouseover="$emit('open-hover-modal', { room: room.room, event: $event})"
            @mouseleave="$emit('close-hover-modal')"
        />
      </template>
      <template v-else>
        <div class="fl-chess-section-row__empty"/>
      </template>

    </div>
    <div class="fl-chess-section-title bottom">{{ sectionTitle }}</div>
  </div>
</template>

<script>
import FlChessItem from '@/components/chees/FlChessItem'
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'FlChessSection',
  components: { FlChessItem },
  props: {
    rooms: {
      type: Array
    },

    activeRoomId: {
      type: Number,
      default: 0
    },

    selectRooms: {
      type: Array,
      default: () => ([])
    },

    floors: {
      type: Array,
      default: () => ([])
    },

    chessPlus: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      listRooms: []
    }
  },

  created () {
    this.updateListRooms()
  },

  computed: {
    ...mapState(['searchFilter', 'filter']),
    ...mapGetters(['hasSomeRooms']),

    sectionTitle () {
      return this.rooms && this.rooms.length && this.rooms[0] && this.getSectionName(this.rooms[0][0].floor.section.name) || ''
    }
  },

  methods: {
    rightRooms () {
      const arrayRooms = []
      this.floors.length && this.floors.forEach((floor, i) => {
        const index = this.rooms.findIndex(array => array[0].floor.number === floor.number)
        if (index === -1) {
          arrayRooms[i] = []
        } else {
          arrayRooms[i] = this.rooms[index].map(item => {
            const isSuitable = this.filterRoom(item)
            return {
              id: item.id,
              value: this.getValue(item, isSuitable),
              floor: item.floor,
              type: this.getType(item, isSuitable),
              area: item.area,
              room: item
            }
          }
          )
        }
      })

      return arrayRooms
    },

    isSelectActive (room) {
      return Boolean(this.selectRooms.length && this.selectRooms.indexOf(room.id) !== -1 &&
          this.filterRoom(room.room))
    },

    updateListRooms () {
      this.listRooms = this.rightRooms()
    },

    getType (room, isSuitable) {
      return isSuitable ? room.sale_status && room.sale_status : undefined
    },

    getValue (room, isSuitable) {
      if (!isSuitable) return ''
      return room.is_studio ? 'Ст' : room.room_count
    },

    filterRoom (room) {
      if (!Object.keys(this.filter).length) return true

      if (this.filter.priceTo && this.filter.priceTo < room.price) {
        return
      }

      if (this.filter.priceFrom && this.filter.priceFrom > room.price) {
        return
      }

      if (this.filter.floorFrom && this.filter.floorFrom > room.floor.number) {
        return
      }

      if (this.filter.floorTo && this.filter.floorTo < room.floor.number) {
        return
      }

      if (this.filter.areaTo && this.filter.areaTo < room.area) {
        return
      }

      if (this.filter.areaFrom && this.filter.areaFrom > room.area) {
        return
      }

      if (this.filter.roomCount.findIndex(count => {
        const int = count.id
        return int === room.room_count || int === 4 && int <= room.room_count
      }) === -1 || room.is_studio) {
        if (this.filter.isStudio && !room.is_studio) {
          return
        }
        if (!this.filter.isStudio && this.filter.roomCount.length) {
          return
        }
      }

      if (this.filter.roomType.length &&
          this.filter.roomType.findIndex(type => type.id === room.room_type_id) === -1) {
        return
      }

      if (this.filter.saleStatuses.length &&
          this.filter.saleStatuses.findIndex(status => status.id === room.sale_status) === -1) {
        return
      }

      if (this.filter.sectionId.length &&
          this.filter.sectionId.findIndex(status => status.id === room.floor.section_id) === -1) {
        return
      }

      return true
    },

    setActiveRoomId (room) {
      if (!room.type) return
      this.$emit('set-active-room', room.id)
    },

    getSectionName (string) {
      return string && /^\d+$/.test(string) ? `Секция ${string}` : string
    }
  },

  watch: {
    floors () {
      this.updateListRooms()
    },

    rooms () {
      this.updateListRooms()
    },

    filter: {
      handler () {
        this.updateListRooms()
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.fl-chess-section {
  display: flex;
  flex-direction: column;
  margin-right: 40px;
}

.fl-chess-section-row {
  display: flex;
  align-items: center;
}

.fl-chess-section-title {
  margin-bottom: 16px;
  color: $grey-02;
  white-space: nowrap;

  &.bottom {
    margin-top: 32px;
  }
}

.fl-chess-section-floor {
  min-width: 15px;
  margin-right: 14px;
  color: $grey-04;
  font-size: 14px;
}

.margin-left {
  margin-left: 29px;
}

.fl-chess-section-row__empty {
  height: 36px;
}

.chess-plus {
  height: 52px;
}
</style>
