import { Box, Typography, useTheme } from "@mui/material";
import { BarChart } from '@mui/x-charts/BarChart';
import { PieChart } from '@mui/x-charts/PieChart';
import {
    ArcElement,
    BarElement,
    CategoryScale,
    Chart as ChartJS,
    Legend,
    LinearScale,
    LineElement,
    PointElement,
    Title,
    Tooltip,
} from "chart.js";
import { useTranslation } from "react-i18next";

// Chart.js registrieren
ChartJS.register(
    CategoryScale,
    LinearScale,
    BarElement,
    Title,
    Tooltip,
    Legend,
    ArcElement,
    LineElement,
    PointElement
);

export default function StatisticsInfo() {
    const theme = useTheme();
    const {t} = useTranslation();

    return (
        <Box sx={{ color: theme.palette.text.primary }}>
            <Typography variant="h4" align="center" gutterBottom>
                Sales Statistics
            </Typography>

            <Box sx={{ mb: 4 }}>
                <Typography variant="h6" align="center" gutterBottom>
                    Monthly Sales in n
                </Typography>
                <BarChart
                series={[
                    { data: [35, 44, 24, 34], label: t('seeds') },
                    { data: [51, 6, 49, 30], label: t('technicalComponents') },
                    { data: [60, 50, 15, 25], label: t('gardenSupplies') },
                    { data: [15, 25, 30, 50], label: t('other')},
                ]}
                height={290}
                xAxis={[{ data: ['2025-01', '2025-02', '2025-03', '2025-04'] }]}
                />
            </Box>
            <Box sx={{ mb: 4 }}>
                <Typography variant="h6" align="center" gutterBottom>
                    Monthly Revenue in €
                </Typography>
                <BarChart
                series={[
                    { data: [200, 244, 224, 234], label: t('seeds') },
                    { data: [888, 300, 600, 1200], label: t('technicalComponents') },
                    { data: [260, 150, 50, 0], label: t('gardenSupplies') },
                    { data: [10, 20, 30, 50], label: t('other')},
                ]}
                height={290}
                xAxis={[{ data: ['2025-01', '2025-02', '2025-03', '2025-04'] }]}
                />
            </Box>

            <Box sx={{ mb: 4 }}>
                <Typography variant="h6" align="center" gutterBottom>
                    Item Sales Distribution
                </Typography>
                <PieChart
                series={[
                    {
                    data: [
                        { id: 0, value: 10, label: t('seeds') },
                        { id: 1, value: 15, label: t('technicalComponents') },
                        { id: 2, value: 10, label: t('gardenSupplies') },
                        { id: 2, value: 3, label: t('other') },
                    ],
                    },
                ]}
                width={200}
                height={200}
                />
            </Box>
        </Box>
    );
}
