import React from 'react';
import { Breadcrumbs, Typography, makeStyles } from '@material-ui/core';
import { Link as RouterLink, Link, Route, useHistory } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
const useStyles = makeStyles((theme) => ({
    link: {
        textDecoration: 'none',
        color: (props) => {
            var _a, _b;
            return props.color === 'primary'
                ? (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.getContrastText(theme.palette.primary.main)
                : (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.getContrastText(theme.palette.secondary.main);
        }
    }
}));
const SYSTEM_ROUTE_LABELS = [
    'inquiry',
    'page',
    'menupage',
    'reports',
    'virtual',
    'workflowtask'
];
export const BreadCrumbMenu = (props) => {
    const classes = useStyles(props);
    const { root, breadCrumbAltLabelList = [] } = props;
    const { t } = useTranslation();
    const history = useHistory();
    breadCrumbAltLabelList.forEach((crumb) => crumb.toLowerCase());
    const breadCrumbLabelList = [
        ...SYSTEM_ROUTE_LABELS,
        ...breadCrumbAltLabelList
    ];
    return (React.createElement(Route, null, ({ location }) => {
        var _a, _b;
        const pathnames = location.pathname.split('/').filter((x) => x);
        pathnames.forEach((name) => name.toLowerCase());
        // Is true if the 2nd last path part contains the word in the altLabelList
        const useLabel = breadCrumbLabelList.includes(pathnames[pathnames.length - 2]);
        // Update the last path part to use the menu label if there is one
        if (useLabel && ((_b = (_a = history === null || history === void 0 ? void 0 : history.location) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.label)) {
            pathnames[pathnames.length - 1] = history.location.state.label;
        }
        return (React.createElement(Breadcrumbs, { "aria-label": "Breadcrumb" }, React.createElement(Link, { color: "inherit", to: "/", className: classes.link }, t(root)), pathnames.map((value, index) => {
            if (!!useLabel && index === 0) {
                return null;
            }
            const last = index === pathnames.length - 1;
            const to = `/${pathnames.slice(0, index + 1).join('/')}`;
            const capitalValue = value[0].toUpperCase() + value.slice(1);
            return last ? (React.createElement(Typography, { className: classes.link, key: to }, t(capitalValue))) : (React.createElement(RouterLink, { to: to, key: to, className: classes.link }, t(capitalValue)));
        })));
    }));
};
//# sourceMappingURL=BreadCrumbMenu.js.map