import { Box, Center, Group, Stack } from "@mantine/core";
import { DragDropContext } from "@hello-pangea/dnd";
import { BoardSchema, CardSummary } from "../../../../client";
import { IconPlus } from "@tabler/icons-react";
import useBoards from "./hooks/useBoards.tsx";
import Statuses from "../../Statuses/Statuses/Statuses.tsx";
import Board from "../Board/Board.tsx";
import useBoardsDnd from "./hooks/useBoardsDnd.tsx";
import PrefillCardsWithExcelDrawer
    from "../../../../pages/CardsPage/drawers/PrefillCardWithExcelDrawer/PrefillCardsWithExcelDrawer.tsx";


type Props = {
    summariesRaw: CardSummary[];
    refetchSummaries: () => void;
    boards: BoardSchema[];
    refetchBoards: () => void;
}

const Boards = (props: Props) => {
    const {
        selectedBoard,
        setSelectedBoard,
        onCreateBoardClick,
        onEditBoardClick,
        onDeleteBoardClick,
    } = useBoards(props);

    const {
        onBoardDragEnd,
        isBoardDragEnded,
        setIsBoardDragEnded,
    } = useBoardsDnd(props);

    const getBoardsTabs = () => {
        return (
            <DragDropContext
                onDragStart={() => {
                    setIsBoardDragEnded(false);
                }}
                onDragEnd={onBoardDragEnd}
            >
                <Group
                    mx={"3%"}
                    mb={"md"}
                    gap={0}
                    align={"end"}
                    wrap={"nowrap"}
                >
                    {props.boards.map((board: BoardSchema) => (
                        <Board
                            key={board.id}

                            board={board}
                            selectedBoard={selectedBoard}
                            setSelectedBoard={setSelectedBoard}
                            onEditBoardClick={onEditBoardClick}
                            onDeleteBoardClick={onDeleteBoardClick}
                            isBoardDragEnded={isBoardDragEnded}
                            refetch={props.refetchBoards}
                        />
                    ))}
                    <Center
                        px={"md"}
                        py={"xs"}
                        style={{ cursor: "pointer", borderBottom: "solid gray 1px" }}
                        onClick={onCreateBoardClick}
                    >
                        <IconPlus />
                    </Center>
                    <Box w={"100%"} style={{ borderBottom: "solid gray 1px" }}></Box>
                </Group>
            </DragDropContext>
        );
    };

    return (
        <Stack>
            {getBoardsTabs()}
            <Statuses
                selectedBoard={selectedBoard}
                {...props}
            />
            <PrefillCardsWithExcelDrawer board={selectedBoard} />
        </Stack>
    );
};

export default Boards;
