/********************************************************************************
 * Copyright (c) 2020 TypeFox and others
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/

import { FunctionComponent, ReactNode } from 'react';
import { Grid } from '@mui/material';
import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';

export const SearchListContainer: FunctionComponent<SearchListContainerProps> = props => {
    return (
        <Grid container direction='column' spacing={2} sx={{ flexWrap: 'nowrap', mb: 4 }}>
            <Grid style={{ flex: 1 }} item container direction='column' spacing={1} justifyContent='flex-end'>
                {props.searchContainer.map((searchField, key) => {
                    return (
                        <Grid key={key} container item justifyContent='center'>
                            <Grid item xs={8}>
                                {searchField}
                            </Grid>
                        </Grid>
                    );
                })}
            </Grid>
            <Grid style={{ flex: 4, overflow: 'hidden' }} item container justifyContent='center'>
                <Grid style={{ height: '100%' }} item xs={8}>
                    <DelayedLoadIndicator loading={props.loading} />
                    {props.listContainer}
                </Grid>
            </Grid>
        </Grid>
    );
};

export interface SearchListContainerProps {
    searchContainer: ReactNode[];
    listContainer: ReactNode;
    loading: boolean;
}
