import { AreaChart } from "@mantine/charts";
import "@mantine/charts/styles.css";
import PageBlock from "../../../../../../components/PageBlock/PageBlock.tsx";
import { useProfitChart } from "./hooks/useProfitChart.tsx";
import { Skeleton, Stack } from "@mantine/core";
import { ProfitChartFiltersModal } from "../../modals/ProfitChartFiltersModal.tsx";


export const ProfitChart = () => {
    const {
        profitData,
        form,
        isLoading,
    } = useProfitChart();

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

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

    return (
        <PageBlock style={{ flex: 3, minWidth: "500px", padding: "25px" }}>
            <ProfitChartFiltersModal
                form={form}
            />
            <Skeleton visible={isLoading}>
                <Stack gap={"xl"}>
                    {getChartsSeries.map((series, idx) => {
                        return (
                            <AreaChart
                                my={"sm"}
                                w={"98%"}
                                h={"39vh"}
                                data={profitData}
                                dataKey="date"
                                unit={units[idx]}
                                tooltipAnimationDuration={200}
                                valueFormatter={(value) => new Intl.NumberFormat("ru-RU").format(value)}
                                series={series}
                                fillOpacity={0.5}
                            />
                        );
                    })}
                </Stack>
            </Skeleton>
        </PageBlock>
    );
};