import { ActionIcon, Table, Tooltip } from "@mantine/core";
import { type Contract } from "@/services/resources/contracts";
import { IconDownload, IconX } from "@tabler/icons-react";
import { t } from "@/config/i18n";
import { useGetContractFile } from "@/services/api";
import { useCallback } from "react";
import { useNavigate } from "react-router";

export type ContractRowProps = {
    contract: Contract;
};

export default function ContractRow({ contract }: ContractRowProps) {
    const getContractMutation = useGetContractFile();
    const navigate = useNavigate();

    const handleDownload = useCallback(async () => {
        getContractMutation.mutateAsync(contract.id);
    }, [useGetContractFile, contract, contract.id]);
    return (
        <Table.Tr key={contract.id}>
            <Table.Td>
                {contract.form.name} {contract.form.season}
            </Table.Td>
            <Table.Td>
                {contract.firstname} {contract.lastname}
            </Table.Td>
            <Table.Td>{contract.email}</Table.Td>
            <Table.Td>
                {contract.cheque_quantity > 0 && contract.cheque_quantity} {contract.payment_method}
            </Table.Td>
            <Table.Td>
                {`${Intl.NumberFormat("fr-FR", {
                    style: "currency",
                    currency: "EUR",
                }).format(contract.total_price)}`}
            </Table.Td>
            <Table.Td>
                <Tooltip label={t("download contract", { capfirst: true })}>
                    <ActionIcon
                        size="sm"
                        mr="5"
                        onClick={(e) => {
                            e.stopPropagation();
                            handleDownload();
                        }}
                    >
                        <IconDownload />
                    </ActionIcon>
                </Tooltip>
                <Tooltip label={t("remove contract", { capfirst: true })}>
                    <ActionIcon
                        color="red"
                        size="sm"
                        mr="5"
                        onClick={(e) => {
                            e.stopPropagation();
                            navigate(`/dashboard/contracts/${contract.id}/delete`);
                        }}
                    >
                        <IconX />
                    </ActionIcon>
                </Tooltip>
            </Table.Td>
        </Table.Tr>
    );
}