import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { useStats } from '../../hooks/useStats';
import { formatMinutesAfter, getToday, getLocalOffsetFromReference } from '../../utils/time';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, } from 'recharts';
const WakeupPlot = ({ from_date, to_date, wakeup_ref, bedtime_ref }) => {
    const { wakeupBedtime, isLoading } = useStats(from_date, to_date, '07:00', '20:00', wakeup_ref, bedtime_ref);
    const [chartData, setChartData] = useState([]);
    useEffect(() => {
        if (!wakeupBedtime?.days) {
            setChartData([]);
            return;
        }
        const data = wakeupBedtime.days.map((day) => {
            const daysAgo = Math.floor((new Date(getToday()).getTime() - new Date(day.date).getTime()) / (1000 * 60 * 60 * 24));
            const offsetFromRef = day.wakeup_minutes !== null ? getLocalOffsetFromReference(day.wakeup_minutes, wakeup_ref) : 0;
            return {
                date: daysAgo === 0 ? 'Today' : `${daysAgo}d ago`,
                minutes: offsetFromRef,
                time: day.wakeup_minutes !== null
                    ? formatMinutesAfter(offsetFromRef, wakeup_ref)
                    : 'N/A',
            };
        }).reverse();
        setChartData(data);
    }, [wakeupBedtime, wakeup_ref]);
    if (isLoading)
        return _jsx("div", { className: "text-center p-4", children: "Loading plot..." });
    if (!chartData.length) {
        return _jsx("div", { className: "text-center p-4 text-gray-500", children: "No data available for this period." });
    }
    return (_jsxs("div", { className: "bg-white p-4 rounded-xl shadow-sm border border-gray-200", children: [_jsx("h3", { className: "text-lg font-semibold mb-4 text-gray-800", children: "Wakeup Times" }), _jsx(ResponsiveContainer, { width: "100%", height: 200, children: _jsxs(LineChart, { data: chartData, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "#e5e7eb" }), _jsx(XAxis, { dataKey: "date", tick: { fontSize: 12 }, tickLine: false, axisLine: { stroke: '#e5e7eb' } }), _jsx(YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: { stroke: '#e5e7eb' }, tickFormatter: (value) => formatMinutesAfter(value, wakeup_ref), domain: ['dataMin - 30', 'dataMax + 30'] }), _jsx(Tooltip, { formatter: (value) => [
                                formatMinutesAfter(value ?? 0, wakeup_ref),
                                'Wakeup',
                            ], labelFormatter: (label) => label }), _jsx(Line, { type: "monotone", dataKey: "minutes", stroke: "#3b82f6", strokeWidth: 2, dot: { fill: '#3b82f6', r: 4 }, connectNulls: false })] }) })] }));
};
export default WakeupPlot;