import React, { useContext, useState } from 'react';
import ThemeContext from '../../theme/ThemeContext';
import { StyledControlGroup } from './styled';

/**
 * TODO
 */
function ToolBarGroup (props) {

    const { children, orientation } = props;

    const theme = useContext(ThemeContext);

    const [activeControl, setActiveControl] = useState(undefined);
    
    const onActivate = (id) => {
        setActiveControl(id);
    };

    const renderChildren = (children) => {
        return React.Children.map(children,
            p => React.cloneElement(p, {
                onActivate: onActivate,
                active: p.props.id === activeControl ? true : false
            })
        );
    };

    return (
        <StyledControlGroup theme={theme} orientation={orientation}>
            { renderChildren(children) }
        </StyledControlGroup>
    );
}

ToolBarGroup.defaultProps = {
    orientation: 'vertical'
};

export default ToolBarGroup;
