<script setup>
import { UserEditIcon } from "@/Utilities/Icons";
import { Button } from "../ui/button";

const props = defineProps({
  person: Object,
  edit: { type: Boolean, default: true },
  personEdit: { type: Boolean, default: true },
});

const emit = defineEmits(['edit']);

const getMainAddress = (adresses) => {
  const addr = adresses.filter((a) => a.type.id === 1)[0] ?? "";
  if (addr !== "") {
    const tail = addr.post_code && addr.city ? `, ${addr.post_code} ${addr.city}` : "";
    const country = addr.country !== "" ? ` - ${addr.country}` : "";
    return addr.address !== "" ? addr.address + tail + country : "";
  }
  return "";
};

const getMainPhone = (phones) => {
  const pho = phones.filter((a) => a.type.id === 1)[0] ?? "";
  if (pho !== "") {
    const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : "";
    return pho.nu !== "" ? countryCode + pho.nu : "";
  }
  return "";
};

const handleEdit = () => {
  emit('edit');
};
</script>

<template>
  <div class="flex justify-end mb-3">
    <Button
      v-if="edit && personEdit"
      @click="handleEdit"
      class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all"
      title="Uredi osebo"
    >
      <UserEditIcon size="md" />
      <span>Uredi</span>
    </button>
  </div>
  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Nu.</p>
      <p class="text-sm font-semibold text-gray-900">{{ person.nu }}</p>
    </div>
    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Name.</p>
      <p class="text-sm font-semibold text-gray-900">
        {{ person.full_name }}
      </p>
    </div>
    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Tax NU.</p>
      <p class="text-sm font-semibold text-gray-900">
        {{ person.tax_number }}
      </p>
    </div>
    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Social security NU.</p>
      <p class="text-sm font-semibold text-gray-900">
        {{ person.social_security_number }}
      </p>
    </div>
  </div>
  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-3">
    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Address</p>
      <p class="text-sm font-medium text-gray-900">
        {{ getMainAddress(person.addresses) }}
      </p>
    </div>
    <div class="rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Phone</p>
      <p class="text-sm font-medium text-gray-900">
        {{ getMainPhone(person.phones) }}
      </p>
    </div>
    <div class="md:col-span-full lg:col-span-1 rounded-lg p-3 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
      <p class="text-xs font-medium uppercase tracking-wider text-gray-500 mb-1">Description</p>
      <p class="text-sm font-medium text-gray-900">
        {{ person.description }}
      </p>
    </div>
  </div>
</template>

