<template>
  <div v-if="!onlyButton" class="mt-4 flex-grow-1">
    <div class="loading">
      <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw" />
      <span class="sr-only">{{ trans(ADDRESS_LOADING) }}</span>
    </div>

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

    <div v-if="flag.success" class="alert alert-success">
      {{ trans(getSuccessText) }}
      <span v-if="forceRedirect">{{ trans(ADDRESS_WAIT_REDIRECTION) }}</span>
    </div>

    <div
      v-if="
        !this.context.edit &&
        !this.flag.success &&
        this.context.target.name !== 'household'
      "
      class="mt-5"
    >
      <div class="no-address-yet">
        <i class="fa fa-map-marker" aria-hidden="true" />
        <p class="chill-no-data-statement">
          {{ trans(ADDRESS_NOT_YET_ADDRESS) }}
        </p>

        <action-buttons
          :options="this.options"
          :defaultz="this.defaultz"
          class="add-address-btn"
        >
          <template #action>
            <button
              @click.prevent="$emit('openEditPane')"
              class="btn"
              :class="getClassButton"
              type="button"
              name="button"
              :title="trans(getTextButton)"
            >
              <span v-if="displayTextButton">{{ trans(getTextButton) }}</span>
            </button>
          </template>
        </action-buttons>
      </div>
    </div>

    <address-render-box
      :address="address"
      :is-multiline="false"
      :use-date-pane="useDatePane"
    />

    <div v-if="this.context.target.name === 'household' || this.context.edit">
      <action-buttons :options="this.options" :defaultz="this.defaultz">
        <template #action>
          <button
            @click.prevent="$emit('openEditPane')"
            class="btn"
            :class="getClassButton"
            type="button"
            name="button"
            :title="trans(getTextButton)"
          >
            <span v-if="displayTextButton">{{ trans(getTextButton) }}</span>
          </button>
        </template>
      </action-buttons>
    </div>
  </div>

  <div v-if="onlyButton">
    <action-buttons
      :options="this.options"
      :defaultz="this.defaultz"
      class="add-address-btn"
    >
      <template #action>
        <button
          @click.prevent="$emit('openEditPane')"
          class="btn"
          :class="getClassButton"
          type="button"
          name="button"
          :title="trans(getTextButton)"
        >
          <span v-if="displayTextButton">{{ trans(getTextButton) }}</span>
        </button>
      </template>
    </action-buttons>
  </div>
</template>

<script>
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
import ActionButtons from "./ActionButtons.vue";
import {
  ACTIVITY_CREATE_ADDRESS,
  ACTIVITY_EDIT_ADDRESS,
  ADDRESS_NOT_YET_ADDRESS,
  ADDRESS_WAIT_REDIRECTION,
  ADDRESS_LOADING,
  ADDRESS_ADDRESS_EDIT_SUCCESS,
  ADDRESS_ADDRESS_NEW_SUCCESS,
  trans,
} from "translator";

export default {
  name: "ShowPane",
  methods: {},
  components: {
    AddressRenderBox,
    ActionButtons,
  },
  setup() {
    return {
      trans,
      ACTIVITY_CREATE_ADDRESS,
      ACTIVITY_EDIT_ADDRESS,
      ADDRESS_NOT_YET_ADDRESS,
      ADDRESS_WAIT_REDIRECTION,
      ADDRESS_LOADING,
      ADDRESS_ADDRESS_NEW_SUCCESS,
      ADDRESS_ADDRESS_EDIT_SUCCESS,
    };
  },
  props: [
    "context",
    "defaultz",
    "options",
    "flag",
    "entity",
    "errorMsg",
    "useDatePane",
  ],
  emits: ["openEditPane"],
  mounted() {
    //console.log('context', this.context)
  },
  computed: {
    address() {
      return this.entity.address;
    },
    displayTextButton() {
      return typeof this.options.button !== "undefined" &&
        typeof this.options.button.displayText !== "undefined"
        ? this.options.button.displayText
        : this.defaultz.button.displayText;
    },
    getClassButton() {
      let type = this.context.edit
        ? this.defaultz.button.type.edit
        : this.defaultz.button.type.create;
      let size =
        typeof this.options.button !== "undefined" &&
        this.options.button.size !== null
          ? `${this.options.button.size} `
          : "";
      return `${size}${type}`;
    },
    getTextButton() {
      if (
        typeof this.options.button.text !== "undefined" &&
        (this.options.button.text.edit !== null ||
          this.options.button.text.create !== null)
      ) {
        // console.log('this.options.button.text', this.options.button.text)
        return this.context.edit
          ? ACTIVITY_CREATE_ADDRESS
          : ACTIVITY_EDIT_ADDRESS;
      }
      console.log("defaultz", this.defaultz);
      return this.context.edit
        ? this.defaultz.button.text.edit
        : this.defaultz.button.text.create;
    },
    getSuccessText() {
      return this.context.edit
        ? ADDRESS_ADDRESS_EDIT_SUCCESS
        : ADDRESS_ADDRESS_NEW_SUCCESS;
    },
    onlyButton() {
      return typeof this.options.onlyButton !== "undefined"
        ? this.options.onlyButton
        : this.defaultz.onlyButton;
    },
    forceRedirect() {
      return !(
        this.context.backUrl === null ||
        typeof this.context.backUrl === "undefined"
      );
    },
    // showMessageWhenNoAddress() {
    //     let showMessageWhenNoAddress = this.options.showMessageWhenNoAddress === undefined ? this.defaultz.showMessageWhenNoAddress : this.options.showMessageWhenNoAddress;
    //     if (showMessageWhenNoAddress === true || showMessageWhenNoAddress === false) {
    //         return !this.context.edit && !this.address.id && showMessageWhenNoAddress;
    //     }
    //    return !this.context.edit && !this.address.id && this.options.stickyActions;
    // }
  },
};
</script>

<style lang="scss">
.address-container {
  display: flex;
  justify-content: flex-end;
  border-radius: 5px;
}
.no-address-yet {
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  i {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  .add-address-btn {
    display: block;
  }
}
</style>
