import _ from 'lodash';

import { StructureType } from '@/api/types';
import { RowCSS } from '@/components/CollectionFields/components/GridCss';

import VizItem from './VizItem/VizItem';

type VizViewProps = {
    structure: StructureType | null,
    search: string | null,
    filter: any,
    pipeline: any,
    collection: string,
}

const VizView = ({ structure, search, filter, pipeline, collection }: VizViewProps) => {

    if (!structure) return <></>;

    return <div
        className="rounded-md  overflow-auto relative"
        style={{
            //    height: window.innerHeight - headerHeight - 100,

        }}
    >

        <RowCSS gap={12} className="p-1">

            {_.map(structure.items, (item) => {

                return <VizItem
                    key={item.key}
                    structure={item}
                    collection={collection}
                    search={search}
                    filter={filter}
                    pipeline={pipeline} />
            })}
        </RowCSS>

        <div
            className='h-20'
        ></div>

    </div>
}

export default VizView;