<template>
  <div class="container tpartycontainer">
    <div class="tparty-identification">
      <span v-if="item.result.profession" class="profession">{{
        item.result.profession
      }}</span>
      <span class="name"> {{ item.result.text }}&nbsp; </span>
      <span class="location">
        <template v-if="hasAddress">
          {{ getAddress.text }} -
          {{ getAddress.postcode.name }}
        </template>
      </span>
    </div>
    <div class="tpartyparent" v-if="hasParent">
      <span class="name"> > {{ item.result.parent.text }} </span>
    </div>
  </div>

  <div class="right_actions">
    <badge-entity :entity="item.result" :options="{ displayLong: true }" />
    <on-the-fly
      v-if="item.result.kind === 'company'"
      :parent="item.result"
      @save-form-on-the-fly="saveFormOnTheFly"
      action="addContact"
      ref="onTheFly"
    />
    <on-the-fly type="thirdparty" :id="item.result.id" action="show" />
  </div>
</template>

<script>
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";

const i18n = {
  messages: {
    fr: {
      thirdparty: {
        contact: "Personne physique",
        company: "Personne morale",
        child: "Personne de contact",
      },
    },
  },
};

export default {
  name: "SuggestionThirdParty",
  components: {
    OnTheFly,
    BadgeEntity,
  },
  props: ["item"],
  emits: ["newPriorSuggestion"],
  i18n,
  computed: {
    hasAddress() {
      if (this.$props.item.result.address !== null) {
        return true;
      }
      if (this.$props.item.result.parent !== null) {
        return this.$props.item.result.parent.address !== null;
      }
      return false;
    },
    hasParent() {
      return this.$props.item.result.parent !== null;
    },
    getAddress() {
      if (this.$props.item.result.address !== null) {
        return this.$props.item.result.address;
      }
      if (this.$props.item.result.parent.address !== null) {
        return this.$props.item.result.parent.address;
      }

      return null;
    },
  },
  methods: {
    saveFormOnTheFly({ data }) {
      makeFetch("POST", "/api/1.0/thirdparty/thirdparty.json", data)
        .then((response) => {
          this.$emit("newPriorSuggestion", response);
          this.$refs.onTheFly.closeModal();
        })
        .catch((error) => {
          if (error.name === "ValidationException") {
            for (let v of error.violations) {
              this.$toast.open({ message: v });
            }
          } else {
            this.$toast.open({ message: "An error occurred" });
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.tpartycontainer {
  .tpartyparent {
    .name {
      font-weight: bold;
      font-variant: all-small-caps;
    }
  }
  .tparty-identification {
    span:not(.name) {
      margin-left: 0.5em;
      opacity: 0.5;
      font-size: 90%;
      font-style: italic;
    }
    .profession {
      font-weight: 800;
      color: black;
      font-style: normal !important;
    }
  }
}
</style>
