desktop/app/components/ReplyHeader/ReplyHeader.tsx

import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { useReplyMessages } from "@/app/providers/DialogProvider/useReplyMessages";
import { Button, Flex, Modal, Text } from "@mantine/core";
import { useDisclosure, useHotkeys } from "@mantine/hooks";
import { IconCornerUpLeft, IconCornerUpRightDouble, IconTrash, IconX } from "@tabler/icons-react";
import classes from "./ReplyHeader.module.css";
import { DialogsList } from "../DialogsList/DialogsList";
import { useNavigate } from "react-router-dom";
import { useDialog } from "@/app/providers/DialogProvider/useDialog";
import { modals } from "@mantine/modals";

export function ReplyHeader() {
    const colors = useRosettaColors();
    const {replyMessages, 
        deselectAllMessages, 
        translateMessagesToDialogInput, 
        dialog,
        isSelectionInCurrentDialog} = useReplyMessages();
    const [opened, { open, close }] = useDisclosure(false);
    const navigate = useNavigate();
    const {deleteSelectedMessages} = useDialog();
    
    useHotkeys([
        ['Esc', deselectAllMessages]
    ], [], true);

    const onClickForward = () => {
        open();
    }

    const selectDialogToForward = (publicKey: string) => {
        translateMessagesToDialogInput(publicKey);
        close();
        navigate(`/main/chat/${publicKey}`);
    }

    const onClickReply = () => {
        translateMessagesToDialogInput(dialog);
    }

    const onClickDelete = async () => {
        modals.openConfirmModal({
            title: 'Delete messages',
            children: (
                <Text size="sm">
                    Are you sure you want to delete {replyMessages.messages.length} message{replyMessages.messages.length > 1 && 's'}? This action cannot be undone.
                </Text>
            ),
            labels: { confirm: 'Delete', cancel: 'Cancel' },
            confirmProps: { color: 'red' },
            centered: true,
            onConfirm: async () => {
                const messageIds = replyMessages.messages.map(m => m.message_id);
                await deleteSelectedMessages(messageIds);
                deselectAllMessages();                
            },
        });
    }

    const onCancel = () => {
        deselectAllMessages();
        close();
    }

    return (
        <>
            <Modal styles={{
                root: {
                    padding: 0
                },
                inner: {
                    padding: 0
                },
                content: {
                    padding: 0
                },
                body: {
                    padding: 0
                }
            }} size={'xs'} closeOnEscape withCloseButton={false} closeOnClickOutside opened={opened} onClose={close} centered>
                <Modal.Header>
                    <Text fw={600} c={'blue'} fz={14}>Select to forward</Text>
                    <Button onClick={onCancel} leftSection={
                        <IconX size={16}></IconX>
                    } variant={'transparent'} c={'red'}>Cancel</Button>
                </Modal.Header>
                <Modal.Body>
                    <DialogsList mode={'all'} onSelectDialog={selectDialogToForward}></DialogsList>
                </Modal.Body>
            </Modal>
            <Flex p={'sm'} h={'100%'} justify={'space-between'} align={'center'} gap={'xs'}>
                <Flex gap={'xs'} align={'center'}>
                    <Text size={'sm'} fw={500} className={classes.short_text}>
                        {replyMessages.messages.length} message{replyMessages.messages.length > 1 ? "s" : ""} selected
                    </Text>
                    <IconX onClick={deselectAllMessages} stroke={1.3} style={{
                        cursor: 'pointer'
                    }} size={20} color={colors.chevrons.active}></IconX>
                </Flex>
                <Flex gap={'sm'}>
                    {isSelectionInCurrentDialog() &&
                        <Button classNames={{
                            label: classes.short_text,
                            inner: classes.button_inner
                        }} p={0} onClick={onClickDelete} color="red" variant={'transparent'} leftSection={
                            <IconTrash stroke={2} size={16} ></IconTrash>
                        }>
                            Delete
                        </Button>
                    }
                    {isSelectionInCurrentDialog() && 
                        <Button classNames={{
                            label: classes.short_text,
                            inner: classes.button_inner
                        }} p={0} onClick={onClickReply} variant={'transparent'} leftSection={
                            <IconCornerUpLeft stroke={3} size={16} ></IconCornerUpLeft>
                        }>
                            Reply
                        </Button>
                    }
                    <Button classNames={{
                            label: classes.short_text,
                            inner: classes.button_inner
                        }} p={0} onClick={onClickForward} variant={'transparent'} leftSection={
                        <IconCornerUpRightDouble stroke={2} size={16} ></IconCornerUpRightDouble>
                    }>
                        Forward
                    </Button>
                </Flex>
            </Flex>
        </>
    );
}