import React, { useContext } from 'react';
import { MenuUnfoldOutlined } from '@ant-design/icons';
import { DrawerToogleBar, DrawerToogleBarButton, DrawerToogleBarButtonDiv } from './Styled';
import { Tooltip } from 'antd';
import ThemeContext from '../../theme/ThemeContext';

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

    const { collapsed, onOpen } = props;

    const theme = useContext(ThemeContext);
    
    return (
        !collapsed ? null :
        <DrawerToogleBar>
            <DrawerToogleBarButtonDiv>
                <Tooltip title={"Abrir tabla de contenidos"} placement={"right"} color={theme.tooltipBackgroundColor}>
                    <DrawerToogleBarButton
                        onClick={onOpen}
                        type="primary" 
                        theme={theme}
                        icon={<MenuUnfoldOutlined style={{ fontSize: '16px'}}/>}>
                    </DrawerToogleBarButton>
                </Tooltip>
            </DrawerToogleBarButtonDiv>
        </DrawerToogleBar>
    );
};

export default ToggleDrawerBar;
