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

function getDayLabel(day, zoom) {
    switch (zoom) {
        case "day":
            return formatDayLabel(day, zoom);
        case "week":
            // Show day number only on Mondays
            return day.getDay() === 1 ? `${day.getDate()}` : "";
        case "quarter":
            // Show day number on 1st, 8th, 15th, 22nd
            return [1, 8, 15, 22].includes(day.getDate())
                ? `${day.getDate()}`
                : "";
        case "month":
            // Show day number on 1st and 15th
            return day.getDate() === 1 || day.getDate() === 15
                ? `${day.getDate()}`
                : "";
        case "year":
            // Show only on 1st of each month
            return day.getDate() === 1
                ? day.toLocaleDateString("en-US", { month: "short" })
                : "";
    }
}
const GanttTimelineHeader = ({ days, monthSpans, }) => {
    const { theme, dayWidth, zoom } = useGanttContext();
    const totalWidth = days.length * dayWidth;
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    return (jsxs("div", { className: cn(theme.timelineHeaderStyle), style: { width: totalWidth }, children: [jsx("div", { className: "flex", style: { height: 28 }, children: monthSpans.map((span) => (jsx("div", { className: cn(theme.timelineMonthStyle), style: { width: span.span * dayWidth }, children: span.label }, `${span.label}-${span.startIndex}`))) }), jsx("div", { className: "flex", style: { height: 28 }, children: days.map((day, i) => {
                    const isToday = isSameDay(day, today);
                    const weekend = isWeekend(day);
                    return (jsx("div", { className: cn(theme.timelineDayStyle, weekend && "bg-[var(--color-background-secondary)]/50", isToday && "font-semibold text-[var(--color-primary)]"), style: { width: dayWidth }, children: getDayLabel(day, zoom) }, i));
                }) })] }));
};

export { GanttTimelineHeader };
