import './boardView.css';

import { StructureType } from '@/api/types';
import { cn } from '@/lib/utils';

import {
    BoardViewSize,
    BoardViewSizeProvider,
    DEFAULT_BOARD_VIEW_SIZE,
    getBoardViewSizeTokens,
} from './boardViewSize';
import BoardColumn from './components/BoardColumn';

export type { BoardViewSize } from './boardViewSize';

export type BoardViewProps = {
    structure: StructureType | null,
    search: string | null,
    filter: any,

    collection: string,
    size?: BoardViewSize,
}

const BoardView = ({
    structure,
    search,
    filter,
    collection,
    size = DEFAULT_BOARD_VIEW_SIZE,
}: BoardViewProps) => {
    const tokens = getBoardViewSizeTokens(size);

    return (
        <BoardViewSizeProvider value={tokens}>
            <div className="board-view" data-size={size}>
                <div className={cn('board-view__columns', tokens.columnsGap)}>
                    {structure?.boardFilterPresets?.map((filterPreset) => (
                        <BoardColumn
                            key={filterPreset.key}
                            filterPreset={filterPreset}
                            search={search}
                            filter={filter}
                            collection={collection}
                            structure={structure}
                            size={size}
                        />
                    ))}
                </div>
            </div>
        </BoardViewSizeProvider>
    );
};

export default BoardView;
