<template>
  <!-- eslint-disable max-len -->
  <div>
    <div class="container">
      <section class="intro-single">
        <div class="container">
          <div class="row">
            <div class="col-md-12 col-lg-8">
              <div class="title-single-box">
                <h1 class="title-single">List {{ propertyType }} {{ salesType }} Property</h1>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div class="row">
        <div class="col-sm-12">
          <div class="title-box-d">
            <h5 class="title-d">Property Overview</h5>
          </div>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col-md-12">
          <form id="mainForm">
            <div class="form-group row">
              <div class="col-md-4">
                <label for="Property Type"></label>
                <select
                  class="form-control"
                  name="propertyType"
                  id="propertyType"
                  v-model="property.propertyTypeId"
                >
                  <option value="0">Please Select</option>
                  <option
                    v-for="item in propertyTypes"
                    :value="item.id"
                    :key="item.id"
                  >{{ item.description }}</option>
                </select>
              </div>
              <div v-if="propertyType === 'Commercial'" class="col-md-4">
                <label for="Property Name"></label>
                <input
                  class="form-control"
                  type="text"
                  placeholder="Property Name"
                  name="propertyName"
                  id="propertyName"
                  v-model="property.propertyName"
                />
              </div>
              <div v-if="propertyType === 'Commercial'" class="col-md-4">
                <label for="Unit"></label>
                <input
                  class="form-control"
                  placeholder="Unit"
                  type="text"
                  name="unit"
                  id="unit"
                  v-model="property.unit"
                />
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-4">
                <label for="Address Line 1"></label>
                <input
                  class="form-control"
                  type="text"
                  placeholder="Address Line 1"
                  name="address1"
                  id="address1"
                  v-model="property.addressLine1"
                />
              </div>
              <div class="col-md-4">
                <label for="Address Line 2"></label>
                <input
                  class="form-control"
                  type="text"
                  placeholder="Address Line 2"
                  name="address2"
                  id="address2"
                  v-model="property.addressLine2"
                />
              </div>
              <div class="col-md-4">
                <label for="Address Line 3"></label>
                <input
                  class="form-control"
                  type="text"
                  placeholder="Address Line 3"
                  name="address3"
                  id="address3"
                  v-model="property.addressLine3"
                />
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-4">
                <label for="Province"></label>
                <select
                  class="form-control"
                  name="propertyType"
                  id="propertyType"
                  @change="ProvinceSelected"
                  v-model="property.provinceId"
                >
                  <option value="0">Please select Province</option>
                  <option
                    v-for="province in provinces"
                    :value="province.id"
                    :key="province.id"
                  >{{ province.description }}</option>
                </select>
              </div>
              <div class="col-md-4">
                <label for="City"></label>
                <select
                  class="form-control"
                  name="propertyType"
                  id="propertyType"
                  @change="CitySelected"
                  v-model="property.cityId"
                >
                  <option value="0">Please Select</option>
                  <option
                    v-for="city in cities"
                    :value="city.id"
                    :key="city.id"
                  >{{ city.description }}</option>
                </select>
              </div>
              <div class="col-md-4">
                <label for="Suburb"></label>
                <select
                  class="form-control"
                  name="propertyType"
                  id="suburbselector"
                  v-model="property.suburbId"
                >
                  <option value="0">Please Select</option>
                  <option
                    v-for="suburb in suburbs"
                    :value="suburb.id"
                    :key="suburb.id"
                  >{{ suburb.description }}</option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-4">
                <label v-if="salesType === 'Rental'">Rental Price</label>
                <label v-if="salesType !== 'Rental'">Sales Price</label>
                <input
                  class="form-control"
                  type="number"
                  name="price"
                  id="price"
                  placeholder="R"
                  v-model="property.price"
                />
              </div>
              <div class="col-md-4" v-if="salesType === 'Rental'">
                <label>Per</label>
                <select
                  class="form-control"
                  name="propertyType"
                  id="propertyType"
                  v-model="property.per"
                >
                  <option value>Please select</option>
                  <option value="month">Month</option>
                  <option value="day">Day</option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-md-12">
                <label for="Property Description"></label>
                <TextEditor name="description" v-model="property.description" id="description" />
                <br />
                <p>* A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate website</p>
              </div>
            </div>
            <div class="form-group row" />
            <UserField
              v-if="propertyType === 'Residential' & propertyOverviewFields.length > 0"
              :fields="propertyOverviewFields[0].fields"
              :id="overviewProps"
              @UpdateUserDefinedFields="UpdateUserDefinedFields"
            ></UserField>
            <div class="form-group row" />
            <div v-for="item in propertyFields" :key="item.id">
              <div class="row">
                <div class="col-sm-12">
                  <div class="title-box-d">
                    <h5 class="title-d">{{ item.name }}</h5>
                  </div>
                </div>
              </div>
              <UserField
                :fields="item.fields"
                :id="item.id"
                @UpdateUserDefinedFields="UpdateUserDefinedFields"
              />
            </div>
            <div class="form-group row" />
            <div class="row">
              <div class="col-sm-12">
                <div class="title-box-d">
                  <h5 class="title-d">Images</h5>
                </div>
              </div>
            </div>
            <ImageLoad :loadedImages="loadedImages" />
            <button
              type="button"
              @click="SubmitData()"
              class="btn btn-b-n"
              style="width: 85px; height:40px;"
            >Save</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import TextEditor from 'vue-trix';
import UserField from './propertyUserField.vue';
import ImageLoad from './propertyImage.vue';

export default {
  name: 'PropertyEdit',
  components: {
    UserField,
    ImageLoad,
    TextEditor,
  },
  data() {
    return {
      propertyType: 'Residential',
      salesType: 'Rental',
      selectedProvince: '',
      selectedCity: '',
      property: {
        propertyTypeId: 0,
        propertyName: '',
        unit: '',
        addressLine1: '',
        addressLine2: '',
        addressLine3: '',
        suburbId: 0,
        cityId: 0,
        provinceId: 0,
        price: '',
        per: '',
        description: '',
        isSale: false,
        propertyUserFields: [],
        propertyImages: [],
      },
      images: [],
      propertyFieldValues: [],
    };
  },
  methods: {
    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
    ...mapActions('property', [
      'getPropertyTypes',
      'getPropertyOverviewFields',
      'getPropertyFields',
      'saveProperty',
    ]),
    SubmitData() {
      let isDefault = true;
      this.images.forEach((imagedata) => {
        this.property.propertyImages.push({
          image: imagedata,
          isDefault,
        });
        isDefault = false;
      });
      this.property.propertyUserFields = this.propertyFieldValues;

      this.saveProperty(Object.assign({}, { newProperty: this.property }));

      this.$router.push({
        path: '/property/search',
        query: { type: this.salesType, propertyType: this.propertyType },
      });
    },
    ProvinceSelected(item) {
      if (item.target.options.selectedIndex > 0) {
        this.selectedProvince = this.provinces[
          item.target.options.selectedIndex - 1
        ].description;
        this.getCities(Object.assign({}, { province: this.selectedProvince }));
      }
    },
    CitySelected(item) {
      if (item.target.options.selectedIndex > 0) {
        this.selectedCity = this.cities[
          item.target.options.selectedIndex - 1
        ].description;
        this.getSuburbs(
          Object.assign(
            {},
            { province: this.selectedProvince, city: this.selectedCity },
          ),
        );
      }
    },
    loadedImages(values) {
      this.images = values;
    },
    UpdateUserDefinedFields(item) {
      let update = false;
      this.propertyFieldValues.forEach((element) => {
        if (element.userDefinedFieldId === item.userDefinedFieldId) {
          element.value = item.value;
          update = true;
        }
      });
      if (!update) {
        this.propertyFieldValues.push(item);
      }
    },
  },
  mounted() {
    this.propertyType = this.$route.params.propType;
    this.salesType = this.$route.params.saleType;

    this.getProvince();
    this.getPropertyTypes(
      Object.assign({}, { propertyType: this.$route.params.propType }),
    );
    this.getPropertyOverviewFields();
    this.getPropertyFields(
      Object.assign({}, { propertyType: this.$route.params.propType }),
    );
  },
  computed: {
    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
    ...mapState('property', [
      'propertyTypes',
      'propertyOverviewFields',
      'propertyFields',
    ]),
    SalesTypeChanged() {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.propertyType = this.$route.params.propType;
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.salesType = this.$route.params.saleType;

      this.getPropertyTypes(
        Object.assign({}, { propertyType: this.$route.params.propType }),
      );

      this.getPropertyFields(
        Object.assign({}, { propertyType: this.$route.params.propType }),
      );

      return this.propertyType;
    },
  },
  watch: {
    SalesTypeChanged() {
      console.log(this.salesType);
    },
  },
};
</script>
