import { Badge } from '@/Components/ui/badge';
import { ChartConfig, ChartContainer } from '@/Components/ui/chart';
import MetricChart from '@/Pages/Metric/MetricChart';
import { CartesianGrid, Line, LineChart, ReferenceLine, XAxis } from 'recharts';

interface EcgMetricPrintableChartProps {
    data: { date: number; average: number }[];
    frequency: number;
    measuredAt: string;
}

export default function EcgMetricPrintableChart({
    data,
    frequency,
    measuredAt,
}: EcgMetricPrintableChartProps) {
    const chartConfig: ChartConfig = {
        average: {
            label: 'Media',
            color: '#05A7A0',
        },
    };

    const subChartsAmount = 3;
    const itemPerSubCharts = data.length / subChartsAmount;

    const subData: { date: number; average: number }[][] = [];
    data.forEach((item, index) => {
        const subChartIndex = Math.floor(index / itemPerSubCharts);
        subData[subChartIndex] = subData[subChartIndex] || [];
        subData[subChartIndex].push(item);
    });

    const gridVerticalLines = subData.map((data) =>
        data.filter((item) => item.date % 12 === 0),
    );

    return (
        <MetricChart className="screen:invisible screen:fixed screen:-left-full print:visible print:relative">
            <div className="mb-4 flex w-full flex-col items-center justify-between screen:invisible">
                <Badge className="">{measuredAt}</Badge>
                {subData.map((data, index) => (
                    <ChartContainer
                        key={index}
                        config={chartConfig}
                        className="h-[220px]"
                        style={{ width: '100%' }}
                    >
                        <LineChart
                            accessibilityLayer
                            data={data}
                            margin={{
                                top: 4,
                                bottom: 0,
                                left: 24,
                                right: 24,
                            }}
                        >
                            <CartesianGrid stroke="#cdedec" />
                            {gridVerticalLines[index].map((item) => (
                                <ReferenceLine
                                    key={item.date}
                                    x={item.date}
                                    stroke="#cdedec"
                                />
                            ))}
                            <XAxis
                                className="font-semibold text-neutral-500"
                                dataKey="date"
                                tickLine={false}
                                axisLine={false}
                                tick={{ fill: '#69cac6' }}
                                interval={299}
                                tickFormatter={(value) =>
                                    `${value / frequency}s`
                                }
                            />
                            <Line
                                dataKey="average"
                                type="natural"
                                stroke="var(--color-average)"
                                strokeWidth={2}
                                dot={false}
                            />
                        </LineChart>
                    </ChartContainer>
                ))}
            </div>
        </MetricChart>
    );
}