import { FC } from "react";
import {
    Box,
    Card,
    Flex,
    Group,
    Image,
    Stack,
    Text,
    Title,
} from "@mantine/core";
import { modals } from "@mantine/modals";
import { DealProductSchema } from "@/lib/client";
import ProductFieldsList from "@/modules/dealModularEditorTabs/FulfillmentBase/desktop/components/ProductView/components/ProductFieldsList";
import ProductMenu from "@/modules/dealModularEditorTabs/FulfillmentBase/mobile/components/ProductMenu/ProductMenu";
import ProductServicesTable from "@/modules/dealModularEditorTabs/FulfillmentBase/mobile/components/ProductServicesTable/ProductServicesTable";
import { useFulfillmentBaseContext } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/contexts/FulfillmentBaseContext";
import styles from "../../../FulfillmentBase.module.css";

type Props = {
    dealProduct: DealProductSchema;
};

const DealProductView: FC<Props> = ({ dealProduct }) => {
    const { dealProductsCrud } = useFulfillmentBaseContext();

    const onChangeDealProductClick = () => {
        modals.openContextModal({
            modal: "dealProductEditorModal",
            title: "Добавление товара",
            withCloseButton: false,
            innerProps: {
                onChange: values =>
                    dealProductsCrud.onUpdate(
                        dealProduct.dealId,
                        dealProduct.productId,
                        values
                    ),
                entity: dealProduct,
                isEditing: true,
                clientId: 0, // TODO add clients
            },
        });
    };

    return (
        <Box
            p={"md"}
            h={"100%"}
            style={{ display: "flex", flexDirection: "column" }}>
            <Card
                style={{
                    display: "flex",
                    flexDirection: "column",
                    gap: "var(--mantine-spacing-sm)",
                    flex: 1,
                    minHeight: 0,
                }}
                className={styles.shadow}
                withBorder>
                <Flex
                    gap={"sm"}
                    wrap={"nowrap"}
                    align={"start"}>
                    <Image
                        src="https://placehold.co/400x500?text=Placeholder"
                        alt={dealProduct.product.name}
                        w={"40%"}
                        bdrs={"md"}
                    />
                    <Stack
                        gap={0}
                        w={"100%"}>
                        <Group
                            wrap={"nowrap"}
                            justify={"space-between"}>
                            <Title order={3}>{dealProduct.product.name}</Title>
                            <ProductMenu
                                value={dealProduct}
                                onChange={onChangeDealProductClick}
                                onDelete={dealProductsCrud.onDelete}
                            />
                        </Group>
                        <Text>Количество: {dealProduct.quantity}</Text>
                        <ProductFieldsList product={dealProduct.product} />
                    </Stack>
                </Flex>
                <ProductServicesTable dealProduct={dealProduct} />
            </Card>
        </Box>
    );
};

export default DealProductView;
