import React from 'react';
import { useMediaQuery } from 'react-responsive'

const Sidebar = ({ children, collapse, control, className, otherStyles }) => {

    const isDesktopOrLaptop = useMediaQuery({
        query: '(min-width: 992px)'
    })

    const collapsedStyle = {
        // overflowX: 'hidden',
        flex: '0 1 auto',
        transform: 'translateX(-100%)',
        transformOrigin: '0 0',
        transition: 'all 0.5s ease-out',
        position: !isDesktopOrLaptop ? 'absolute' : 'static',
        zIndex: 50,
        // backgroundColor: 'snowwhite',
        height: '100%',
        overflowX: 'visible',
        ...otherStyles
    };
    const openStyle = {
        // overflowX: 'hidden',
        flex: '0 0 auto',
        transform: 'translateX(0)',
        transformOrigin: '0 0',
        transition: 'all 0.2s ease-out',
        position: !isDesktopOrLaptop ? 'absolute' : 'static',
        width: !isDesktopOrLaptop? '200px' : 'unset',
        boxShadow: !isDesktopOrLaptop? '0px 8px 10px rgb(0,0,0,0.3)' : 'unset',
        zIndex: 50,
        // backgroundColor: 'snowwhite',
        height: '100%',
        overflowX: 'visible',
        ...otherStyles
    };

    return (
        <>
            <div className={className} style={collapse && !isDesktopOrLaptop ? collapsedStyle : openStyle}>
                    {children}
            </div>
            <div onClick={() => control()} style={{
                display: !collapse? (isDesktopOrLaptop?'none':'block'): 'none',
                position: 'absolute',
                inset: 0,
                zIndex: 49,
            }}>

            </div>
        </>
    );
}

export default Sidebar;
