import * as React from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import { STRoute } from "../../components/routing/RouteBuilder";
import AdminUser from "./admin-user";
import AdminUsers from "./admin-users";

export type AdminAppDataProps = {
}
export type AdminAppActionProps = {
}

export type AdminAppProps = AdminAppDataProps & AdminAppActionProps;

const ROOT = "/Admin/app";
export const R_USERS = new STRoute<{ userId: number }>(`${ROOT}/users`, [{ key: "userId", optional: true }]);

//-- Alternative Declaration
//export const R_USERS = STRoute.AllOptional<{ userId: number }>(`${ROOT}/users`, "userId");

const AdminApp: React.FC<AdminAppProps> = (props) => {

    return (
        <div>
            <Router>
                <ul>
                    <Switch>
                        <Route path={R_USERS.RoutePath(true)} render={({ match }) => {
                            return (
                                <li>
                                    <Link to={R_USERS.RootLink()}>
                                        {`Users ${R_USERS.Params(match).userId}`}
                                    </Link>
                                </li>
                            );
                        }} />
                        <Route path={ROOT} render={() => (
                            <li>
                                <Link to={R_USERS.RootLink()}>
                                    {`Users`}
                                </Link>
                            </li>
                        )} />
                    </Switch>
                </ul>

                <div>
                    <div className={"pt-3 border-bottom border-right border-left px-1 px-lg-2"}>
                        <Switch>
                            <Route path={R_TAGS.RoutePath()} render={() => <AdminTags />} />
                            <Route path={R_USERS.RoutePath()} render={({ match }) => {
                                const { userId } = R_USERS.Params(match);
                                if (userId) {
                                    return <AdminUser userId={parseInt(userId)} />;
                                }
                                return <AdminUsers />
                            }} />
                            <Route path={ROOT} render={() => (
                                <div>
                                    <h3>{"Admin Portal"}</h3>
                                    <p>{"Welcome to the admin portal!"}</p>
                                </div>
                            )} >
                            </Route>
                        </Switch>
                    </div>
                </div>

            </Router>
        </div>
    );
}


export default AdminApp;