import { Alert, Flex, Skeleton, Text } from "@mantine/core";
import { AttachmentProps } from "./MessageAttachments";
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { ReplyedMessage } from "../ReplyedMessage/ReplyedMessage";
import { IconX } from "@tabler/icons-react";
import { useSetting } from "@/app/providers/SettingsProvider/useSetting";
import { modals } from "@mantine/modals";

export function MessageReplyMessages(props: AttachmentProps) {
    const colors = useRosettaColors();
    const [showAlertInReplyMessages, setShowAlertInReplyMessages] = useSetting<boolean>
        ('showAlertInReplyMessages', true);
    const [bgInReplyMessages] = useSetting<string>
        ('bgInReplyMessages', '');
    const reply = JSON.parse(props.attachment.blob);

    //console.info("Mreply", reply);

    const closeAlert = () => {
        modals.openConfirmModal({
            title: 'Disable Warning',
            centered: true,
            children: (
                <Text size="sm">
                    Are you sure you want to disable the warning about forged messages in replies?
                </Text>
            ),
            labels: { confirm: 'Yes, disable', cancel: 'No, keep it' },
            
            onCancel: () => {},
            onConfirm: () => setShowAlertInReplyMessages(false),
        });
    }
    
    return (
        <Flex maw={'100%'} direction={'column'} bg={bgInReplyMessages != "" ? `var(--mantine-color-${bgInReplyMessages}-light)` : undefined} p={0} mb={'xs'} style={{
            borderLeft: '2px solid ' + (bgInReplyMessages != "" ? `var(--mantine-color-${bgInReplyMessages}-6)` : colors.error),
            borderRadius: 2
        }}>
            {reply.length <= 0 && 
                <Skeleton h={50} w={'100%'}></Skeleton>
            }
            {reply.map((msg, index) => (
                <ReplyedMessage parent={props.parent} chacha_key_plain={props.chacha_key_plain} key={index} messageReply={msg}></ReplyedMessage>
            ))}
            {showAlertInReplyMessages && <Alert style={{
                borderTopLeftRadius: 0,
                borderTopRightRadius: 0,
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 4,
            }} variant="light" p={5} color={'red'}>
                <Flex align={'center'} gap={'sm'}>
                    <Text c={'red'} fz={8}>
                        Due to the use of encryption, these messages may be forged by the sender
                    </Text>
                    <IconX size={11} color={'red'} onClick={closeAlert}></IconX>
                </Flex>
            </Alert>}
        </Flex>
    );
}