<template>
  <section>
    <div class="container pb-5">
      <div class="row" id="search">
        <div class="col-md-4 panel-left p-5" style="margin-top:-20px">
          <h2>Find Timeshare</h2>

          <div class="input-group">
            <label v-if="selectedRegion === null" class="uniSelectLabel" for="region">Region</label>
            <select
              class="form-control uniSelect"
              name="region"
              id="region"
              v-model="selectedRegion"
              @change="regionEvent()"
            >
              <option v-for="(region, i) in availRegion" :key="i" :value="region">
                <p>{{ region.regionName }}</p>
              </option>
            </select>
          </div>

          <div v-if="selectedRegion !== null" class="input-group my-1">
            <label v-if="selectedResort === null" class="uniSelectLabel" for="resort">Resort</label>
            <select
              class="form-control uniSelect"
              name="resort"
              id="resort"
              v-model="selectedResort"
              @change="resortEvent()"
            >
              <option
                v-for="(resort, i) in selectedRegion.resorts"
                :key="i"
                :value="resort"
              >{{ resort.resortName }}</option>
            </select>
          </div>
          <div v-else class="input-group my-1">
            <label v-if="selectedResort === null" class="uniSelectLabel" for="resort">Resort</label>
            <select class="form-control uniSelect" name="resort" id="resort">
              <option disabled>Please Select a Region First</option>
            </select>
          </div>
          <button class="btn-white-border" @click="ShowResort()">
            <i class="fa fa-search"></i> SEARCH
          </button>
        </div>
        <div class="col-md-8 p-5">
          <h2>Search by Province</h2>
          <div class="tab-content" id="myTabContent">
            <div
              class="tab-pane fade show active"
              id="directions"
              role="tabpanel"
              aria-labelledby="directions-tab"
            >
              <iframe
                :src="mapUrl"
                width="100%"
                height="400"
                frameborder="0"
                style="border-radius:10px"
                allowfullscreen
              ></iframe>
              <br />
              <small>
                <a :href="mapUrl" class="map-url" target="_blank">See map bigger</a>
              </small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions, mapGetters } from "vuex";
import Alert from "../../shared/alert.vue";

export default {
  name: "TimeshareToBuy",
  components: {
    Alert,
  },
  data() {
    return {
      myMap: "SouthAfrica",
      myZoom: 5,
      selectedRegion: null,
      selectedResort: null,
      selectedSeason: null,
      bedrooms: null,
      maxPrice: null,
      dateFrom: "",
      dateTo: "",
    };
  },
  mounted() {
    this.init();
    this.getSeasons();
  },
  computed: {
    ...mapState("region", ["detailedRegion", "resort", "availRegion"]),
    ...mapState("timeshare", ["seasons"]),
    mapUrl() {
      return `http://maps.google.com/maps?q=${this.myMap}&z=${this.myZoom}&output=embed`;
    },
    regions() {
      return _.sortBy(this.detailedRegion, (r) => r.regionName);
    },
  },
  methods: {
    ...mapActions("region", ["init", "getAvail", "getRegions", "getResort"]),
    ...mapActions("timeshare", ["getSeasons"]),
    routerGoTo(goTo) {
      this.$router.push(goTo);
    },
    updateMap(resort) {
      this.myMap = "SouthAfrica";
      this.myMap = `${resort.lat},${resort.long}`;
      this.myZoom = 10;
    },
    regionEvent() {
      this.updateMapProvince(this.selectedRegion.regionName);
    },
    resortEvent() {
      this.updateMap(this.selectedResort);
    },
    updateMapProvince(province) {
      this.myMap = province.replace(/\s/g, "");
      this.myZoom = 7;
    },
    checkValueBedrooms() {
      if (this.bedrooms === "0") {
        this.bedrooms = null;
      }
    },
    checkValuePrice() {
      if (this.maxPrice === "0") {
        this.maxPrice = null;
      }
    },
    ShowResort() {
      if (this.selectedResort) {
        this.$router.push(`/resort/${this.selectedResort.resortId}`);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.map-url {
  color: #60cbeb;
  text-align: left;
}
.card-item {
  font-size: 100%;
}
.card-item:hover {
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 5px;
  cursor: pointer;
}
.darker-border {
  border-color: #a5a5a5;
}

.uniSelect {
  text-transform: none;
}

.uniSelect option {
  text-transform: none;
}

.uniSelectLabel {
  position: absolute;
  z-index: 2;
  margin-left: 15px;
  margin-top: 7px;
  font-family: "muli";
  font-size: 15px;
  color: rgb(118, 118, 118);
}
</style>
