import * as React from 'react';
import { Dialog, Flex, Text, Button, Box, Code } from '@radix-ui/themes';
import { ExclamationTriangleIcon } from "@radix-ui/react-icons"

export interface IUnsavedChangesDialogProps {
    isUnsavedChangesDialogOpen: boolean;
    unsavedFileName: string;
}

export function UnsavedChangesDialog(props: IUnsavedChangesDialogProps) {
    const { isUnsavedChangesDialogOpen, unsavedFileName } = props;

    // if showUnsavedChangesDialog is false, return null
    if (!isUnsavedChangesDialogOpen) {
        return <></>;
    }

    return (
        <Box
            style={{
                zIndex: 999,
                position: 'absolute',
                pointerEvents: 'none',
                userSelect: 'none',
                backgroundColor: 'var(--black-a7)',
                inset: 0, // shorthand for top/right/bottom/left: 0
            }}
        >
            <Dialog.Root open={isUnsavedChangesDialogOpen}>
                <Dialog.Content maxWidth="450px">
                    <ExclamationTriangleIcon />
                    <Flex direction="column" align="center" justify="center">
                        <Dialog.Title size="2">
                            Do you want to save the changes you made to <Code>{unsavedFileName}</Code>?
                        </Dialog.Title>
                        <Dialog.Description size="1" mb="4">
                            Your changes will be lost if you don't save them.
                        </Dialog.Description>
                    </Flex>
                    <Flex direction="column">
                        <Button color='mint'>Save</Button>
                        <Button color='gray' mt="1">Don't Save</Button>
                        <Button color='gray' mt="3">Cancel</Button>
                    </Flex>
                </Dialog.Content>
            </Dialog.Root>
        </Box>
    );
}
