<template>
  <component :is="component" class="chill-entity entity-address">
    <component :is="component" class="address" :class="multiline">
      <div v-if="isConfidential">
        <confidential :position-btn-far="true">
          <template #confidential-content>
            <div v-if="isMultiline === true">
              <p v-for="(l, i) in address.lines" :key="`line-${i}`">
                {{ l }}
              </p>
              <p v-if="showButtonDetails">
                <address-details-button
                  :address_id="address.address_id"
                  :address_ref_status="address.refStatus"
                />
              </p>
            </div>
            <div v-else>
              <p v-if="'' !== address.text" class="street">
                {{ address.text }}
              </p>
              <p v-if="null !== address.postcode" class="postcode">
                {{ address.postcode.code }}
                {{ address.postcode.name }}
              </p>
              <p v-if="null !== address.country" class="country">
                {{ localizeString(address.country.name) }}
              </p>
            </div>
          </template>
        </confidential>
      </div>

      <div v-if="!isConfidential">
        <div v-if="isMultiline === true">
          <p v-for="(l, i) in address.lines" :key="`line-${i}`">
            {{ l }}
          </p>
          <p v-if="showButtonDetails">
            <address-details-button
              :address_id="address.address_id"
              :address_ref_status="address.refStatus"
            />
          </p>
        </div>
        <div v-else>
          <p v-if="address.text" class="street">
            {{ address.text }}
            <template v-if="showButtonDetails">
              <address-details-button
                :address_id="address.address_id"
                :address_ref_status="address.refStatus"
              />
            </template>
          </p>
        </div>
      </div>
    </component>

    <div v-if="useDatePane === true" class="address-more">
      <div v-if="address.validFrom">
        <span class="validFrom">
          <b>{{ trans(ADDRESS_VALID_FROM) }}</b
          >: {{ $d(address.validFrom.date) }}
        </span>
      </div>
      <div v-if="address.validTo">
        <span class="validTo">
          <b>{{ trans(ADDRESS_VALID_TO) }}</b
          >: {{ $d(address.validTo.date) }}
        </span>
      </div>
    </div>
  </component>
</template>

<script>
import Confidential from "ChillMainAssets/vuejs/_components/Confidential.vue";
import AddressDetailsButton from "ChillMainAssets/vuejs/_components/AddressDetails/AddressDetailsButton.vue";
import { trans, ADDRESS_VALID_FROM, ADDRESS_VALID_TO } from "translator";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

export default {
  name: "AddressRenderBox",
  methods: { localizeString },
  components: {
    Confidential,
    AddressDetailsButton,
  },
  props: {
    address: {
      type: Object,
    },
    isMultiline: {
      default: true,
      type: Boolean,
    },
    useDatePane: {
      default: false,
      type: Boolean,
    },
    showButtonDetails: {
      default: true,
      type: Boolean,
    },
  },
  setup() {
    return { trans, ADDRESS_VALID_FROM, ADDRESS_VALID_TO };
  },
  computed: {
    component() {
      return this.isMultiline === true ? "div" : "span";
    },
    multiline() {
      return this.isMultiline === true ? "multiline" : "";
    },
    isConfidential() {
      return this.address.confidential;
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  &:after {
    content: " ";
    margin-right: 0.3em;
  }
}
</style>
