import React from 'react';

import Box from '@material-ui/core/Box';

import { makeStyles } from '@material-ui/core/styles';

const GroupBoxContext = React.createContext();

const groupingBoxProps = {
    bgcolor: 'background.paper',
    borderColor: 'text.primary',
    borderRadius: 'borderRadius',
    m: 1,
    border: 1,
};

const useStyles = makeStyles(theme => ({
    groupingboxtitle: {

    },
}));

export function GroupingBoxTitle(props) {
    const { children } = props;
    return children;
}

export function GroupingBoxItem(props) {
    const { children } = props;
    return children;
}

export function GroupingBox(props) {
    const classes = useStyles();
    const { children } = props;

    var title_elem = false;
    var content_elems = [];

    children.forEach(child => {
        if (child.type == GroupingBoxItem) {
            content_elems.push(child);
        } else if (child.type == GroupingBoxTitle) {
            if (title_elem) {
                throw new Error("A GroupingBox may only have one GroupingBoxTitle child.");
            }
            title_elem = child;
        }
    });

    if (!title_elem) {
        throw new Error("A GroupingBox must have at least one GroupingBoxTitle.");
    }

    return (
        <GroupBoxContext.Provider>
            <Box>
                <Box {...groupingBoxProps}>
                    <Box className={classes.groupingboxtitle}>
                        {title_elem}
                    </Box>
                    {content_elems}
                </Box>
            </Box>
        </GroupBoxContext.Provider>
    )
}