import React, {FunctionComponent, useState} from "react";
import {Route, Link, HashRouter,} from "react-router-dom";
import Button from '../ButtonExample';
import './index.scss';
import Introduction from "../Introduction";
import Modal from '../ModalExample';
import Form from '../FormExample';
import Grid from '../GridExample';
import Message from '../MessageExample';

import MyButton from "../../../lib/button";

const logo = require('../../logo.png');

interface WLinkProps {
  path: string,
  pageName: string,
  onClick: React.MouseEventHandler
}

// 为了实现点击 active 功能，我就得多写这么多代码。
const WLink: FunctionComponent<WLinkProps> = (props) => {
  return (
    <div onClick={props.onClick}>
      <Link className={props.pageName === props.path ? 'active' : ''} to={`/${props.path}`}>
        {props.children}
      </Link>
    </div>
  );
};

function App() {
  const getHashName = (): string => {
    return window.location.hash.split('/')[1];
  };

  const [pageName, setPageName] = useState(getHashName());
  const wLinkConfig = {
    pageName,
    onClick: () => {
      setPageName(getHashName());
    },
  };
  const onButtonClickHandler = () => {
    window.open('https://github.com/mysteryven/wen-design-react', 'blank')
  }
  return (
    <HashRouter>
      <div className="w-doc">
        <MyButton type="midnightBlue" className={"github-button"} onClick={onButtonClickHandler}>Open In Github</MyButton>
        <aside className="w-doc-aside">
          <ul>
            <li className="w-doc-logo-wrapper">
              <img src={logo} alt="logo" width={36} height={36}/>
              <p>UI Docs</p>
            </li>
            <li>
              <WLink path="" {...wLinkConfig}>Introduction</WLink>
            </li>
            <li>
              <WLink path="button" {...wLinkConfig}>Button</WLink>
            </li>
            <li>
              <WLink path="modal" {...wLinkConfig}>Modal</WLink>
            </li>
            <li>
              <WLink path="form" {...wLinkConfig}>Form</WLink>
            </li>
            <li>
              <WLink path="grid" {...wLinkConfig}>Grid</WLink>
            </li>
            <li>
              <WLink path="message" {...wLinkConfig}>Message</WLink>
            </li>
          </ul>
        </aside>
        <main className="w-doc-main">
          <Route path="/" exact component={Introduction}/>
          <Route path="/button" component={Button}/>
          <Route path="/modal" component={Modal}/>
          <Route path="/form" component={Form}/>
          <Route path="/grid" component={Grid}/>
          <Route path="/message" component={Message}/>
        </main>
      </div>
    </HashRouter>
  );
}

export default App;