import { AreaChart } from "@mantine/charts";
import "@mantine/charts/styles.css";
import PageBlock from "../../../../../../components/PageBlock/PageBlock.tsx";
import { Skeleton, Stack } from "@mantine/core";
import { Total } from "../Total/Total.tsx";
import styles from "../../../../ui/StatisticsPage.module.css";
import { formatDate } from "../../../../../../types/utils.ts";
import { useProfitTabContext } from "../../contexts/ProfitTabContext.tsx";


export const ProfitChart = () => {
    const {
        profitChartData: profitData,
        isChartLoading: isLoading,
    } = useProfitTabContext();

    const formattedProfitData = profitData.map(
        value => {
            return { ...value, date: formatDate(value.date) };
        },
    );

    const getChartsSeries = [
        [
            { name: "profit", label: "Прибыль", color: "indigo.6" },
            { name: "revenue", label: "Выручка", color: "teal.6" },
            { name: "expenses", label: "Расходы", color: "red.6" },
        ],
        [
            { name: "cardsCount", label: "Количество сделок", color: "indigo.6" },
        ],
    ];

    const units = ["₽", "шт"];

    const chartSizes = ["47vh", "28vh"];

    return (
        <div className={styles["profit-chart-container"]}>
            <Total profitData={profitData} />
            <PageBlock style={{ padding: "25px" }}>
                <Skeleton visible={isLoading}>
                    <Stack gap="4vh">
                        {getChartsSeries.map((series, idx) => {
                            return (
                                <AreaChart
                                    my={"sm"}
                                    w={"98%"}
                                    h={chartSizes[idx]}
                                    data={formattedProfitData}
                                    dataKey="date"
                                    unit={units[idx]}
                                    tooltipAnimationDuration={200}
                                    valueFormatter={(value) => new Intl.NumberFormat("ru-RU").format(value)}
                                    series={series}
                                    fillOpacity={0.5}
                                    key={idx}
                                />
                            );
                        })}
                    </Stack>
                </Skeleton>
            </PageBlock>
        </div>
    );
};