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

interface EcgMetricChartProps {
    data: { date: number; average: number }[];
    frequency: number;
    measuredAt: Dayjs;
    deviceName?: string;
}

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

    const containerWidth = data.length * 2;

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

    return (
        <div className="relative">
            <div className="absolute top-0 flex -translate-y-1/2 translate-x-1/2 gap-2 print:hidden">
                <Badge>{measuredAt.format('HH:mm:ss')}</Badge>
                {deviceName && <Badge variant="outline">{deviceName}</Badge>}
            </div>
            <MetricChart className="print:hidden">
                <div className="overflow-x-auto">
                    <ChartContainer
                        config={chartConfig}
                        className="h-[220px]"
                        style={{ width: containerWidth }}
                    >
                        <LineChart
                            accessibilityLayer
                            data={data}
                            margin={{
                                top: 4,
                                bottom: 0,
                                left: 24,
                                right: 24,
                            }}
                        >
                            <CartesianGrid stroke="#cdedec" />
                            {gridVerticalLines.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>
            <EcgMetricPrintableChart
                data={data}
                frequency={frequency}
                measuredAt={measuredAt.format('HH:mm:ss')}
            />
        </div>
    );
}