import { FC } from "react";
import { DealProductSchema, ProductSchema } from "../../../../../../client";
import { Image, rem, Text, Title } from "@mantine/core";
import { isNil } from "lodash";
import { ProductFieldNames } from "../../../../tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx";
import ProductServicesTable from "../tables/ProductServicesTable/ProductServicesTable.tsx";
import styles from "./ProductPreview.module.css";

type Props = {
    product: DealProductSchema;
};

const ProductPreview: FC<Props> = ({ product }) => {
    return (
        <div className={styles["container"]}>
            <div className={styles["data-container"]}>
                <div className={styles["image-container"]}>
                    <Image
                        flex={1}
                        radius={rem(10)}
                        fit={"cover"}
                        src={product.product.imageUrl}
                    />
                </div>
                <div className={styles["attributes-container"]}>
                    <Title order={3}>{product.product.name}</Title>

                    {Object.entries(product.product).map(([key, value]) => {
                        const fieldName =
                            ProductFieldNames[key as keyof ProductSchema];
                        if (!fieldName || isNil(value) || value === "") return;
                        return (
                            <Text key={fieldName}>
                                {fieldName}: {value.toString()}{" "}
                            </Text>
                        );
                    })}
                    <Text>
                        Штрихкоды: {product.product.barcodes.join(", ")}
                    </Text>
                    <Text>Количество товара: {product.quantity}</Text>
                </div>
            </div>

            <div className={styles["services-container"]}>
                <ProductServicesTable
                    items={product.services}
                    quantity={product.quantity}
                />
            </div>
        </div>
    );
};

export default ProductPreview;
