import { Box, Card, Group, Pill, Stack, Text } from "@mantine/core";
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import { useDrawersContext } from "@/drawers/DrawersContext";
import { DealSchema } from "@/lib/client";
import { ModuleNames } from "@/modules/modules";
import styles from "./DealCard.module.css";

type Props = {
    deal: DealSchema;
};

const DealCard = ({ deal }: Props) => {
    const { selectedProject, modulesSet } = useProjectsContext();
    const { dealsCrud, refetchDeals } = useDealsContext();
    const { openDrawer } = useDrawersContext();

    const onClick = () => {
        openDrawer({
            key: "dealEditorDrawer",
            props: {
                value: deal,
                onChange: deal => dealsCrud.onUpdate(deal.id, deal),
                onDelete: dealsCrud.onDelete,
                project: selectedProject,
            },
            onClose: refetchDeals,
        });
    };

    return (
        <Card
            onClick={onClick}
            className={styles.container}>
            <Group
                justify={"space-between"}
                wrap={"nowrap"}
                pl={"xs"}
                gap={"xs"}
                align={"start"}>
                <Text
                    c={"dodgerblue"}
                    mt={"xs"}>
                    {deal.name}
                </Text>
                <Box className={styles["deal-id"]}>
                    <Text style={{ textWrap: "nowrap" }}>ID: {deal.id}</Text>
                </Box>
            </Group>
            <Stack className={styles["deal-data"]}>
                <Stack gap={0}>
                    {modulesSet.has(ModuleNames.CLIENTS) && (
                        <Text>{deal.client?.name}</Text>
                    )}
                    {modulesSet.has(ModuleNames.FULFILLMENT_BASE) && (
                        <>
                            <Text key={"price"}>{deal.totalPrice} руб.</Text>
                            <Text key={"count"}>
                                {deal.productsQuantity} тов.
                            </Text>
                        </>
                    )}
                </Stack>
                <Group gap={"xs"}>
                    <Pill className={styles["first-tag"]}>Срочно</Pill>
                    <Pill className={styles["second-tag"]}>Бесплатно</Pill>
                </Group>
            </Stack>
        </Card>
    );
};

export default DealCard;