import React, { useState, useCallback, useEffect } from "react";
import { useDispatch, useSelector } from 'react-redux';
import { actionOpenSidebar, actionCloseSidebar } from "../../redux/actions/main";
import { Drawer, Divider, Image, Tabs} from 'antd';
import ToggleDrawerBar from '../../components/Drawer/ToggleDrawerBar';
/**
 * @component
 * @category Sidebar
 */
function DrawerContainer (props){

    const { t, logo, children } = props;

    const collapsedState = useSelector(state => state.main.sidebar.collapsed);
    const selectedState = useSelector(state => state.main.sidebar.selected);
    const width = useSelector(state => state.main.sidebar.width);

    const [collapsed, setCollapsed] = useState(collapsedState);
    const [selected, setSelected] = useState(selectedState);

    const dispatch = useDispatch();

    const onOpen = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
        dispatch(actionOpenSidebar());
    },[]);

    const onClose = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
        dispatch(actionCloseSidebar());
    },[]);

    useEffect(() => {
        setCollapsed(collapsedState);
        setSelected(selectedState);
    }, [collapsedState, selectedState]);
    
    return (
        <>
            <ToggleDrawerBar collapsed={collapsedState} onOpen={onOpen}/>
            <Drawer
                width={width}
                closable={true}
                visible={!collapsed}
                mask={false}
                zIndex={10000}
                placement={'left'}
                onClose={onClose}>
                <div style={{width: '100%', textAlign: 'center'}}>
                    <Image width={120} src={logo} />
                </div>
                <Divider style={{margin: '0px'}}/>
                <Tabs defaultActiveKey={selected} size="medium" type="card">
                    { children }
                </Tabs>
            </Drawer>
        </>
    );
};

export default DrawerContainer;