import { ActionIcon, Badge, Table, Tooltip } from "@mantine/core";
import { useNavigate, useSearchParams } from "react-router";
import { useDeleteForm } from "@/services/api";
import { IconEdit, IconX } from "@tabler/icons-react";
import { t } from "@/config/i18n";
import type { Form } from "@/services/resources/forms";

export type FormRowProps = {
    form: Form;
};

export default function FormRow({ form }: FormRowProps) {
    const [searchParams] = useSearchParams();
    const deleteMutation = useDeleteForm();
    const navigate = useNavigate();

    return (
        <Table.Tr key={form.id}>
            <Table.Td>
                {form.visible ? 
                    <Badge color="green">{t("visible", {capfirst: true})}</Badge> : 
                    <Badge color="red">{t("hidden", {capfirst: true})}</Badge>
                }
            </Table.Td>
            <Table.Td>{form.name}</Table.Td>
            <Table.Td>{form.season}</Table.Td>
            <Table.Td>{form.start}</Table.Td>
            <Table.Td>{form.end}</Table.Td>
            <Table.Td>{form.productor.name}</Table.Td>
            <Table.Td>{form.referer.name}</Table.Td>
            <Table.Td>
                <Tooltip label={t("edit productor", { capfirst: true })}>
                    <ActionIcon
                        size="sm"
                        mr="5"
                        onClick={(e) => {
                            e.stopPropagation();
                            navigate(
                                `/dashboard/forms/${form.id}/edit${searchParams ? `?${searchParams.toString()}` : ""}`,
                            );
                        }}
                    >
                        <IconEdit />
                    </ActionIcon>
                </Tooltip>
                <Tooltip label={t("remove productor", { capfirst: true })}>
                    <ActionIcon
                        color="red"
                        size="sm"
                        mr="5"
                        onClick={() => {
                            deleteMutation.mutate(form.id);
                        }}
                    >
                        <IconX />
                    </ActionIcon>
                </Tooltip>
            </Table.Td>
        </Table.Tr>
    );
}