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

// eslint-disable-next-line import/no-extraneous-dependencies
import { HashRouter, Route, Link, Switch, withRouter } from "react-router-dom";

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

const MenuWithRouter = withRouter(function MenuWithRouter({ location }) {
  const pathname = location && location.pathname;
  return (
    <Menu theme="dark" title="产品名称">
      <Menu.Item
        title="一级菜单"
        selected={!pathname || pathname === "/home"}
        render={children => <Link to="/home">{children}</Link>}
      />
      <Menu.SubMenu defaultOpened title="一级菜单">
        <Menu.Item
          title="二级菜单 - foo"
          selected={pathname.startsWith("/foo")}
          render={children => <Link to="/foo">{children}</Link>}
        />
        <Menu.Item
          title="二级菜单 - bar"
          selected={pathname.startsWith("/bar")}
          render={children => <Link to="/bar">{children}</Link>}
        />
      </Menu.SubMenu>
    </Menu>
  );
});

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

export default function MenuWithRouterExample() {
  return (
    <HashRouter>
      <Layout className="demo-layout-l">
        <Body>
          <Sider>
            <MenuWithRouter />
          </Sider>
          <Switch>
            <Route path="/home" component={Content} />
            <Route path="/foo" component={Content} />
            <Route path="/bar" component={Content} />
          </Switch>
        </Body>
      </Layout>
    </HashRouter>
  );
}
