"use client";

import React from "react";
import { Group, ScrollArea } from "@mantine/core";
import Board from "@/app/deals/components/Board/Board";
import CreateBoardButton from "@/app/deals/components/CreateBoardButton/CreateBoardButton";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import SortableDnd from "@/components/dnd/SortableDnd";
import { BoardSchema } from "@/lib/client";

const Boards = () => {
    const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext();

    const renderBoard = (board: BoardSchema) => {
        return <Board board={board} />;
    };

    const onDragEnd = (itemId: number, newLexorank: string) => {
        onUpdateBoard(itemId, { lexorank: newLexorank });
    };

    const selectBoard = (board: BoardSchema) => {
        setSelectedBoard(board);
    };

    return (
        <ScrollArea
            offsetScrollbars={"x"}
            scrollbars={"x"}
            scrollbarSize={0}
            w={"100%"}>
            <Group wrap={"nowrap"}>
                <SortableDnd
                    initialItems={boards}
                    renderItem={renderBoard}
                    onDragEnd={onDragEnd}
                    onItemClick={selectBoard}
                    rowStyle={{ flexWrap: "nowrap" }}
                />
                <CreateBoardButton />
            </Group>
        </ScrollArea>
    );
};

export default Boards;