<template>
  <!-- eslint-disable max-len -->
  <div class="box-collapse">
    <div class="title-box-d">
      <h3 class="title-d">Search</h3>
    </div>
    <span class="close-box-collapse right-boxed ion-ios-close"></span>
    <div class="box-collapse-wrap form">
      <form class="form-a">
        <div class="row">
          <div class="col-md-12 mb-2">
            <div class="form-group">
              <label for="Type">Keyword</label>
              <input
                type="text"
                class="form-control form-control-lg form-control-a"
                placeholder="Keyword"
              />
            </div>
          </div>
          <div class="col-md-4 mb-2">
            <div class="form-group">
              <input class="form-check-input" type="radio" name="paid" value="Yes" />
              <label class="form-check-label" for="paid">Timeshare</label>
            </div>
          </div>
          <div class="col-md-4 mb-2">
            <div class="form-group">
              <input class="form-check-input" type="radio" name="paid" value="Yes" />
              <label class="form-check-label" for="paid">Residential</label>
            </div>
          </div>
          <div class="col-md-4 mb-2">
            <div class="form-group">
              <input class="form-check-input" type="radio" name="paid" value="Yes" />
              <label class="form-check-label" for="paid">Commercial</label>
            </div>
          </div>
          <div class="col-md-6 mb-2">
            <div class="form-group">
              <input class="form-check-input" type="radio" name="paid" value="Yes" />
              <label class="form-check-label" for="paid">Sale</label>
            </div>
          </div>
          <div class="col-md-6 mb-2">
            <div class="form-group">
              <input class="form-check-input" type="radio" name="paid" value="Yes" />
              <label class="form-check-label" for="paid">Rent</label>
            </div>
          </div>
          <div class="col-md-6 mb-2">
            <div class="form-group">
              <label for="city">Provice</label>
              <select
                class="form-control form-control-lg form-control-a"
                id="provinceselector"
                @change="ProvinceSelected"
                v-model="selectedProvince"
              >
                <option>All</option>
                <option v-for="(province, i) in provinces" :key="i">{{ province.description }}</option>
              </select>
            </div>
          </div>
          <div class="col-md-6 mb-2">
            <div class="form-group">
              <label for="city">City</label>
              <select
                class="form-control form-control-lg form-control-a"
                id="cityselector"
                @change="CitySelected"
                v-model="selectedCity"
              >
                <option>All</option>
                <option v-for="(city, i) in cities" :key="i">{{ city.description }}</option>
              </select>
            </div>
          </div>
          <div class="col-md-6 mb-2">
            <div class="form-group">
              <label for="city">Suburb</label>
              <select
                class="form-control form-control-lg form-control-a"
                id="suburbselector"
                v-model="selectedSuburb"
              >
                <option>All</option>
                <option v-for="(suburb, i) in suburbs" :key="i">{{ suburb.description }}</option>
              </select>
            </div>
          </div>

          <div class="col-md-12">
            <!-- <button type="submit" class="btn btn-b">Search</button> -->
            <router-link to="/property/search" class="btn btn-b" tag="button">Search</router-link>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';

export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      selectedSuburb: '',
    };
  },
  mounted() {
    this.getProvince();
  },
  computed: {
    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
  },
  methods: {
    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
    ProvinceSelected(item) {
      if (item.target.value !== 'All') {
        this.getCities(Object.assign({}, this.selectedProvince));
      }
    },
    CitySelected(item) {
      if (item.target.value !== 'All') {
        this.getSuburbs(
          Object.assign(
            {},
            { province: this.selectedProvince, city: this.city },
          ),
        );
      }
    },
  },
};
</script>
