import { t } from "@/config/i18n";
import { useGetDeleteDependencies } from "@/services/api";
import { Button, Group, List, Modal, Text, type ModalBaseProps } from "@mantine/core";
import { IconCancel, IconCheck } from "@tabler/icons-react";
import { Link } from "react-router";

export type DeleteModalProps = ModalBaseProps & {
    handleSubmit: (id: number) => void;
    entityType: string;
    entity?: { name: string; id: number } | undefined;
};

export function DeleteModal({
    opened,
    onClose,
    handleSubmit,
    entityType,
    entity,
}: DeleteModalProps) {
    if (!entity) {
        return null;
    }
    const { data: deleteDependencies } = useGetDeleteDependencies(entityType, entity.id);

    return (
        <Modal
            opened={opened}
            onClose={onClose}
            title={t("delete entity", { capfirst: true, entity: t(entityType) })}
        >
            <Text>{`${t("are you sure you want to delete", { capfirst: true })} : "${entity.name}"`}</Text>
            {deleteDependencies && deleteDependencies.length > 0 ? (
                <Text>{`${t("this will also delete", { capfirst: true })} :`}</Text>
            ) : null}
            {
                <List>
                    {deleteDependencies?.map((dependency) => (
                        <List.Item key={dependency.id}>
                            {dependency.type === "contract" ? (
                                `${t(dependency.type, { capfirst: true })} - ${dependency.name}`
                            ) : (
                                <Link
                                    to={`/dashboard/${dependency.type}s/${dependency.id}/edit`}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    {`${t(dependency.type, { capfirst: true })} - ${dependency.name}`}
                                </Link>
                            )}
                        </List.Item>
                    ))}
                </List>
            }
            <Group mt="sm" justify="space-between">
                <Button
                    variant="filled"
                    color="red"
                    aria-label={t("cancel", { capfirst: true })}
                    leftSection={<IconCancel />}
                    onClick={onClose}
                >
                    {t("cancel", { capfirst: true })}
                </Button>
                <Button
                    variant="filled"
                    aria-label={t("delete entity", { capfirst: true, entity: t(entityType) })}
                    leftSection={<IconCheck />}
                    onClick={() => {
                        handleSubmit(entity.id);
                        onClose();
                    }}
                >
                    {t("delete", { capfirst: true })}
                </Button>
            </Group>
        </Modal>
    );
}