import { ActionIcon, Badge, Box, Group, Paper, Text, Title, Tooltip } from "@mantine/core";
import { Link } from "react-router";
import type { Form } from "@/services/resources/forms";
import { IconDownload, IconExternalLink } from "@tabler/icons-react";
import { t } from "@/config/i18n";
import { useGetContractFileTemplate } from "@/services/api";

export type FormCardProps = {
    form: Form;
};

export function FormCard({ form }: FormCardProps) {
    const contractBaseTemplate = useGetContractFileTemplate()
    return (
        <Paper shadow="xl" p="xl" miw={{ base: "100vw", md: "25vw", lg: "20vw" }}>
            <Group justify="start" mb="md">
            <Tooltip
                label={t("download base template to print")}
            >
                <ActionIcon
                    variant={"outline"}
                    aria-label={t("download base template to print")}
                    onClick={async () => {
                        await contractBaseTemplate.mutateAsync(form.id)
                    }}
                >
                    <IconDownload/>
                </ActionIcon>
            </Tooltip>
            <Tooltip
                label={t("fill contract online")}
            >
                <ActionIcon
                    variant={"outline"}
                    aria-label={t("fill contract online")}
                    component={Link}
                    to={`/form/${form.id}`}
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    <IconExternalLink/>
                </ActionIcon>
            </Tooltip>
            </Group>

            <Box
                component={Link}
                to={`/form/${form.id}`}
                target="_blank"
                rel="noopener noreferrer"
                style={{ textDecoration: "none", color: "black" }}
            >
                <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>
    );
}