import { useMemo } from "react";
import { Flex, Title } from "@mantine/core";
import { useFulfillmentBaseContext } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/contexts/FulfillmentBaseContext";
import styles from "../../../../../FulfillmentBase.module.css";

const TotalPriceLabel = () => {
    const {
        dealServicesList: { dealServices },
        dealProductsList: { dealProducts },
    } = useFulfillmentBaseContext();

    const totalPrice = useMemo(() => {
        const productServicesPrice = dealProducts.reduce(
            (acc, row) =>
                acc +
                row.productServices.reduce(
                    (acc2, row2) => acc2 + row2.price * row.quantity,
                    0
                ),
            0
        );
        const cardServicesPrice = dealServices.reduce(
            (acc, row) => acc + row.price * row.quantity,
            0
        );
        return cardServicesPrice + productServicesPrice;
    }, [dealServices, dealProducts]);

    return (
        <Flex
            direction={"column"}
            className={styles.container}>
            <Title order={3}>
                Общая стоимость всех услуг: {totalPrice.toLocaleString("ru")}₽
            </Title>
        </Flex>
    );
};

export default TotalPriceLabel;
