<template>
  <div class="form">
    <div id="sendmessage">Your details has been sent. Thank you!</div>
    <div id="errormessage"></div>
    <form action method="post" role="form" class="contactForm">
      <div class="form-row">
        <div class="form-group col-md-10">
          <div class="section-header">
            <h2>Detailed Individual Information</h2>
          </div>
          <SelectIndividual @onSelectedItemItemChange="onSelectedItemItemChange" />

          <div class="validation"></div>
        </div>

        <div class="form-group col-md-6">
          <input
            type="text"
            name="name"
            class="form-control"
            id="name"
            placeholder="Name"
            data-rule="minlen:4"
            data-msg="Please enter your name"
            v-model="currentUser.name"
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            class="form-control"
            name="surname"
            id="surname"
            placeholder="Surname"
            data-msg="Please enter your surname"
            v-model="currentUser.surname"
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            name="idnum"
            class="form-control"
            id="idnum"
            placeholder="ID Number"
            data-rule="minlen:4"
            data-msg="Please enter your ID number"
            v-model="currentUser.idNumber"
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            class="form-control"
            name="company"
            id="company"
            placeholder="Company Reg Number"
            data-rule="minlen:4"
            data-msg="Please enter your company reg number"
            v-model="currentUser.companyRegNumber"
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            name="marital"
            class="form-control"
            id="marital"
            placeholder="Marital Status"
            data-rule="minlen:4"
            data-msg="Please enter your marital status"
            v-model="currentUser.maritalStatus"
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            class="form-control"
            name="email"
            id="email"
            placeholder="Email Address"
            data-msg="Please enter your email address"
            v-model="currentUser.emailAddress"
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            name="cell"
            class="form-control"
            id="cell"
            placeholder="Cell Number"
            data-rule="minlen:4"
            data-msg="Please enter your cell number"
            v-model="currentUser.cellNumber"
          />
          <div class="validation"></div>
        </div>
        <div class="form-group col-md-6">
          <input
            type="text"
            class="form-control"
            name="landline"
            id="landline"
            placeholder="Landline Number"
            data-msg="Please enter your landline number"
            v-model="currentUser.landlineNumber"
          />
          <div class="validation"></div>
        </div>
      </div>
      <div v-if="showAddress">
        <div class="section-header">
          <h2>Address</h2>
        </div>
        <Address :address="currentUser ? currentUser.address : {}" />
      </div>
      <div v-if="showBank">
        <div class="section-header">
          <h2>Banking Details</h2>
        </div>
        <BankAccount :bank="currentUser ? currentUser.bankingDetails : {}" />
      </div>
    </form>
  </div>
</template>

<script>
/* eslint-disable */

import { mapState, mapGetters, mapActions } from "vuex";
import BankAccount from "../shared/bankAccount.vue";
import Address from "../misc/address.vue";
import SelectIndividual from "./selectIndividual.vue";
import propField from "../property/propertyFieldEditor.vue";
import items from "../../assets/staticData/itemsPerPage";

export default {
  components: {
    BankAccount,
    Address,
    SelectIndividual,
    propField,
  },
  data() {
    return {
      currentUser: {
        name: undefined,
        surname: undefined,
        idNumber: undefined,
        companyRegNumber: undefined,
        emailAddress: undefined,
        cellNumber: undefined,
        landlineNumber: undefined,
        bankingDetails: {},
        address: {},
      },
    };
  },
  props: {
    showChangeCurrentUser: {
      default: false,
    },
    showBank: {
      default: false,
    },
    showAddress: {
      default: false,
    },
  },
  computed: {
    ...mapState("timeshare", ["maritalStatus"]),
    ...mapState("individual", ["indiv"]),
    ...mapGetters({
      user: "authentication/getUser",
    }),
  },
  methods: {
    ...mapActions("individual", ["getIndividual", "updateIndividual"]),
    onSelectedItemItemChange(item) {
      this.currentUser = item;
    },
    UpdateValue(item) {
      if (item.fieldName) {
        if (item.fieldName === "name") {
          this.currentUser.name = item.value;
        }
        if (item.fieldName === "surname") {
          this.currentUser.surname = item.value;
        }
        if (item.fieldName === "idNumber") {
          this.currentUser.idNumber = item.value;
        }
        if (item.fieldName === "companyRegNumber") {
          this.currentUser.companyRegNumber = item.value;
        }
        if (item.fieldName === "maritalStatus") {
          this.currentUser.maritalStatus = item.value;
        }
        if (item.fieldName === "email") {
          this.currentUser.emailAddress = item.value;
        }
        if (item.fieldName === "cellNumber") {
          this.currentUser.cellNumber = item.value;
        }
        if (item.fieldName === "landlineNumber") {
          this.currentUser.landlineNumber = item.value;
        }
        if (item.fieldName === "streetNumber") {
          this.currentUser.address.streetNumber = item.value;
        }
        if (item.fieldName === "street") {
          this.currentUser.address.street = item.value;
        }
        if (item.fieldName === "province") {
          if (item.value !== "") {
            this.address.province = this.provinces.find(
              (p) => p.description === item.value
            );
            this.address.provinceId = this.address.province.id;
            this.getCities(Object.assign({}, { province: item.value }));
            this.address.city = null;
            this.address.suburb = null;
            this.address.postalCode = "";
          } else {
            this.address.province = null;
            this.address.city = null;
            this.address.suburb = null;
            this.address.postalCode = "";
            this.cities = [];
            this.suburbs = [];
          }
        }
        if (item.fieldName === "city") {
          if (item.value !== "") {
            const newCity = this.cities.find(
              (p) => p.description === item.value
            );
            this.address.city = newCity;
            this.address.cityId = newCity.id;
            this.address.suburb = null;
            this.address.postalCode = "";
          } else {
            this.address.city = null;
            this.address.suburb = null;
            this.address.postalCode = "";
            this.suburbs = [];
          }
        }
        if (item.fieldName === "suburb") {
          if (item.value !== "") {
            const newSuburb = this.suburbs.find(
              (p) => p.description === item.value
            );
            this.address.suburb = newSuburb;
            this.address.suburbId = newSuburb.id;
            this.address.postalCode = this.address.suburb.postalCode;
          } else {
            this.address.suburb = null;
            this.address.postalCode = "";
          }
        }
      }
    },
    SubmitData() {
      console.log(this.currentUser);
      this.updateIndividual(this.currentUser);
      this.$router.push("/status/userManagementPage");
    },
    Close() {
      this.$router.push("/status/userManagementPage");
    },
  },
};
</script>

<style lang="scss" scoped></style>
