<template>
  <section id="intro">
    <div class="container">
      <div class="form">
        <div class="row">
          <div align="left" class="col-sm-12 col-md-8">
            <div class="intro-content box" style="margin-top: -5px;">
              <h2>Find your Timeshare</h2>
              <p>
                Please specify one or more details to view the available weeks
                and then select the weeks that interest you on the resort page.
              </p>
              <div class="row">
                <div class="form-group col-md-6">
                  <div class="input-group">
                    <label
                      v-if="!searchParams.region"
                      class="uniSelectLabel"
                      for="region"
                    >
                      Region
                    </label>
                    <select
                      class="form-control uniSelect"
                      name="region"
                      id="region"
                      v-model="searchParams.region"
                      @change="regionChange"
                    >
                      <option v-for="(region, r) in regions" :key="r">
                        {{ region.regionName }}
                      </option>
                    </select>
                  </div>
                  <br />
                  <label>Date From</label>
                  <input
                    type="date"
                    name="arrival-to"
                    class="form-control my-1 uniSelect"
                    id="arrival-to"
                    placeholder="Date From"
                    v-model="filter.date"
                  />
                </div>
                <div class="form-group col-md-6">
                  <div class="input-group">
                    <label
                      v-if="!searchParams.resort"
                      class="uniSelectLabel"
                      for="weekInfoResortSelect"
                    >
                      Resort
                    </label>
                    <select
                      id="weekInfoResortSelect"
                      class="form-control uniSelect"
                      v-model="searchParams.resort"
                    >
                      <option
                        v-for="(resort, r) in filteredResort"
                        :key="r"
                        :value="resort"
                        @change="resortChange"
                      >
                        {{ resort.resortName }}
                      </option>
                    </select>
                  </div>
                  <br />
                  <label>Date To</label>
                  <input
                    type="date"
                    name="arrival-to"
                    class="form-control my-1 uniSelect"
                    id="arrival-to"
                    placeholder="Date To"
                    v-model="filter.ddate"
                  />
                </div>
              </div>
              <button class="btn-white-border" @click="Search()">
                <i class="fa fa-search"></i>
                Search
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <carousel
      :nav="false"
      :dots="false"
      :items="1"
      :autoplay="true"
      :loop="true"
      id="intro-carousel"
      style="margin-top: -50px;"
      :responsive="{
        0: { items: 1, nav: false },
        600: { items: 1, nav: false },
      }"
    >
      <img
        class="item"
        src="/img/intro-carousel/timeshare-1.jpg"
        style="object-fit: cover;"
        alt
      />
      <img
        class="item"
        src="/img/intro-carousel/timeshare-2.jpg"
        style="object-fit: cover;"
        alt
      />
      <img
        class="item"
        src="/img/intro-carousel/timeshare-3.jpg"
        style="object-fit: cover;"
        alt
      />
      <img
        class="item"
        src="/img/intro-carousel/timeshare-4.jpg"
        style="object-fit: cover;"
        alt
      />
      <img
        class="item"
        src="/img/intro-carousel/timeshare-5.jpg"
        style="object-fit: cover;"
        alt
      />
      <img
        class="item"
        src="/img/intro-carousel/timeshare-6.jpg"
        style="object-fit: cover;"
        alt
      />
    </carousel>

    <div id="intro-carousel" class="owl-carousel"></div>
  </section>
</template>

<script>
/* eslint-disable */

import carousel from 'vue-owl-carousel'
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
  components: {
    carousel,
  },
  data() {
    return {
      regionObj: {},
      resortObj: {},
      region: '',
      resort: '',
      priceMin: undefined,
      priceMax: undefined,
    }
  },
  methods: {
    ...mapActions('timeshare', ['initTimeshare', 'onResortChange', 'saveWeek']),
    ...mapActions('resort', ['getResortWithListings']),
    regionChange(item) {
      let reg = this.regions.find((r) => r.regionName === item.target.value)
      this.regionObj = reg
    },
    resortChange(item) {
      let res = this.resorts.find((r) => r.resortName === item.target.value)
      this.resortObj = res
    },
    Search() {
      if (this.searchParams.price) {
        this.filter.minPrice = this.searchParams.price
      }
      if (this.searchParams.week) {
        this.filter.keyword = this.week
      }

      if (!this.searchParams.resort) {
        this.searchParams.regionObj = this.regionObj
        this.$router.push('/timeshareToByResults')
      } else {
        this.$router.push(`/resort/${this.searchParams.resort.resortId}`)
      }
    },
  },
  computed: {
    ...mapState('timeshare', ['resorts', 'regions', 'detailedRegion']),
    ...mapState('weekList', ['searchParams', 'filter']),
    ...mapState('resort', ['resortsWithListings']),
    filteredResort() {
      let list = []
      var itemList = []
      if (this.searchParams.region && this.searchParams.region !== '') {
        this.resortsWithListings.forEach((resortListing) => {
          if (
            resortListing.resortRegion[0].code.toUpperCase() ===
            this.regionObj.regionCode.toUpperCase()
          ) {
            itemList.push(resortListing)
          }
        })
        if (itemList.length > 0) {
          list = itemList
        } else {
          list[0] = {
            resortName: ' - No Listings - ',
          }
        }
      } else {
        list = this.resortsWithListings
      }
      return _.sortBy(list, (x) => x.resortName)
    },
    // filteredResort() {
    //   let list = [];
    //   if (this.searchParams.region && this.searchParams.region !== "") {
    //     const item = this.detailedRegion.find(
    //       region => region.region.regionCode === this.regionObj.regionCode
    //     );
    //     if (item) {
    //       list = item.children;
    //     }
    //   } else {
    //     list = this.resorts;
    //   }
    //   return _.sortBy(list, x => x.resortName);
    // }
  },
  created() {
    this.initTimeshare(this.weekId)
    this.getResortWithListings()
  },
  mounted() {
    this.searchParams.region = null
    this.searchParams.resort = null
    this.filter.date = null
    this.filter.ddate = null
  },
}
</script>

<style lang="scss" scoped></style>
