import React from "react";
import ReactDOM from "react-dom";
import {
  HashRouter as Router,
  Switch,
  Route,
  Link,
  useHistory,
  useLocation,
  useParams,
} from "react-router-dom";
import { Header, Footer, DownModal, Login } from "../components";
import "./global.css";
import styles from "./style.less";
import { Component } from "react";

class LoginComponent extends Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      isSendingComponent: false,
      phoneNumber: "",
    };
  }
  login = () => {
    this.setState({
      isSendingComponent: true,
    });
    // const callback = () => {
    //   console.log(12121414);
    // };
    // Login.LoginP(callback);
  };
  closeLogin = () => {
    this.setState({
      isSendingComponent: false,
    });
  };

  inputChange = (e: any) => {
    this.setState({
      phoneNumber: e.target.value,
    });
  };
  render() {
    return (
      <div>
        <div onClick={this.login}>
          <button>Login</button>
        </div>

        <div>
          <input
            onChange={this.inputChange}
            maxLength={11}
            style={{
              marginTop: 10,
              backgroundColor: "#ccc",
            }}
          />
        </div>

        {/* <Login.LoginC
          // callback={this.LogIn}
          isPopup={this.state.isSendingComponent}
          phoneNumber={this.state.phoneNumber}
          closeNumberCodeHandle={this.closeLogin}
        /> */}
        <Login.LoginM
          // callback={this.LogIn}
          isPopup={this.state.isSendingComponent}
          closeNumberCodeHandle={this.closeLogin}
          isClosBtn={true}
          isSlientQuery={true}
          // loginTitle={"登录抽奖"}
        />
      </div>
    );
  }
}

class BasicExample extends Component<any, any> {
  render() {
    return (
      <Router>
        <div>
          <h1 style={{ fontSize: "42px" }}>Orcrist-Mobile Components: </h1>
          <ul>
            <li>
              <Link to="/header">Header</Link>
            </li>
            <li>
              <Link to="/Footer">Footer</Link>
            </li>
            <li>
              <Link to="/DownModal">DownModal</Link>
            </li>
            <li>
              <Link to="/login">login</Link>
            </li>
          </ul>

          <hr />

          {/*
            A <Switch> looks through all its children <Route>
            elements and renders the first one whose path
            matches the current URL. Use a <Switch> any time
            you have multiple routes, but you want only one
            of them to render at a time
          */}
          <Switch>
            <Route exact path="/" component={Header}></Route>
            <Route path="/header" component={Header}></Route>
            <Route path="/footer" component={Footer}></Route>
            <Route path="/DownModal" component={DownModal}></Route>
            <Route path="/login" component={LoginComponent}></Route>
          </Switch>
        </div>
      </Router>
    );
  }
}

// You can think of these components as "pages"
// in your app.

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

ReactDOM.render(<BasicExample />, document.getElementById("app"));