import { Flex, rem } from "@mantine/core";
import classNames from "classnames";
import styles from "../../../../pages/CardsPage/ui/CardsPage.module.css";
import { Droppable } from "@hello-pangea/dnd";
import DragState from "../../../../pages/CardsPage/enums/DragState.ts";

type Props = {
    dragState: DragState;
}

const CardsDndFooter = ({ dragState }: Props) => {
    const isDealDragEnded = dragState === DragState.DRAG_ENDED;

    return (
        <Flex
            justify={"space-between"}
            gap={rem(10)}>
            <div
                className={classNames(
                    styles["delete"],
                    isDealDragEnded && styles["delete-hidden"],
                )}>
                <Droppable droppableId={"DELETE"}>
                    {(provided, snapshot) => (
                        <>
                            <div
                                {...provided.droppableProps}
                                ref={provided.innerRef}>
                                {!isDealDragEnded &&
                                    !snapshot.isDraggingOver && (
                                        <span>Удалить</span>
                                    )}
                            </div>
                            {provided.placeholder}
                        </>
                    )}
                </Droppable>
            </div>
            <div
                className={classNames(
                    styles["delete"],
                    isDealDragEnded && styles["delete-hidden"],
                )}>
                <Droppable droppableId={"SUCCESS"}>
                    {(provided, snapshot) => (
                        <>
                            <div
                                {...provided.droppableProps}
                                ref={provided.innerRef}>
                                {!isDealDragEnded &&
                                    !snapshot.isDraggingOver && (
                                        <span>
                                            Успешно завершена
                                        </span>
                                    )}
                            </div>
                            {provided.placeholder}
                        </>
                    )}
                </Droppable>
            </div>
        </Flex>
    );
};

export default CardsDndFooter;
