import { Tab, Tabs } from "@mui/material"
import { Link, matchPath, useLocation } from "react-router-dom"

function useRouteMatch(patterns: readonly string[]) {
    const { pathname } = useLocation()

    for (let i = 0; i < patterns.length; i += 1) {
        const pattern = patterns[i]
        const possibleMatch = matchPath(pattern, pathname)
        if (possibleMatch !== null) {
            return possibleMatch
        }
    }

    return null
}

export default function NavTabs() {
    const routeMatch = useRouteMatch(['/', '/user', '/role']);
    const currentTab = routeMatch?.pattern?.path;

    return (
        <Tabs value={currentTab}>
            <Tab label="Главная" value="/" to="/" component={Link} />
            <Tab label="Пользователи" value="/user" to="/user" component={Link} />
            <Tab label="Роли" value="/role" to="/role" component={Link} />
        </Tabs>
    );

}