import { deleteQuestionWithTimeout } from "@/stores/questions/actions";
import { DeleteFunction } from "@/utils/deleteFunc";
import { Box, Button, Modal, Typography } from "@mui/material";

interface Props {
    open: boolean;
    onclose: () => void;
    questionId: string;
}

export const DeleteBranchingQuestionModal = ({
    open,
    onclose,
    questionId,
}: Props) => {
    return (
        <Modal
            open={open}
            onClose={onclose}
        >
            <Box
                sx={{
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    padding: "30px",
                    borderRadius: "10px",
                    background: "#FFFFFF",
                }}
            >
                <Typography
                    variant="h6"
                    sx={{ textAlign: "center" }}
                >
                    Вы удаляете вопрос, участвующий в ветвлении. Все его потомки потеряют данные ветвления. Вы уверены, что хотите удалить вопрос?
                </Typography>
                <Box
                    sx={{
                        marginTop: "30px",
                        display: "flex",
                        justifyContent: "center",
                        gap: "15px",
                    }}
                >
                    <Button
                        variant="contained"
                        sx={{ minWidth: "150px" }}
                        onClick={onclose}
                    >
                        Отмена
                    </Button>
                    <Button
                        variant="contained"
                        sx={{ minWidth: "150px" }}
                        onClick={() => {
                            deleteQuestionWithTimeout(questionId, () => DeleteFunction(questionId));
                        }}
                    >
                        Подтвердить
                    </Button>
                </Box>
            </Box>
        </Modal>
    )
}