import React, { useEffect, useContext } from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import MapContext from '../../components/Map/MapContext';
import ToolBar from '../../components/Controls/ToolBar';
import ToolBarGroup from '../../components/Controls/ToolBarGroup';

/**
 * TODO
 */
function ControlsContainer (props) {
    const { children, position, orientation } = props;

    const { map } = useContext(MapContext);

    const collapsed = useSelector(state => state.main.sidebar.collapsed);
    const width = useSelector(state => state.main.sidebar.width);
    let sideBarMargin = collapsed ? '8px' : width + 8 + 'px;';

    useEffect(() => {
    }, [collapsed]);

    return (
        !map ? null : 
        <ToolBar sideBarMargin={sideBarMargin} position={position} orientation={orientation} collapsed={collapsed} map={map}>
            <ToolBarGroup orientation={orientation}>
            { children }
            </ToolBarGroup>
        </ToolBar>
    )
};

ControlsContainer.defaultProps = {
    position: 'top-right',
    orientation: 'vertical'
};

ControlsContainer.propTypes = {
    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
    ]),
    position: PropTypes.oneOf(['bottom-right', 'bottom-left', 'top-right', 'top-left']),
    orientation: PropTypes.oneOf(['vertical', 'horizontal'])
};

export default ControlsContainer;
