import React, { useRef } from 'react';
import { Block } from '../../../';
import { twMerge } from 'tailwind-merge';
import style from '../../../style';
import { ChevronLeft16, ChevronRight16 } from '@carbon/icons-react';
import { useHover } from '../../../hooks/useHover';
import { Link } from 'react-router-dom';

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

const Sidebar: React.FC<SidebarProps> = (props) => {
    const { children, className, classes, homeLink, logoUrl, title, subtitle, minWidth, expanded, setExpanded } = props;

    const hoverRef = useRef(null);
    const isHover = useHover(hoverRef);

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

    return (
        <>
            <div ref={hoverRef} className={allClasses}>
                <Block
                    className={`flex flex-col flex-auto  transition-opacity duration-300 ease-in-out ${
                        expanded || isHover
                            ? 'opacity-100'
                            : ' opacity-0 absolute top-0 bottom-0 right-0 left-0 pointer-events-none '
                    }`}
                >
                    <Block className={twMerge(` ${style.sideBar.headline} ${classes?.headline} `)}>
                        <Link to={homeLink} className={twMerge(` ${style.sideBar.homeLink} ${classes?.homeLink} `)}>
                            {logoUrl && <img className={classes?.logo} src={logoUrl} alt="FieldNode" />}
                            {title && (
                                <Block className="flex flex-col ml-4">
                                    <span className="text-xl tracking-wider">{title}</span>
                                    {subtitle && <span className="text-xs opacity-50">{subtitle}</span>}
                                </Block>
                            )}
                        </Link>
                    </Block>

                    {children}
                </Block>
            </div>
            {setExpanded && (
                <Block className="relative flex-grow-0">
                    <Block
                        onClick={() => setExpanded(!expanded)}
                        className="absolute top-0 right-0 z-40 flex items-center justify-center p-0 mt-6 -mr-3 text-white transition-all duration-500 ease-in-out bg-gray-800 rounded-full cursor-pointer w-7 h-7 hover:bg-gray-900"
                    >
                        {expanded ? <ChevronLeft16 /> : <ChevronRight16 />}
                    </Block>
                </Block>
            )}
        </>
    );
};

Sidebar.defaultProps = {
    expanded: true,
    homeLink: '/',
    logoUrl: 'assets/logo.svg',
    title: 'FieldNode',
    subtitle: 'Digital Inventory',
    minWidth: 'w-8',
    classes: {
        logo: 'w-10',
    },
};

Sidebar.displayName = 'Sidebar';

export default Sidebar;
