<template>
  <!-- eslint-disable max-len -->
  <div class="box-collapse">
    <div class="title-box-d">
      <h3 class="title-d" style="text-align:left">Search</h3>
    </div>
    <span class="close-box-collapse right-boxed ion-ios-close"></span>
    <div class="box-collapse-wrap">
      <form class="form-a">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group" style="text-align:left">
              <label for="Type">Keyword</label>
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text myFill" style="font-size:75%;">
                    <i class="fa fa-search"></i>
                  </span>
                </div>
                <input
                  type="text"
                  class="form-control"
                  placeholder="Keyword"
                  v-model="keyword"
                  @change="keywordChanged"
                />
                <div class="input-group-append" @click="clearKeyword()">
                  <span class="input-group-text cursor-pointer myFill">
                    <b>X</b>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <button
              type="button"
              :class="[
                selectedPropertyType === 'Timeshare'
                  ? 'tabButton isSelected'
                  : 'tabButton isUnSelected'
              ]"
              @click="setTypeTimeshare"
            >
              <b>Timeshare</b>
            </button>
          </div>
          <div class="col-md-2">
            <button
              type="button"
              :class="[
                selectedPropertyType === 'Residential'
                  ? 'tabButton isSelected'
                  : 'tabButton isUnSelected'
              ]"
              @click="setTypeResidential"
            >
              <b>Residential</b>
            </button>
          </div>
          <div class="col-md-2">
            <button
              type="button"
              :class="[
                selectedPropertyType === 'Commercial'
                  ? 'tabButton isSelected'
                  : 'tabButton isUnSelected'
              ]"
              @click="setTypeCommercial"
            >
              <b>Commercial</b>
            </button>
          </div>
          <div class="col-md-12" v-if="selectedPropertyType === 'Timeshare'">
            <timeshareSearch :keyword="keyword" />
          </div>
          <div class="col-md-12" v-else>
            <propertySearch :propertyType="selectedPropertyType" />
          </div>
          <div class="col-md-12">
            <button type="button" class="btn btn-b-n" @click="Search">Search</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import propertySearch from '../property/propertySearchFields.vue';
import timeshareSearch from '../timeshare/searchTimeshare.vue';

export default {
  components: {
    propertySearch,
    timeshareSearch,
  },
  data() {
    return {
      selectedPropertyType: 'Timeshare',
      keyword: '',
    };
  },
  computed: {
    ...mapState('weekList', ['filter']),
    ...mapState('propertySearch', ['propertySearch']),
  },
  methods: {
    updateType(item) {
      this.selectedPropertyType = item;
    },
    Search() {
      if (this.selectedPropertyType === 'Timeshare') {
        this.$router.push('/timesharesearch');
      } else {
        this.propertySearch.keyword = this.keyword;
        this.$router.push('/property/propertySearch/results');
      }
    },
    setTypeTimeshare() {
      this.selectedPropertyType = 'Timeshare';
    },
    setTypeResidential() {
      this.selectedPropertyType = 'Residential';
    },
    setTypeCommercial() {
      this.selectedPropertyType = 'Commercial';
    },
    clearKeyword() {
      this.keyword = '';
    },
    keywordChanged() {
      if (this.selectedPropertyType !== 'Timeshare') {
        this.propertySearch.keyword = this.keyword;
      }
    },
  },
};
</script>
