import { Flex, Text } from "@mantine/core";
import { DialogAttachmentProps } from "./DialogAttachment";
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { IconX } from "@tabler/icons-react";
import { useReplyMessages } from "@/app/providers/DialogProvider/useReplyMessages";
import { dotMessageIfNeeded } from "@/app/utils/utils";
import { TextParser } from "../TextParser/TextParser";

export function AttachMessages(props : DialogAttachmentProps) {
    const colors = useRosettaColors();
    const {deselectAllMessages} = useReplyMessages();

    const onClickCancel = () => {
        deselectAllMessages();
        props.onRemove && props.onRemove(props.attach);
    }

    const jsonMessages = JSON.parse(props.attach.blob);

    return (
        <Flex style={{
            borderLeft: '2px solid ' + colors.brandColor,
            paddingLeft: 8,
            borderRadius: 1,
        }} w={'100%'} justify={'space-between'} align={'center'} gap={8} key={props.attach.id}>
            <Flex direction={'column'} gap={4}>
                <Text fz={13} c={colors.brandColor} fw={'bold'}>Reply messages</Text>
                <Text fz={12} c={'dimmed'} lineClamp={3}>
                    {jsonMessages.length > 1 && <>
                        Reply to {jsonMessages.length} messages
                    </>}
                    {jsonMessages.length == 1 && <>
                        {jsonMessages[0].message.trim().length > 0 ? <TextParser noHydrate text={dotMessageIfNeeded(jsonMessages[0].message.trim(), 40)}></TextParser> : 'Attachment'}
                    </>}
                </Text>
            </Flex>
            <Flex onClick={onClickCancel} style={{
                cursor: 'pointer'
            }}>
                <IconX size={17} stroke={1.1}></IconX>
            </Flex>
        </Flex>
    )
}