"use client";

import { Affix, Flex, Stack, Title, Transition } from "@mantine/core";
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
import InlineButton from "@/components/ui/InlineButton/InlineButton";
import styles from "./GroupDealsSelectionAffix.module.css";

const GroupDealsSelectionAffix = () => {
    const {
        groupDealsSelection: {
            finishDealsSelecting,
            cancelDealsSelecting,
            isDealsSelecting,
        },
    } = useDealsContext();

    return (
        <Affix position={{ bottom: 35, right: 35 }}>
            <Transition
                transition="slide-up"
                mounted={isDealsSelecting}>
                {transitionStyles => (
                    <Stack
                        bdrs={"xl"}
                        bd={"1px solid var(--mantine-color-default-border"}
                        className={styles.shadow}
                        p={"md"}
                        gap={"md"}
                        style={transitionStyles}>
                        <Title
                            order={5}
                            ta={"center"}>
                            Выбор сделок для группы
                        </Title>
                        <Flex gap={"xs"}>
                            <InlineButton onClick={cancelDealsSelecting}>
                                Отмена
                            </InlineButton>
                            <InlineButton
                                variant={"filled"}
                                onClick={finishDealsSelecting}>
                                Сохранить
                            </InlineButton>
                        </Flex>
                    </Stack>
                )}
            </Transition>
        </Affix>
    );
};

export default GroupDealsSelectionAffix;
