import React, { ReactElement } from "react";
import { Layout, Card, Menu } from "@tencent/tea-component";

// eslint-disable-next-line import/no-extraneous-dependencies
import { HashRouter, Route, Link, Switch, withRouter, match } from "react-router-dom";
import "@tencent/tea-component/dist/tea.css";
import routes from "./routes";

const { Body, Sider, Content: LayoutContent } = Layout;

const MenuWithRouter = withRouter(function MenuWithRouter({ location }) {
  const pathname = location && location.pathname;
  return (
    <Menu theme="dark" title="Gadmin2 demo@Tea">
      {routes.map(route => (
        <Menu.Item
          key={route.pathname}
          title={route.title}
          selected={!pathname || pathname === route.pathname}
          render={children => <Link to={route.pathname}>{children}</Link>}
        />
      ))}
    </Menu>
  );
});

function Content(component: ReactElement){
  return function Content({ match }:{match: match}) {
    const path = match && match.path;
    return (
      <LayoutContent>
        <LayoutContent.Header title={path} />
        <LayoutContent.Body>
          <Card>
            <Card.Body>{component}</Card.Body>
          </Card>
        </LayoutContent.Body>
      </LayoutContent>
    );
  }
}

export default function App() {
  return (
    <HashRouter>
      <Layout className="demo-layout-l">
        <Body>
          <Sider>
            <MenuWithRouter />
          </Sider>
          <Switch>
            {routes.map(route => {
              const Component = route.component;
              return (
                <Route path={route.pathname} key={route.pathname} component={Content(<Component />)} />
              );
            })}
          </Switch>
        </Body>
      </Layout>
    </HashRouter>
  );
}
