<template>
  <div class="container">
    <form
      id="mainForm"
      method="POST"
      action="/filter"
      accept-charset="UTF-8"
      enctype="multipart/form-data"
    >
      <div class="form-group text-left">
        <label>Region</label>
        <select class="form-control" name="region" id="region" v-model="selectedRegion">
          <option v-for="(item, i) in regions" :key="i">{{item.regionName}}</option>
        </select>
      </div>
      <div class="form-group text-left">
        <label>Resort Name</label>
        <select class="form-control" name="resort" id="resort" v-model="selectedResort">
          <option v-for="(item, i) in filteredResorts" :key="i">{{item.resortName}}</option>
        </select>
      </div>
      <div class="form-group text-left">
        <label>Bedrooms</label>
        <select class="form-control" name="bedrooms" v-model="sellItem.bedrooms">
          <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
        </select>
      </div>
      <hr />
      <div class="form-group">
        <div class="row">
          <div class="col-md-6 text-left">
            <label>Minimum Price</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">R</span>
              </div>
              <input
                class="form-control"
                type="number"
                step="any"
                id="minPrice"
                name="minPrice"
                placeholder="Minimum Price"
              />
            </div>
          </div>
          <div class="col-md-6 text-left">
            <label>Maximum Price</label>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">R</span>
              </div>
              <input
                class="form-control"
                type="number"
                step="any"
                id="maxPrice"
                name="maxPrice"
                placeholder="Maximum Price"
              />
            </div>
          </div>
        </div>
      </div>
      <hr />
      <div class="form-group">
        <div class="row">
          <div class="col-md-6 text-left">
            <label>Filter Arrival Date From</label>
            <input type="date" class="form-control" name="arrivaldate" value />
          </div>
          <div class="col-md-6 text-left">
            <label>Filter Arrival Date To</label>
            <input type="date" class="form-control" name="arrivaldate" value />
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import _ from 'lodash';

export default {
  data() {
    return {
      selectedRegion: undefined,
      selectedResort: undefined,
    };
  },
  created() {
    this.initTimeshare();
  },
  computed: {
    ...mapState('timeshare', [
      'resorts',
      'regions',
      'detailedRegion',
      'seasons',
      'resortBedrooms',
      'maxSleep',
      'bankedEntities',
      'sellItem',
      'agencies',
      'agents',
    ]),
    filteredResorts() {
      if (this.selectedRegion) {
        const list = _.find(
          this.detailedRegion,
          i => i.region.regionName === this.selectedRegion,
        ).children;
        return _.sortBy(list, r => r.resortName);
      }
      return this.resorts;
    },
  },
  methods: {
    ...mapActions('timeshare', ['initTimeshare']),
    addResort(item) {
      this.myResort.push(item);
    },
  },
};
</script>

<style scoped>
</style>
