import { useRef } from 'react';
import { Block, Button } from '../../../';
import { twMerge } from 'tailwind-merge';
import style from '../../../style';
import { ChevronLeft, ChevronRight } from '@carbon/icons-react';

export interface SidebarProps {
    logo?: React.ReactNode;
    expanded?: boolean;
    setExpanded?: React.Dispatch<React.SetStateAction<boolean>>;
    className?: string;
    minWidth?: string;
    classes?: {
        root?: string;
        headline?: string;
    };
    children?: React.ReactNode;
    bottomMenu?: React.ReactNode;
}

const Sidebar: React.FC<SidebarProps> = (props) => {
    const { children, bottomMenu, className, classes, logo, minWidth, expanded, setExpanded } = props;

    const hoverRef = useRef(null);

    const allClasses = twMerge(
        `${style.sideBar.root} ${classes?.root} ${className ? className : ''} ${expanded ? 'w-full' : `${minWidth} `}`,
    );

    return (
        <>
            <div ref={hoverRef} className={allClasses}>
                <Block className={`flex flex-col flex-auto`}>
                    <Block className={twMerge(` ${style.sideBar.headline} ${classes?.headline} `)}>{logo}</Block>

                    {children}
                    {setExpanded && (
                        <Block className="flex flex-col justify-end flex-auto">
                            {expanded ? (
                                <Button
                                    variation="secondary"
                                    className="py-3 pl-6 pr-4 space-x-3 text-opacity-80"
                                    onClick={() => setExpanded(!expanded)}
                                >
                                    <ChevronLeft size={20} />
                                    <span className="text-sm text-opacity-80">Collapse sidebar</span>{' '}
                                </Button>
                            ) : (
                                <Button variation="secondary" onClick={() => setExpanded(!expanded)} className="p-3">
                                    <ChevronRight size={20} />
                                </Button>
                            )}
                        </Block>
                    )}
                    {bottomMenu}
                </Block>
            </div>
        </>
    );
};

Sidebar.defaultProps = {
    expanded: true,
    minWidth: 'w-8',
};

Sidebar.displayName = 'Sidebar';

export default Sidebar;
