import { Accordion, Group, Stack, Text } from "@mantine/core";
import type { Shipment } from "@/services/resources/shipments";
import { ProductForm } from "@/components/Products/Form";
import type { UseFormReturnType } from "@mantine/form";
import { useMemo } from "react";
import { computePrices } from "@/pages/Contract";
import { t } from "@/config/i18n";

export type ShipmentFormProps = {
    inputForm: UseFormReturnType<Record<string, string | number>>;
    shipment: Shipment;
    minimumPrice?: number | null;
    index: number;
}

export default function ShipmentForm({
    shipment,
    index,
    inputForm,
    minimumPrice,
}: ShipmentFormProps) {
    const shipmentPrice = useMemo(() => {
        const values = Object
            .entries(inputForm.getValues())
            .filter(([key]) => 
                key.includes("planned") && 
                key.split("-")[1] === String(shipment.id)
            );
        return computePrices(values, shipment.products);
    }, [inputForm, shipment.products]);

    const priceRequirement = useMemo(() => {
        if (!minimumPrice)
            return false;
        return minimumPrice ? shipmentPrice < minimumPrice : true
    }, [shipmentPrice, minimumPrice])

    return (
        <Accordion.Item value={String(index)}>
            <Accordion.Control>
                <Group justify="space-between">
                    <Text>{shipment.name}</Text>
                    <Stack gap={0}>
                    <Text c={priceRequirement ? "red" : "green"}>{
                        Intl.NumberFormat(
                            "fr-FR", 
                            {style: "currency",  currency: "EUR"}
                        ).format(shipmentPrice)
                    }</Text>
                    {
                        priceRequirement ? 
                        <Text c="red"size="sm">
                            {`${t("minimum price for this shipment should be at least", {capfirst: true})} ${minimumPrice}€`}
                        </Text> : 
                        null
                    }
                    </Stack>
                    <Text mr="lg">
                        {`${
                            new Date(shipment.date).toLocaleDateString("fr-FR", {
                                weekday: "long",
                                year: "numeric",
                                month: "long",
                                day: "numeric",
                            })
                        }`}
                    </Text>
                </Group>
                </Accordion.Control>
            <Accordion.Panel>
            {
                shipment?.products.map((product) => (
                    <ProductForm
                        key={product.id}
                        product={product}
                        shipment={shipment}
                        inputForm={inputForm}
                    />
                ))
            }
            </Accordion.Panel>
        </Accordion.Item>
    );
}