import { FC } from "react";
import { Flex, rem, Title } from "@mantine/core";
import { DealServiceSchema, DealSummary } from "../../../../../../../client";
import useDealServicesTableColumns from "./columns.tsx";
import { BaseTable } from "../../../../../../../components/BaseTable/BaseTable.tsx";
import { MRT_TableOptions } from "mantine-react-table";

type Props = {
    items?: DealServiceSchema[];
};

const DealServicesTable: FC<Props> = ({ items }) => {
    const columns = useDealServicesTableColumns();

    return (
        <Flex
            direction={"column"}
            gap={rem(10)}
            mb={10}>
            <Flex
                h={"100%"}
                direction={"column"}>
                {
                    items && items.length > 0 &&
                    <>
                        <BaseTable
                            data={items}
                            columns={columns}

                            restProps={
                                {
                                    enableSorting: false,
                                    enableColumnActions: false,
                                    enablePagination: false,
                                    enableBottomToolbar: false,
                                } as MRT_TableOptions<DealSummary>
                            }
                        />

                        <Title
                            style={{ textAlign: "end" }}
                            mt={rem(10)}
                            mb={rem(6)}
                            order={4}>
                            Итог:{" "}
                            {items.reduce(
                                (acc, item) => acc + item.price * item.quantity,
                                0,
                            )}
                            ₽
                        </Title>
                    </>
                }
            </Flex>
        </Flex>
    );
};
export default DealServicesTable;
