import React from 'react';
import Hook from '../../hook';
import { Button } from '@mui/material';
import { NoData } from '../../services';

type ShortcutMenu = Hook.RouteMenu & {
    label: string,
    path: string,
    module: string,
}

export interface ShortcutProps {
    routes: Hook.Routes,
    path: string,
}

export const Shortcut: React.FC<ShortcutProps> = ({ routes, path }) => {
    const [theme] = Hook.useTheme();
    const [language] = Hook.useLanguage();
    const [, navigate] = Hook.useRouter();
    const [shortcutMenu, setShortcutMenu] = React.useState<ShortcutMenu>();

    React.useEffect(() => {
        if (routes && routes.children) {
            const getSideMenu = (paths: Hook.Route): ShortcutMenu => {
                if (paths && routes.labels && routes.labels[language]) {
                    const splitPath = path.split('/').map(x => x.trim()).filter(x => x);
                    const currentPath = `/${splitPath.join('/')}`;
                    let route = paths;

                    for (let i = 0; !!route && i < splitPath.length; i++) {
                        const splitKey = `/${splitPath[i]}`;

                        if (route.children) {
                            route = route.children[splitKey];
                        }
                    }
                    if (route) {
                        if (route.menu && routes.labels[language][currentPath]) {
                            const label = routes.labels[language][currentPath];
                            const crumbroad: string[] = [];

                            do {
                                splitPath.pop();
                                const parentPath = `/${splitPath.join('/')}`;

                                crumbroad.push(`${routes.labels[language][parentPath]}`);
                            }
                            while (splitPath.length > 1)

                            return {
                                ...route.menu,
                                label,
                                module: crumbroad.filter(x => x).join('/'),
                                path: currentPath,
                            }
                        }
                    }
                }
                return NoData;
            }

            setShortcutMenu(
                getSideMenu({
                    children: !!routes.children && routes.children['/']
                        ? routes.children['/'].children
                        : routes.children,
                    component: NoData
                })
            );
        }
    }, [routes, path, language])


    const handleClick = (path: string) =>
        () => {
            if (path) {
                navigate(path)
            }
        }


    return (
        <>
            {
                shortcutMenu &&
                <div style={{ margin: '30px 15px 0px 0px' }}>
                    <Button
                        style={{
                            maxHeight: 60,
                            textTransform: 'none'
                        }}
                        onClick={handleClick(shortcutMenu.path)}>

                        <div
                            style={{
                                display: 'flex',
                                flexDirection: 'row',
                                alignItems: 'center',
                                height: '100%',
                                marginRight: '20px'
                            }}>
                            <shortcutMenu.icon color='primary' style={{ fontSize: 48 }} />
                            <div style={{
                                display: 'flex',
                                width: '230px',
                                flexDirection: 'column',
                                alignItems: 'flex-start'
                            }}>
                                <span
                                    style={{
                                        padding: '5px 5px 0px 15px',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap',
                                        overflow: 'hidden',
                                        fontSize: '1.1rem',
                                        color: theme.palette.text.primary
                                    }}>
                                    {shortcutMenu.label}
                                </span>
                                <span
                                    style={{
                                        padding: '0px 5px 5px 15px',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap',
                                        overflow: 'hidden',
                                        fontSize: '0.8rem',
                                        color: theme.palette.text.secondary
                                    }}>
                                    {shortcutMenu.module}
                                </span>
                            </div>
                        </div>
                    </Button>
                </div>
            }
        </>
    );
}