<script setup>
import { DottedMenu, EditIcon, TrashBinIcon, PlusIcon } from "@/Utilities/Icons";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { Card } from "@/Components/ui/card";
import { Button } from "../ui/button";
import { EllipsisVertical } from "lucide-vue-next";

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

const emit = defineEmits(["add", "edit", "delete"]);

const handleAdd = () => emit("add");
const handleEdit = (id) => emit("edit", id);
const handleDelete = (id, label) => emit("delete", id, label);
</script>

<template>
  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
    <Card class="p-2 gap-0" v-for="address in person.addresses" :key="address.id">
      <div class="flex items-center justify-between">
        <div class="flex flex-wrap gap-1">
          <span
            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800"
          >
            {{ address.country }}
          </span>
          <span
            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
          >
            {{ address.type.name }}
          </span>
        </div>
        <div v-if="edit">
          <DropdownMenu>
            <DropdownMenuTrigger as-child>
              <Button variant="ghost" size="icon" title="Možnosti">
                <EllipsisVertical />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem @click="handleEdit(address.id)">
                <EditIcon size="sm" />
                <span>Uredi</span>
              </DropdownMenuItem>
              <DropdownMenuItem
                @click="handleDelete(address.id, address.address)"
                class="text-red-600 focus:bg-red-50 focus:text-red-600"
              >
                <TrashBinIcon size="sm" class="text-red-600" />
                <span>Izbriši</span>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
      <p class="font-medium text-gray-900 leading-relaxed p-1">
        {{
          address.post_code && address.city
            ? `${address.address}, ${address.post_code} ${address.city}`
            : address.address
        }}
      </p>
      <p class="text-sm text-muted-foreground p-1" v-if="address.description">
        {{ address.description }}
      </p>
    </Card>
    <button
      v-if="edit"
      @click="handleAdd"
      class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center h-full"
      title="Dodaj naslov"
    >
      <PlusIcon class="h-8 w-8 text-gray-400" />
    </button>
  </div>
</template>
