import { t } from "@/config/i18n";
import type { DeleteDependencies } from "@/services/resources/common";
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};
    dependencies: DeleteDependencies[];
}

export function DeleteModal({
    opened, 
    onClose, 
    handleSubmit, 
    entityType,
    entity,
    dependencies
}: DeleteModalProps) {
    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>
            <Text>{`${t("this will also delete", {capfirst: true})} :`}</Text>
            {
                <List>
                    {
                        dependencies?.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);
                    }}
                >
                    {t("delete", { capfirst: true})}
                </Button>
            </Group>
        </Modal>
    );
}