"use client";
import { jsx as l, jsxs as s } from "react/jsx-runtime";
import c from "../../../_virtual/dayjs.min.js";
import { l as n } from "../../../_virtual/lodash.js";
import { useMemo as m } from "react";
import { hexContrast as b, hexToRgba as u, cn as v } from "../../../lib/utils.js";
import { TooltipProvider as g, Tooltip as T, TooltipTrigger as N, TooltipContent as y } from "../tooltip.js";
import { Typo as C } from "../typo.js";
import { useCalendar as k } from "./calendar-context.js";
const H = ({ appointment: e }) => {
  const { setSelectedAppointmentId: h } = k(), f = m(() => {
    if (e.color)
      return {
        backgroundColor: u(e.color, 0.75),
        borderColor: u(e.color, 1),
        color: b(e.color),
        backdropFilter: "blur(5px)"
      };
  }, [e.color]), o = e.endTime || c(`2000-01-01 ${e.startTime}`).add(1, "hour").format("HH:mm"), x = m(() => {
    const r = c(`2000-01-01 ${e.startTime}`), a = c(`2000-01-01 ${o}`).diff(r, "minute"), i = Math.floor(a / 60), d = a % 60;
    return i === 0 ? `${d}m` : d === 0 ? `${i}h` : `${i}h ${d}m`;
  }, [e.startTime, o]);
  return /* @__PURE__ */ l(g, { delayDuration: 300, children: /* @__PURE__ */ s(T, { children: [
    /* @__PURE__ */ l(N, { asChild: !0, children: /* @__PURE__ */ s(
      "div",
      {
        onClick: (r) => {
          r.preventDefault(), r.stopPropagation(), h(e.id);
        },
        style: f,
        className: v(
          "border-d-border flex h-full cursor-pointer flex-col justify-start rounded-r-md border border-l-4 p-2 shadow-md transition-all duration-200 ease-in-out hover:scale-105",
          e.className
        ),
        children: [
          /* @__PURE__ */ l("div", { className: "text-sm font-semibold", children: e?.title?.length > 15 ? e?.title?.slice(0, 15) + "..." : e?.title }),
          /* @__PURE__ */ s("div", { className: "text-xs", children: [
            e?.startTime,
            " - ",
            o
          ] }),
          e?.attributes?.filter((r) => r.showPreview).map((r, t) => /* @__PURE__ */ s(
            "div",
            {
              className: "bg-d-background/30 mt-1 rounded p-1 text-xs",
              children: [
                /* @__PURE__ */ l("span", { className: "font-semibold", children: r.key }),
                ":",
                " ",
                /* @__PURE__ */ l("span", { className: "font-medium", children: r.value })
              ]
            },
            t
          ))
        ]
      }
    ) }),
    /* @__PURE__ */ s(y, { side: "right", variant: "card", children: [
      e?.title && /* @__PURE__ */ s(C, { children: [
        e?.title,
        " (",
        x,
        ")"
      ] }),
      /* @__PURE__ */ s("div", { className: "text-d-accent-foreground", children: [
        e?.startTime,
        " - ",
        o
      ] }),
      /* @__PURE__ */ s("div", { className: "mt-2 mb-3.5 flex flex-col", children: [
        /* @__PURE__ */ l("span", { className: "font-medium", children: "Descrizione:" }),
        /* @__PURE__ */ l("span", { className: "text-d-accent-foreground text-xs", children: e?.description || "-" })
      ] }),
      e?.attributes && e.attributes.filter((r) => r.showTooltip).length > 0 && /* @__PURE__ */ l("div", { className: "space-y-1", children: e.attributes.filter((r) => r.showTooltip).map((r, t) => /* @__PURE__ */ s(
        "div",
        {
          className: "flex items-start justify-between gap-4 py-1 text-right",
          children: [
            /* @__PURE__ */ s("span", { className: "font-medium", children: [
              n.upperFirst(r.key),
              ":"
            ] }),
            /* @__PURE__ */ l("span", { className: "text-d-accent-foreground max-w-[200px]", children: typeof r.value == "string" ? n.upperFirst(r.value) : r.value })
          ]
        },
        t
      )) })
    ] })
  ] }) });
};
export {
  H as AppointmentCard
};
