import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { cn } from '../../../utils/cn.js';
import { useGanttContext } from './GanttChart.js';
import { toDate, isWeekend } from '../../../utils/dateUtils.js';

const GanttTimelineGrid = ({ days, height, }) => {
    const { theme, dayWidth, todayMarker, todayOffset, rows, rowHeight, holidays, gridLines, } = useGanttContext();
    const totalWidth = days.length * dayWidth;
    const showVertical = gridLines === "both" || gridLines === "vertical";
    const showHorizontal = gridLines === "both" || gridLines === "horizontal";
    // Build a dateKey -> holiday lookup
    const holidayMap = useMemo(() => {
        const map = new Map();
        for (const h of holidays) {
            const d = toDate(h.date);
            const key = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
            map.set(key, { label: h.label, color: h.color });
        }
        return map;
    }, [holidays]);
    return (jsxs("div", { className: "absolute inset-0 pointer-events-none", style: { width: totalWidth, height }, children: [days.map((day, i) => {
                var _a, _b;
                const key = `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`;
                const holiday = holidayMap.get(key);
                return (jsx("div", { className: cn("absolute top-0 bottom-0", showVertical && theme.gridLineStyle, isWeekend(day) && theme.weekendStyle), style: { left: i * dayWidth, width: dayWidth }, children: holiday && (jsxs(Fragment, { children: [jsx("div", { className: "absolute inset-0", style: {
                                    backgroundColor: (_a = holiday.color) !== null && _a !== void 0 ? _a : "var(--color-warning-100, rgba(245, 158, 11, 0.08))",
                                } }), jsx("span", { className: "absolute bottom-1 left-1/2 -translate-x-1/2 text-[8px] whitespace-nowrap opacity-60", style: { color: (_b = holiday.color) !== null && _b !== void 0 ? _b : "var(--color-warning, #F59E0B)" }, children: holiday.label })] })) }, i));
            }), showHorizontal &&
                rows.map((_, i) => (jsx("div", { className: "absolute left-0 right-0 border-b border-[var(--color-border)]/20", style: { top: (i + 1) * rowHeight } }, `h-${i}`))), todayMarker && todayOffset !== null && (jsxs(Fragment, { children: [jsx("div", { className: cn("absolute top-0 bottom-0", theme.todayColumnStyle), style: { left: todayOffset * dayWidth, width: dayWidth } }), jsx("div", { className: cn("absolute top-0 bottom-0 z-10", theme.todayMarkerStyle), style: { left: todayOffset * dayWidth + dayWidth / 2 } })] }))] }));
};

export { GanttTimelineGrid };
