import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";

import { CardContent } from "@/components/ui/card";

import {
    ChartConfig,
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
} from "@/components/ui/chart";
import { useQuery } from "@tanstack/react-query";
import { getAdjustments } from "@/utils/querys/logistics/siloAdjustments/getAdjustments";
import { LstCard } from "@/components/extendedUI/LstCard";
import { format } from "date-fns";

export default function ChartData(props: any) {
    const { data, isError, isLoading } = useQuery(getAdjustments());
    const chartConfig = {
        stock: {
            label: "Stock",
            color: "rgb(255, 99, 132)",
        },
        actual: {
            label: "Actual",
            color: "rgb(53, 162, 235)",
        },
    } satisfies ChartConfig;

    if (isLoading) return <div>Loading chart data</div>;
    if (isError) return <div>Error in loading chart data</div>;

    let adjustments: any = data.filter(
        (l: any) => l.locationID === props.laneId
    );
    adjustments = adjustments.splice(0, 10).map((s: any) => {
        return {
            date: format(s.dateAdjusted.replace("Z", ""), "M/d/yyyy hh:mm"),
            stock: s.currentStockLevel,
            actual: s.newLevel,
        };
    });

    return (
        <LstCard className="w-[425px] h-[250px] m-1">
            <CardContent>
                {adjustments.length === 0 ? (
                    <span>No silo data has been entered for this silo.</span>
                ) : (
                    <ChartContainer config={chartConfig}>
                        <AreaChart
                            accessibilityLayer
                            data={adjustments}
                            margin={{
                                left: 35,
                                right: 45,
                                bottom: 50,
                            }}
                        >
                            <CartesianGrid vertical={false} />
                            <XAxis
                                dataKey="date"
                                tickLine={false}
                                axisLine={false}
                                tickMargin={14}
                                angle={-45}
                                textAnchor="end"
                                dy={10}
                                tickFormatter={(value) =>
                                    format(value, "M/d/yyyy")
                                }
                            />
                            <ChartTooltip
                                cursor={false}
                                content={
                                    <ChartTooltipContent indicator="dot" />
                                }
                            />
                            <Area
                                dataKey="stock"
                                type="natural"
                                fill="rgba(53, 162, 235, 0.5)"
                                fillOpacity={0.4}
                                stroke="rgba(53, 162, 235, 0.5)"
                                stackId="a"
                            />
                            <Area
                                dataKey="actual"
                                type="natural"
                                fill="rgba(255, 99, 132, 0.5)"
                                fillOpacity={0.4}
                                stroke="rgba(255, 99, 132, 0.5)"
                                stackId="a"
                            />
                        </AreaChart>
                    </ChartContainer>
                )}
            </CardContent>
            {/* <CardFooter>
                <div className="flex w-full items-start gap-2 text-sm">
                    <div className="grid gap-2">
                        <div className="flex items-center gap-2 font-medium leading-none">
                            Trending up by 5.2% this month{" "}
                            <TrendingUp className="h-4 w-4" />
                        </div>
                        <div className="flex items-center gap-2 leading-none text-muted-foreground">
                            January - June 2024
                        </div>
                    </div>
                </div>
            </CardFooter> */}
        </LstCard>
    );
}
