<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 { CircleCheckBigIcon, CircleXIcon, EllipsisVertical, MailIcon } from "lucide-vue-next";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";

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

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

const getEmails = (p) => (Array.isArray(p?.emails) ? p.emails : []);

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">
    <template v-if="getEmails(person).length">
      <Card class="p-2 gap-0" v-for="(email, idx) in getEmails(person)" :key="idx">
        <div class="flex items-center justify-between" v-if="edit">
          <div class="flex flex-wrap gap-1">
            <span
              v-if="email?.label"
              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
            >
              {{ email.label }}
            </span>
            <span
              v-else
              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"
            >
              Email
            </span>
          </div>
          <div v-if="edit">
            <div class="flex items-center gap-1">
              <Button
                v-if="enableEmail"
                @click="$emit('email', email)"
                title="Pošlji e-pošto"
                size="icon"
                variant="ghost"
              >
                <MailIcon :size="18" />
              </Button>
              <DropdownMenu>
              <DropdownMenuTrigger as-child>
                <Button variant="ghost" size="icon" title="Možnosti">
                  <EllipsisVertical />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem @click="handleEdit(email.id)">
                  <EditIcon size="sm" />
                  <span>Uredi</span>
                </DropdownMenuItem>
                <DropdownMenuItem
                  @click="
                    handleDelete(email.id, email?.value || email?.email || email?.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>
        </div>
        <div class="p-1">
          <p class="font-medium text-gray-900 leading-relaxed flex gap-1 items-center">
            {{ email?.value || email?.email || email?.address || "-" }}
            <TooltipProvider v-if="email?.valid">
              <Tooltip>
                <TooltipTrigger as-child>
                  <CircleCheckBigIcon color="#3e9392" :size="18" />
                </TooltipTrigger>
                <TooltipContent>Veljavna</TooltipContent>
              </Tooltip>
            </TooltipProvider>
            <TooltipProvider v-if="email?.failed">
              <Tooltip>
                <TooltipTrigger as-child>
                  <CircleXIcon color="#dc2626" :size="18" />
                </TooltipTrigger>
                <TooltipContent>Neuspešna dostava</TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </p>
          <p
            v-if="email?.note"
            class="mt-2 text-xs text-gray-600 whitespace-pre-wrap leading-relaxed"
          >
            {{ email.note }}
          </p>
        </div>
      </Card>
    </template>
    <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 email"
    >
      <PlusIcon class="h-8 w-8 text-gray-400" />
    </button>
    <p
      v-else-if="!edit && !getEmails(person).length"
      class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200"
    >
      Ni e-poštnih naslovov.
    </p>
  </div>
</template>
