import { ActionIcon, Badge, Box, Group, Paper, Text, Title } from "@mantine/core";
import { Link, useNavigate } from "react-router";
import { deleteForm, getForm, type Form, type Shipment } from "../../../services/api";
import { IconEdit, IconX } from "@tabler/icons-react";
import { t } from "../../../config/i18n";
import FormModal, { type FormInputs } from "../FormModal";

export type FormCardProps = {
    form: Form;
    isEdit: boolean;
    closeModal: () => void;
    handleSubmit: (form: FormInputs, id?: number) => void;
}

export default function FormCard({form, isEdit, closeModal, handleSubmit}: FormCardProps) {
    const deleteMutation = deleteForm();
    const navigate = useNavigate();
    const {data: currentForm, isPending} = getForm(form.id);
    
    return (
        <Paper
            key={form.id}
            shadow="xl" 
            p="xl"
            miw={{base: "100vw", md: "25vw", lg:"20vw"}}
        >
            {/* TODO: Show only to logged users */}
            <FormModal 
                opened={isEdit} 
                onClose={closeModal} 
                currentForm={currentForm} 
                handleSubmit={handleSubmit}
            />
            <Group justify="space-between" mb="sm">
                <ActionIcon
                    size={"sm"}
                    aria-label={t("edit form")}
                    onClick={(e) => {
                        e.stopPropagation();
                        navigate(`/form/${form.id}/edit`);
                    }}
                >
                    <IconEdit/>
                </ActionIcon>
                <ActionIcon
                    size={"sm"}
                    aria-label={t("delete form")}
                    color="red"
                    onClick={() => {
                        deleteMutation.mutate(form.id);
                    }}
                >
                    <IconX/>
                </ActionIcon>
            </Group>
            <Box
                component={Link}
                to={`/form/${form.id}`}
            >
                <Group justify="space-between" wrap="nowrap">
                    <Title 
                        order={3}
                        textWrap="wrap"
                        lineClamp={1}
                        >
                        {form.name}
                    </Title>
                    <Badge>{form.season}</Badge>
                </Group>
                <Group justify="space-between">
                    <Text>{form.productor.name}</Text>
                    <Text>{form.referer.name}</Text>
                </Group>
            </Box>
        </Paper>
    );
}