<template>
  <div class="address-form">
    <!-- Not display in modal -->
    <div v-if="insideModal === false" class="loading">
      <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw" />
      <span class="sr-only">Loading...</span>
    </div>

    <div v-if="errors.length" class="alert alert-warning">
      <ul>
        <li v-for="(e, i) in errors" :key="i">
          {{ e }}
        </li>
      </ul>
    </div>

    <h4 class="h3">
      {{ trans(ADDRESS_SELECT_AN_ADDRESS_TITLE) }}
    </h4>
    <div class="row my-3">
      <div class="col-lg-6">
        <div class="form-check">
          <input
            type="checkbox"
            class="form-check-input"
            id="isConfidential"
            v-model="isConfidential"
            :value="valueConfidential"
          />
          <label class="form-check-label" for="isConfidential">
            {{ trans(ADDRESS_IS_CONFIDENTIAL) }}
          </label>
        </div>
        <div class="form-check">
          <input
            type="checkbox"
            class="form-check-input"
            id="isNoAddress"
            v-model="isNoAddress"
            :value="value"
          />
          <label class="form-check-label" for="isNoAddress">
            {{ trans(ADDRESS_IS_NO_ADDRESS) }}
          </label>
        </div>

        <country-selection
          :context="context"
          :entity="entity"
          :flag="flag"
          :check-errors="checkErrors"
          @get-cities="$emit('getCities', selected.country)"
        />

        <city-selection
          :entity="entity"
          :context="context"
          :focus-on-address="focusOnAddress"
          :update-map-center="updateMapCenter"
          :flag="flag"
          :check-errors="checkErrors"
          @get-reference-addresses="
            $emit('getReferenceAddresses', selected.city)
          "
        />

        <address-selection
          v-if="!isNoAddress"
          :entity="entity"
          :context="context"
          :update-map-center="updateMapCenter"
          :flag="flag"
          :check-errors="checkErrors"
        />
      </div>
      <div class="col-lg-6 mt-3 mt-lg-0">
        <address-map :entity="entity" ref="addressMap" />
      </div>
    </div>

    <address-more :entity="entity" :is-no-address="isNoAddress" />

    <action-buttons
      v-if="insideModal === false"
      :options="this.options"
      :defaultz="this.defaultz"
    >
      <template #before>
        <slot name="before" />
      </template>
      <template #action>
        <slot name="action" />
      </template>
      <template #after>
        <slot name="after" />
      </template>
    </action-buttons>
  </div>
</template>

<script>
import CountrySelection from "./AddAddress/CountrySelection";
import CitySelection from "./AddAddress/CitySelection";
import AddressSelection from "./AddAddress/AddressSelection";
import AddressMap from "./AddAddress/AddressMap";
import AddressMore from "./AddAddress/AddressMore";
import ActionButtons from "./ActionButtons.vue";
import {
  ADDRESS_SELECT_AN_ADDRESS_TITLE,
  ADDRESS_IS_CONFIDENTIAL,
  ADDRESS_IS_NO_ADDRESS,
  trans,
} from "translator";

export default {
  name: "EditPane",
  components: {
    CountrySelection,
    CitySelection,
    AddressSelection,
    AddressMap,
    AddressMore,
    ActionButtons,
  },
  setup() {
    return {
      trans,
      ADDRESS_SELECT_AN_ADDRESS_TITLE,
      ADDRESS_IS_CONFIDENTIAL,
      ADDRESS_IS_NO_ADDRESS,
    };
  },
  props: [
    "context",
    "options",
    "defaultz",
    "flag",
    "entity",
    "errorMsg",
    "insideModal",
    "errors",
    "checkErrors",
  ],
  emits: ["getCities", "getReferenceAddresses"],
  data() {
    return {
      value: false,
      valueConfidential: false,
    };
  },
  computed: {
    address() {
      return this.entity.address;
    },
    loaded() {
      return this.entity.loaded;
    },
    selected() {
      return this.entity.selected;
    },
    addressMap() {
      return this.entity.addressMap;
    },
    isConfidential: {
      set(value) {
        this.entity.selected.confidential = value;
      },
      get() {
        return this.entity.selected.confidential;
      },
    },
    isNoAddress: {
      set(value) {
        console.log("isNoAddress value", value);
        this.entity.selected.isNoAddress = value;
        this.checkErrors();
      },
      get() {
        return this.entity.selected.isNoAddress;
      },
    },
  },
  methods: {
    focusOnAddress() {
      const addressSelector = document.getElementById("addressSelector");
      if (addressSelector !== null) {
        addressSelector.focus();
      }
    },
    updateMapCenter(point) {
      console.log("point", point);
      this.addressMap.center[0] = point.coordinates[0];
      this.addressMap.center[1] = point.coordinates[1];
      this.$refs.addressMap.update(); // cast child methods
    },
  },
};
</script>

<style lang="scss">
div.address-form {
  div#address_map {
    height: 400px;
    width: 100%;
    z-index: 1;
  }
}
</style>
