import { IconButton } from '../../inputs';
import { Positions } from '../../styles';
import { StyledSideBar, StyledHeader } from './styled-sidebar';
import * as React from 'react';

interface Props {
    style?: React.CSSProperties;
    children?: React.ReactNode;
    show: boolean;
    title?: string;
    toggleSideBar: (value?: boolean) => void;
    anchor: Positions;
}

const SideBar = (props: Props) => {

    const show = props.show;

    if(!show){
        return <div></div>;
    }

    return(
        <StyledSideBar
            style={{...props.style}}
            anchor={props.anchor}
        >
            <StyledHeader>
                {props.title}
                <div>
                    <IconButton
                        icon='times'
                        onClick={props.toggleSideBar}
                    />
                </div>
            </StyledHeader>
            {props.children}
        </StyledSideBar>
    );
};

SideBar.defaultProps = {
    anchor: 'left',
};

export default SideBar;