<template>
  <div>
    <div class="conainer">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="title-box-d">
              <br />
              <h1 class="title-d" style="text-align:left; font-size: 250%">My Details</h1>
            </div>
          </div>
        </div>
        <div class="row"></div>
        <div class="row" style="text-align:left">
          <div class="col-md-6" style="margin-bottom: 1em">
            <label>Name</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input class="form-control" type="text" name="FirstName" v-model="user.firstName" />
            </div>
          </div>
          <div class="col-md-6" style="margin-bottom: 1em">
            <label>Surname</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input class="form-control" type="text" name="Surname" v-model="user.surname" />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-6" style="margin-bottom: 1em">
            <label>Eamil Addres</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="emailAddress"
                v-model="user.emailAddress"
              />
            </div>
          </div>
          <div class="col-md-6" style="margin-bottom: 1em">
            <label>Cellphone</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input class="form-control" type="text" name="cellphone" v-model="user.cellphone" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="title-box-d">
              <br />
              <h2 class="title-d" style="text-align:left;">My Address</h2>
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-4" style="margin-bottom: 1em">
            <div class="custom-control custom-switch">
              <label>Do you live in a complex or block of flats?</label>
              <input
                style="margin-left: 1px"
                type="checkbox"
                class="custom-control-input"
                id="thCloseSwitch"
                :checked="userAddress.isComplex"
                @change="selectionChanged"
              />
              <label
                class="custom-control-label"
                for="thCloseSwitch"
                style="margin-left: 40px"
              >{{userAddress.isComplex ? 'Yes' : 'No'}}</label>
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-4" style="margin-bottom: 1em">
            <button
              @click="ShowMap()"
              class="btn btn-b-n"
              type="button"
              data-dismiss="modal"
            >Update Address</button>
          </div>
        </div>
        <div v-if="userAddress.isComplex" class="row" style="text-align:left">
          <div class="col-md-6" style="margin-bottom: 1em">
            <label>Complex Name</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="FirstName"
                v-model="userAddress.complexName"
              />
            </div>
          </div>
          <div class="col-md-6" style="margin-bottom: 1em">
            <label>Unit Number</label>
            <div class="input-group-prepend">
              <span class="input-group-text">
                <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
              </span>
              <input
                class="form-control"
                type="text"
                name="Surname"
                v-model="userAddress.unitNumber"
              />
            </div>
          </div>
        </div>
        <div class="row" style="text-align:left">
          <div class="col-md-6" style="margin-bottomL 1em">
            <div class="row" style="text-align:left">
              <div class="col-md-12" style="margin-bottom: 1em">
                <label>Street Number</label>
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="FirstName"
                    v-model="userAddress.streetNumber"
                    disabled
                  />
                </div>
              </div>
            </div>
            <div class="row" style="text-align:left">
              <div class="col-md-12" style="margin-bottom: 1em">
                <label>Street Name</label>
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="FirstName"
                    v-model="userAddress.streetName"
                    disabled
                  />
                </div>
              </div>
            </div>
            <div class="row" style="text-align:left">
              <div class="col-md-12" style="margin-bottom: 1em">
                <label>Suburb</label>
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="FirstName"
                    v-model="userAddress.suburb"
                    disabled
                  />
                </div>
              </div>
            </div>
            <div class="row" style="text-align:left">
              <div class="col-md-12" style="margin-bottom: 1em">
                <label>City</label>
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="FirstName"
                    v-model="userAddress.city"
                    disabled
                  />
                </div>
              </div>
            </div>
            <div class="row" style="text-align:left">
              <div class="col-md-12" style="margin-bottom: 1em">
                <label>Province</label>
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="FirstName"
                    v-model="userAddress.province"
                    disabled
                  />
                </div>
              </div>
            </div>
            <div class="row" style="text-align:left">
              <div class="col-md-12" style="margin-bottom: 1em">
                <label>Postal Code</label>
                <div class="input-group-prepend">
                  <span class="input-group-text">
                    <eva-icon name="person-outline" fill="#24aae1"></eva-icon>
                  </span>
                  <input
                    class="form-control"
                    type="text"
                    name="FirstName"
                    v-model="userAddress.postalCode"
                    disabled
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6" style="margin-bottomL 1em">
            <Map :showAutoComplete="false" :showLocationLabel="false" :setLocation="mapCoords" />
          </div>
        </div>
        <div class="row offset-md-5">
          <div class="col-md-2">
            <button @click="Save()" class="btn btn-b-n" type="button" data-dismiss="modal">Save</button>
          </div>
          <div class="col-md-2">
            <button @click="Close()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <modal name="map" :width="600" :height="620">
      <div class="container">
        <h2>Update Location</h2>
        <br />
        <Map :showLocationLabel="false" @GoogleAddress="UpdateAddress" />
        <div class="row" style="text-align:left">
          <div class="col-md-4" style="margin-bottom: 1em">
            <button @click="HideMap()" class="btn btn-b-n" type="button" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </modal>
  </div>
</template>

<script>
import Map from "../shared/mapSetLocation";
import { mapState, mapActions } from "vuex";

export default {
  name: "CustomerDetails",
  components: {
    Map
  },
  data() {
    return {
      complex: false
    };
  },
  methods: {
    ...mapActions("user", ["getUser", "updateUser", "getUserAddress"]),
    selectionChanged() {
      this.userAddress.isComplex = !this.userAddress.isComplex;
    },
    ShowMap() {
      this.$modal.show("map");
    },
    HideMap() {
      this.$modal.hide("map");
    },
    UpdateAddress(address) {
      console.log(JSON.stringify(address));
      this.userAddress.streetNumber = address.streetNumber;
      this.userAddress.streetName = address.streetName;
      this.userAddress.suburb = address.suburb;
      this.userAddress.city = address.city;
      this.userAddress.province = address.province;
      this.userAddress.country = address.country;
      this.userAddress.postalCode = address.postalCode;
      this.userAddress.googleMapUrl = address.url;
      this.userAddress.latitude = address.coordinates.lat;
      this.userAddress.longitude = address.coordinates.lng;
    },
    Save() {
      this.user.addresses = [];
      this.user.addresses.push(this.userAddress);
      this.updateUser(this.user);
    },
    Close() {
      this.$router.push("/");
    }
  },
  computed: {
    ...mapState("user", ["user", "userAddress"]),
    mapCoords() {
      var coords = {
        lat: this.userAddress.latitude,
        lng: this.userAddress.longitude
      };
      return coords;
    }
  },
  mounted() {
    this.getUser(2); //Will need to replace with auth object's ID
    this.getUserAddress(2);
  }
};
</script>