import React from "react";

class LoginButton extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.checkValid = this.checkValid.bind(this);
  }

  checkValid() {
    let item = userDB.find((item) => {
      return item.username == this.props.username && item.password == this.props.password;
    });
    if (item != undefined) return true;
    else return false;
  }

  // step 4.2
  handleClick() {}

  render() {
    return <button onClick={() => this.handleClick()}>Login</button>;
  }
}

class Contents extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      topics: topicsDB,
    };
    this.handleTopicsChange = this.handleTopicsChange.bind(this);
  }

  // step 7
  handleTopicsChange(option) {}

  render() {
    const topics = this.state.topics;
    return (
      <div id="contents">
        <DropDownList handleTopicsChange={this.handleTopicsChange} />
        {
          // step 5
        }
      </div>
    );
  }
}

function DropDownList(props) {
  return (
    <div>
      <b>Choose one section: </b>

      {/* Step 6 */}
    </div>
  );
}

class Lab7App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false,
      loginName: "",
      inputUserName: "",
      inputUserPswd: "",
    };
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  // step 3
  handleInputChange(event) {
    let target = event.target;
    let name = target.name;
    let value = target.value;
    this.setState({ [name]: value });
  }

  handleStatusChange(newStatus, loginName) {
    this.setState({ isLogin: newStatus, loginName: loginName });
  }

  render() {
    if (!this.state.isLogin) {
      return (
        <div>
          <p>Fill in username and password and click the button to log in</p>
          <input type="text" name="inputUserName" placeholder="username" value={this.state.inputUserName} onChange={(e) => this.handleInputChange(e)} />

          <input type="password" name="inputUserPswd" placeholder="password" value={this.state.inputUserPswd} onChange={(e) => this.handleInputChange(e)} />

          {/* step 4.1  Render LoginButton */}
        </div>
      );
    } else {
      return (
        <div>
          <p>Welcome {this.state.loginName}!</p>
          <button>Logout</button> {/* step 4.3 */}
          <Contents />
        </div>
      );
    }
  }
}

const userDB = [
  { username: "Alex", password: "123" },
  { username: "Bob", password: "231" },
  { username: "Jack", password: "321" },
];

const topicsDB = [
  { section: "section-1", topic: "WWW" },
  { section: "section-1", topic: "HTML" },
  { section: "section-1", topic: "CSS" },
  { section: "section-2", topic: "JaveScript" },
  { section: "section-2", topic: "NodeJS" },
  { section: "section-2", topic: "MongoDB" },
  { section: "section-3", topic: "JQuery" },
  { section: "section-3", topic: "Vue" },
  { section: "section-3", topic: "React" },
];

export default Lab7App;
