"use client";

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

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

    const renderBoard = (board: BoardSchema) => <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%"}
            mt={"xs"}
            mb={"sm"}>
            <Group
                wrap={"nowrap"}
                gap={0}>
                <SortableDnd
                    initialItems={boards}
                    renderItem={renderBoard}
                    onDragEnd={onDragEnd}
                    onItemClick={selectBoard}
                    containerStyle={{ flexWrap: "nowrap" }}
                    dragHandleStyle={{ cursor: "pointer" }}
                    disabled={isMobile}
                />
                <CreateBoardButton />
            </Group>
        </ScrollArea>
    );
};

export default Boards;