<template>
  <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">{{ $t("loading") }}</span>
  </div>

  <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
    {{ errorMsg }}
  </div>

  <address-render-box :address="selectedAddress" />

  <div class="row">
    <div v-if="showDateFrom" class="col-lg-6 address-valid date-since">
      <h3>{{ $t(getValidFromDateText) }}</h3>
      <div class="input-group mb-3">
        <span class="input-group-text" id="validFrom"
          ><i class="fa fa-fw fa-calendar"
        /></span>
        <input
          type="date"
          class="form-control form-control-lg"
          name="validFrom"
          :placeholder="$t(getValidFromDateText)"
          v-model="validFrom"
          aria-describedby="validFrom"
        />
      </div>
    </div>

    <div v-if="showDateTo" class="col-lg-6 address-valid date-until">
      <h3>{{ $t(getValidToDateText) }}</h3>
      <div class="input-group mb-3">
        <span class="input-group-text" id="validTo"
          ><i class="fa fa-fw fa-calendar"
        /></span>
        <input
          type="date"
          class="form-control form-control-lg"
          name="validTo"
          :placeholder="$t(getValidToDateText)"
          v-model="validTo"
          aria-describedby="validTo"
        />
      </div>
    </div>
  </div>

  <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>
</template>

<script>
import { dateToISO, ISOToDate } from "ChillMainAssets/chill/js/date";
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
import ActionButtons from "./ActionButtons.vue";

export default {
  name: "DatePane",
  components: {
    AddressRenderBox,
    ActionButtons,
  },
  props: [
    "context",
    "options",
    "defaultz",
    "flag",
    "entity",
    "errorMsg",
    "insideModal",
  ],
  computed: {
    address() {
      return this.entity.address;
    },
    validFrom: {
      set(value) {
        this.entity.selected.valid.from = ISOToDate(value);
      },
      get() {
        return dateToISO(this.entity.selected.valid.from);
      },
    },
    validTo: {
      set(value) {
        this.entity.selected.valid.to = ISOToDate(value);
      },
      get() {
        return dateToISO(this.entity.selected.valid.to);
      },
    },
    getValidFromDateText() {
      return this.context.target.name === "household"
        ? "move_date"
        : "validFrom";
    },
    getValidToDateText() {
      return "validTo";
    },
    showDateFrom() {
      return !this.context.edit && this.options.useDate.validFrom;
    },
    showDateTo() {
      return !this.context.edit && this.options.useDate.validTo;
    },
    selectedAddress() {
      let address = {};

      address["country"] = this.entity.selected.country
        ? this.entity.selected.country
        : null;
      address["postcode"] = this.entity.selected.postcode
        ? this.entity.selected.postcode
        : null;

      if (this.entity.selected.address) {
        let number = this.entity.selected.address.streetNumber
          ? this.entity.selected.address.streetNumber
          : null;
        let street = this.entity.selected.address.street
          ? this.entity.selected.address.street
          : null;
        address["text"] = number + ", " + street;

        address["street"] = this.entity.selected.address.street
          ? this.entity.selected.address.street
          : null;
        address["streetNumber"] = this.entity.selected.address.streetNumber
          ? this.entity.selected.address.streetNumber
          : null;
        address["floor"] = this.entity.selected.address.floor
          ? this.entity.selected.address.floor
          : null;
        address["corridor"] = this.entity.selected.address.corridor
          ? this.entity.selected.address.corridor
          : null;
        address["steps"] = this.entity.selected.address.steps
          ? this.entity.selected.address.steps
          : null;
        address["flat"] = this.entity.selected.address.flat
          ? this.entity.selected.address.flat
          : null;
        address["buildingName"] = this.entity.selected.address.buildingName
          ? this.entity.selected.address.buildingName
          : null;
        address["distribution"] = this.entity.selected.address.distribution
          ? this.entity.selected.address.distribution
          : null;
        address["extra"] = this.entity.selected.address.extra
          ? this.entity.selected.address.extra
          : null;
      }

      if (this.entity.selected.valid) {
        address["validFrom"] = this.entity.selected.valid.from
          ? dateToISO(this.entity.selected.valid.from)
          : null;
        address["validTo"] = this.entity.selected.valid.to
          ? dateToISO(this.entity.selected.valid.to)
          : null;
      }

      return address;
    },
  },
};
</script>
