import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { getDayOffset, formatDateShort } from './GanttChart.utils.js';
import { useGanttContext } from './GanttChart.js';
import { Tooltip } from '../../core/Tooltip/Tooltip.js';
import '../../core/Tooltip/Tooltip.animations.js';
import { GanttTaskContextMenu } from './GanttTaskContextMenu.js';

const GanttMilestone = React__default.memo(({ task, group, top, }) => {
    var _a;
    const { dayWidth, rangeStart, rowHeight, onTaskClick, readonly } = useGanttContext();
    const offset = getDayOffset(task.endDate, rangeStart);
    const left = offset * dayWidth + dayWidth / 2;
    const size = 14;
    const barColor = (_a = task.color) !== null && _a !== void 0 ? _a : group.color;
    const tooltipContent = (jsxs("div", { className: "text-sm space-y-1", children: [jsx("div", { className: "font-semibold", children: task.title }), jsxs("div", { className: "flex items-center gap-1.5 text-[var(--color-text-placeholder)]", children: [jsx("span", { className: "inline-block size-2 rounded-full shrink-0", style: { backgroundColor: group.color } }), group.title] }), jsx("div", { children: formatDateShort(task.endDate) })] }));
    const handleClick = (e) => {
        onTaskClick === null || onTaskClick === void 0 ? void 0 : onTaskClick(task, e);
    };
    const handleKeyDown = (e) => {
        if ((e.key === "Enter" || e.key === " ") && onTaskClick) {
            e.preventDefault();
            onTaskClick(task, e);
        }
    };
    return (jsx(GanttTaskContextMenu, { task: task, children: jsx(Tooltip, { content: tooltipContent, placement: "top", children: jsxs("div", { className: "absolute", style: {
                    left: left - size / 2,
                    top: top + rowHeight / 2 - size / 2,
                }, onClick: onTaskClick ? handleClick : undefined, onKeyDown: handleKeyDown, role: "button", tabIndex: onTaskClick ? 0 : undefined, "aria-label": `Milestone: ${task.title}`, children: [jsx("div", { className: `hover:scale-110 transition-transform ${readonly ? "cursor-default" : "cursor-pointer"}`, style: {
                            width: size,
                            height: size,
                            backgroundColor: barColor,
                            border: "2px solid var(--color-background, white)",
                            transform: "rotate(45deg)",
                            boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
                        } }), jsx("span", { className: "absolute text-sm font-medium whitespace-nowrap pointer-events-none", style: {
                            left: size + 4,
                            top: size / 2,
                            transform: "translateY(-50%)",
                            color: barColor,
                        }, children: task.title })] }) }) }));
});

export { GanttMilestone };
