import { Draggable, Droppable } from "@hello-pangea/dnd";
import { BoardSchema } from "../../../../client";
import { useContextMenu } from "mantine-contextmenu";
import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
import classNames from "classnames";
import styles from "./Board.module.scss";
import useStatus from "../../Statuses/Status/hooks/useStatus.tsx";


type Props = {
    board: BoardSchema;
    selectedBoard: BoardSchema | null;
    setSelectedBoard: (board: BoardSchema) => void;
    onEditBoardClick: (board: BoardSchema) => void;
    onDeleteBoardClick: (board: BoardSchema) => void;
    isBoardDragEnded: boolean;
    refetch: () => void;
}

const Board = ({
                   board,
                   selectedBoard,
                   setSelectedBoard,
                   onEditBoardClick,
                   onDeleteBoardClick,
                   isBoardDragEnded,
                   refetch,
               }: Props) => {

    const { showContextMenu } = useContextMenu();

    const { onCreateStatusClick } = useStatus({ refetch });

    const contextMenu = (board: BoardSchema) => showContextMenu([
        {
            key: "complete",
            onClick: () => onEditBoardClick(board),
            title: "Переименовать",
            icon: <IconEdit />,
        },
        {
            key: "add-status",
            onClick: () => onCreateStatusClick(board),
            title: "Новый статус",
            icon: <IconPlus />,
        },
        {
            key: "delete",
            onClick: () => onDeleteBoardClick(board),
            title: "Удалить",
            icon: <IconTrash />,
        },
    ]);

    return (
        <Droppable
            droppableId={board.id.toString()}
            direction={"horizontal"}
        >
            {provided => (
                <div
                    {...provided.droppableProps}
                    ref={provided.innerRef}
                >
                    <Draggable
                        draggableId={board.id.toString()}
                        index={board.ordinalNumber}
                    >
                        {(provided) => (
                            <div
                                {...provided.draggableProps}
                                {...provided.dragHandleProps}
                                ref={provided.innerRef}

                                className={classNames(
                                    styles["boards-select-element"],
                                    board.id === selectedBoard?.id ?
                                        styles["selected-board"] :
                                        styles["board"],
                                    !isBoardDragEnded && styles["board-during-dnd"],
                                )}

                                onClick={() => setSelectedBoard(board)}
                                onContextMenu={contextMenu(board)}
                            >
                                {board.name}
                            </div>
                        )}
                    </Draggable>
                    {provided.placeholder}
                </div>
            )}
        </Droppable>
    );
};

export default Board;
