import * as React from 'react';
import { Card, CardHeader, CardContent } from '@mui/material';
import {
    ResponsiveContainer,
    AreaChart,
    Area,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
} from 'recharts';
import { useTranslate } from 'react-admin';
import { format, subDays, addDays } from 'date-fns';

const lastDay = new Date();
const lastMonthDays = Array.from({ length: 30 }, (_, i) => subDays(lastDay, i));
const aMonthAgo = subDays(new Date(), 30);

const dateFormatter = (date) =>
    new Date(date).toLocaleDateString();

// const aggregateOrdersByDay = (orders) =>
//     orders
//         .filter((order) => order.status !== 'cancelled')
//         .reduce(
//             (acc, curr) => {
//                 const day = format(curr.date, 'yyyy-MM-dd');
//                 if (!acc[day]) {
//                     acc[day] = 0;
//                 }
//                 acc[day] += curr.total;
//                 return acc;
//             },
//             {}
//         );

// const getRevenuePerDay = (orders) => {
//     const daysWithRevenue = aggregateOrdersByDay(orders);
//     return lastMonthDays.map(date => ({
//         date: date.getTime(),
//         total: daysWithRevenue[format(date, 'yyyy-MM-dd')] || 0,
//     }));
// };

const NbChart = (props) => {
    const { orders } = props;
    const translate = useTranslate();
    if (!orders) return null;

    return (
        <Card>
            <CardHeader title={translate('page.dashboard.chart.histories')} />
            <CardContent>
                <div style={{ width: '100%', height: 300 }}>
                    <ResponsiveContainer>
                        <AreaChart data={orders?.trandItem
                        }>
                            <defs>
                                <linearGradient
                                    id="colorUv"
                                    x1="0"
                                    y1="0"
                                    x2="0"
                                    y2="1"
                                >
                                    <stop
                                        offset="5%"
                                        stopColor="#5091abff"
                                        stopOpacity={0.8}
                                    />
                                    <stop
                                        offset="95%"
                                        stopColor="#5091abff"
                                        stopOpacity={0}
                                    />
                                </linearGradient>
                            </defs>
                            <XAxis
                                dataKey="orderTime"

                                domain={[
                                    addDays(aMonthAgo, 1).getTime(),
                                    new Date().getTime(),
                                ]}
                                tickFormatter={dateFormatter}
                            />
                            <YAxis dataKey="inQty" name="Revenue" unit="" />
                            <CartesianGrid strokeDasharray="3 3" />
                            <Tooltip
                                cursor={{ strokeDasharray: '3 3' }}
                                formatter={(value) =>
                                    new Intl.NumberFormat(undefined, {
                                        style: 'currency',
                                        currency: 'USD',
                                    }).format(value)
                                }
                                labelFormatter={(label) =>
                                    dateFormatter(label)
                                }
                            />
                            <Area
                                type="monotone"
                                dataKey="inQty"
                                stroke="#50911aff"
                                strokeWidth={2}
                                fill="url(#colorUv)"
                            />
                            <Area
                                type="monotone"
                                dataKey="outQty"
                                stroke="#5091abff"
                                strokeWidth={2}
                                fill="url(#colorUv)"
                            />
                        </AreaChart>
                    </ResponsiveContainer>
                </div>
            </CardContent>
        </Card>
    );
};

export default NbChart;