<script setup lang="ts">
import { useUserStore } from "@/stores/user";
import { computed } from "vue";
import { useEntities } from "@/services/entities";
import { useTranslation } from "i18next-vue";

const { t } = useTranslation();

const user = useUserStore();
const { organisations } = useEntities();

const privateAddress = computed(() => {
  let addressText = `${user.street} ${user.street_number}`.trim();
  if (user.postal_code || user.city) {
    if (addressText.length) {
      addressText += ", ";
    }
    addressText += `${user.postal_code} ${user.city}`;
  }
  if (user.country) {
    if (addressText.length) {
      addressText += ", ";
    }
    addressText += user.country.name;
  }

  return addressText.trim();
});

const organisationName = computed(() => {
  const org = organisations.value.find((o) => o.id === user.organisation);
  if (org) {
    return org.name;
  }
  return t("a.Keine Angabe");
});

const orgAddress = computed(() => {
  let addressText =
    `${user.organisation_street} ${user.organisation_street_number}`.trim();
  if (user.organisation_postal_code || user.organisation_city) {
    if (addressText.length) {
      addressText += ", ";
    }
    addressText += `${user.organisation_postal_code} ${user.organisation_city}`;
  }
  if (user.organisation_country) {
    if (addressText.length) {
      addressText += ", ";
    }
    addressText += user.organisation_country.name;
  }

  return addressText.trim();
});

const invoiceAddress = computed(() => {
  if (user.invoice_address === "org") {
    return t("a.Gleich wie die Firmenanschrift");
  }
  return t("a.Gleich wie die Privatadresse");
});
</script>

<template>
  <div class="mb-4 bg-white p-3 md:p-6">
    <h3 class="mb-2">{{ $t("a.Persönliche Informationen") }}</h3>
    <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-8 sm:py-6">
      <label class="block font-semibold leading-6">{{ $t("a.Vorname") }}</label>
      <div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.first_name }}</div>
      <label class="block font-semibold leading-6">{{ $t("a.Name") }}</label>
      <div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.last_name }}</div>
      <label class="block font-semibold leading-6">
        {{ $t("a.E-Mail Adresse") }}
      </label>
      <div class="mb-3 sm:col-span-2 sm:mb-0">{{ user.email }}</div>
      <label class="block font-semibold leading-6">
        {{ $t("a.Privatadresse") }}
      </label>
      <div class="mb-3 sm:col-span-2 sm:mb-0">
        <template v-if="privateAddress">
          {{ privateAddress }}
        </template>
        <span v-else class="text-gray-800">{{ $t("a.Keine Angabe") }}</span>
      </div>
    </div>
  </div>
  <div class="bg-white p-3 md:p-6">
    <h3 class="my-2">{{ $t("a.Geschäftsdaten") }}</h3>
    <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-8 sm:py-6">
      <label class="block font-semibold leading-6">{{ $t("a.Unternehmen") }}</label>
      <div class="mb-3 sm:col-span-2 sm:mb-0">{{ organisationName }}</div>
      <label class="block font-semibold leading-6">
        {{ $t("a.Firmenanschrift") }}
      </label>
      <div class="sm:col-span-2">
        <template v-if="orgAddress">
          {{ orgAddress }}
        </template>
        <span v-else class="text-gray-800">{{ $t("a.Keine Angabe") }}</span>
      </div>
    </div>
  </div>
  <div class="bg-white p-3 md:p-6">
    <h3 class="my-2">{{ $t("a.Rechnungsadresse") }}</h3>
    {{ invoiceAddress }}
  </div>
</template>
