"use client";

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

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

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

export default BoardsMobile;