<template>
  <div class="fl-filter-rooms">
    <div class="fl-filter-rooms-main">
      <fl-select-district
          ref="select0"
          class="fl-filter-rooms-select"
          :init-value="initFilter.districtId"
          :house-id="data.houseId[0] && data.houseId[0].id || undefined"
          @change="data.districtId = $event"
          @apply="findRooms"
          :disabled="options.withoutHouse"
      />
      <fl-select-house
          ref="select1"
          :list-houses="listHouses"
          :init-value="initFilter.houseId"
          class="fl-filter-rooms-select"
          @change="data.houseId = $event"
          @apply="findRooms"
          :disabled="options.withoutHouse"
      />
      <fl-select-section
          ref="select2"
          :list-init="listSections"
          class="fl-filter-rooms-select"
          @change="data.sectionId = $event"
          @apply="findRooms"
      />
      <fl-select-area
          ref="select3"
          class="fl-filter-rooms-select"
          @change-from="data.areaFrom = $event"
          @change-to="data.areaTo = $event"
          @apply="findRooms"
      />
      <fl-select-price
          ref="select4"
          class="fl-filter-rooms-select"
          @change-from="data.priceFrom = $event"
          @change-to="data.priceTo = $event"
          @apply="findRooms"
      />
      <fl-select-room-type
          ref="select5"
          class="fl-filter-rooms-select"
          @change="data.roomType = $event"
          @apply="findRooms"
      />
      <fl-select-room
          ref="select6"
          class="fl-filter-rooms-select"
          @change-room-count="data.roomCount = $event"
          @change-is-studio="data.isStudio = $event"
          @apply="findRooms"
      />
      <div
          class="fl-filter-rooms-button__more"
          @click="isOpen = true"
      >
        Ещё фильтры
      </div>
      <div class="fl-filter-rooms-buttons">
        <div
            class="fl-filter-rooms-button__clear"
            @click="clearFilters"
        >
          Сбросить
        </div>
        <fl-button
            type="is-primary"
            title="Применить"
            class="fl-filter-rooms-button__apply"
            @click="findRooms"
        />
      </div>
    </div>
    <div class="fl-filter-rooms-tags">
      <div
          v-for="(tag, i) in filterTags"
          :key="`tag-${i}`"
          class="fl-filter-rooms-tag"
          @click="tag.action"
      >
        {{ tag.value }}
        <fl-icon
            name="close"
            :width="12"
            :height="12"
            class="fl-filter-rooms-tag__close"
        />
      </div>
    </div>

    <fl-modal
      :is-open="isOpen"
      :is-full-page="isMobile"
      title="Еще фильтры"
      @close="isOpen = false"
    >
      <template #body>
        <div class="fl-filter-rooms-more__selects">
          <fl-select-number
            :init-value="data.number"
            class="fl-filter-rooms__select--more"
            @input="data.number = $event"
          />
          <fl-select-floor
              class="fl-filter-rooms__select--more"
              :init-floor-from="data.floorFrom"
              :init-floor-to="data.floorTo"
              @change-from="data.floorFrom = $event"
              @change-to="data.floorTo = $event"
          />
          <fl-select-sale-status
              class="fl-filter-rooms__select--more"
              :init-list="data.saleStatuses"
              @change="data.saleStatuses = $event"
          />
          <div class="fl-filter-rooms-buttons">
            <div
                class="fl-filter-rooms-button__clear"
                @click="clearFilters"
            >
              Сбросить
            </div>
            <fl-button
                type="is-primary"
                title="Применить"
                class="fl-filter-rooms-button__apply"
                @click="findRooms"
            />
          </div>
        </div>
      </template>
    </fl-modal>
  </div>
</template>

<script>
import FlSelectDistrict from '@/components/filter/selects/FlSelectDistrict'
import FlSelectPrice from '@/components/filter/selects/FlSelectPrice'
import FlSelectSaleStatus from '@/components/filter/selects/FlSelectSaleStatus'
import FlSelectArea from '@/components/filter/selects/FlSelectArea'
import FlSelectFloor from '@/components/filter/selects/FlSelectFloor'
import FlSelectRoomType from '@/components/filter/selects/FlSelectRoomType'
import FlSelectRoom from '@/components/filter/selects/FlSelectRoom'
import FlSelectHouse from '@/components/filter/selects/FlSelectHouse'
import FlSelectSection from '@/components/filter/selects/FlSelectSection'
import { mapGetters, mapState } from 'vuex'
import FlButton from '@/core-components/form/FlButton'
import FlModal from '@/core-components/FlModal'
import { deepClone } from '@/lib/helpTools'
import FlIcon from '@/core-components/icon/FlIcon'
import FlSelectNumber from './selects/FlSelectNumber'

export default {
  name: 'FlFilterRooms',
  components: {
    FlSelectNumber,
    FlIcon,
    FlModal,
    FlButton,
    FlSelectSection,
    FlSelectHouse,
    FlSelectRoom,
    FlSelectRoomType,
    FlSelectFloor,
    FlSelectArea,
    FlSelectSaleStatus,
    FlSelectPrice,
    FlSelectDistrict
  },

  props: {
    localFilter: {
      type: Boolean,
      default: false
    },

    initFilter: {
      type: Object,
      default: () => ({})
    }
  },

  data () {
    return {
      isOpen: false,
      data: {
        districtId: [],
        priceTo: '',
        priceFrom: '',
        floorTo: '',
        floorFrom: '',
        areaFrom: '',
        areaTo: '',
        roomCount: [],
        roomType: [],
        isStudio: 0,
        saleStatuses: [],
        houseId: [],
        sectionId: '',
        number: ''
      }
    }
  },

  computed: {
    ...mapGetters(['housesObject', 'housesListDistrictId']),
    ...mapState(['isMobile', 'options']),

    listSections () {
      const obj = this.data.houseId.length && this.housesObject[this.data.houseId[0].id]
      return obj && obj.sections || []
    },

    listHouses () {
      return this.data.districtId.length && this.housesListDistrictId(this.data.districtId[0].id) || []
    },

    filterTags () {
      return [
        { value: this.setValueFloorTag, action: () => { this.clearFloor(); this.findRooms() } },
        { value: this.setValueStatusTag, action: () => { this.clearStatus(); this.findRooms() } },
        { value: this.data.number ? `Номер квартиры ${this.data.number}` : '', action: () => { this.data.number = ''; this.findRooms() } }
      ].filter(item => item.value)
    },

    setValueFloorTag () {
      let valueString = ''
      if (this.data.floorFrom) {
        valueString = `от ${this.data.floorFrom} ${!this.data.floorTo && 'этажа' || ''} `
      }
      if (this.data.floorTo) {
        valueString += `до ${this.data.floorTo} этажа`
      }

      return valueString
    },

    setValueStatusTag () {
      return this.data.saleStatuses.map(item => item.value).join(', ')
    }
  },

  methods: {
    closeMore () {
      this.isOpen = false
    },

    findRooms () {
      this.$store.commit('setFilter', deepClone(this.data))
      if (this.localFilter) {
        this.isOpen = false
        return
      }
      this.isOpen = false
      this.$emit('search')
    },

    async clearFilters () {
      for (let i = 0; i <= 6; i++) {
        await this.$refs[`select${i}`].init()
      }

      this.clearFloor()
      this.clearStatus()
      this.data.isStudio = false
      this.data.number = ''

      this.findRooms()
    },

    clearFloor () {
      this.data.floorFrom = ''
      this.data.floorTo = ''
    },

    clearStatus () {
      this.data.saleStatuses = []
    },

    setInitDataInFilter () {
      const houseId = this.initFilter.houseId
      const districtId = this.initFilter.districtId

      if (houseId) {
        this.data.houseId = [{ id: houseId }] || []
        this.data.districtId = this.housesObject && this.housesObject[houseId].district_id || []
      }

      if (districtId) {
        this.data.districtId = [{ id: districtId }]
      }

      this.findRooms()
    }
  },

  watch: {
    localFilter: {
      handler () {
        this.findRooms()
      }
    },

    initFilter: {
      handler () {
        this.setInitDataInFilter()
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.fl-filter-rooms-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

.fl-filter-rooms-select {
  max-width: 300px;
  margin-right: 12px;
  margin-bottom: 10px;
}

.fl-filter-rooms-more {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  padding: 24px 64px;
  background: $light-01;
}

.fl-filter-rooms-button__more {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 40px;
  margin-right: 20px;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: $grey-03;
  border-radius: $border-radius-01;
  cursor: pointer;
}

.fl-filter-rooms-buttons {
  display: flex;
  margin-bottom: 10px;
  margin-left: auto;
}

::v-deep .fl-filter-rooms-button__apply {
  height: 40px;
  margin-left: 24px;
}

.fl-filter-rooms-button__clear {
  display: flex;
  align-items: center;
  color: $primary;
  cursor: pointer;
}

.fl-filter-rooms-more__title {
  margin-bottom: 20px;
  font-size: 18px;
  font-family: $main-ff-bold;
}

.fl-filter-rooms-background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba($black-01, 0.1);
}

.fl-filter-rooms__select--more {
  margin-bottom: 32px;
}

.fl-filter-rooms-more__selects .fl-filter-rooms-buttons {
  margin-top: 16px;
}

.fl-filter-rooms-more__selects {
  display: flex;
  flex-direction: column;
}

.fl-filter-rooms-tags {
  display: flex;
  margin-top: 20px;
  cursor: pointer;
}

.fl-filter-rooms-tag {
  margin-right: 16px;
  padding: 10px 12px;
  background: $grey-03;
  border-radius: 20px;

  @include flex-center;
}

.fl-filter-rooms-tag__close {
  margin-left: 12px;
}
</style>
