import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Pond from "./Pond";
import SingleNode from "./SingleNode";

class Index extends React.Component {
  constructor(props) {
    super(props)

    this.state = {rpcUrl: "ws://127.0.0.1:1234/rpc/v0", rpcToken: ''}

    const initialState = JSON.parse(window.localStorage.getItem('saved-nodes'))
    if (initialState) {
      this.state.nodes = initialState
    } else {
      this.state.nodes = []
    }
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    window.localStorage.setItem('saved-nodes', JSON.stringify(this.state.nodes))
  }

  onAdd = () => {
    this.setState({addingNode: true})
  }

  update = (name) => (e) => this.setState({ [name]: e.target.value })

  tokenOk = () => {
    let m = this.state.rpcToken.match(/\.(.+)\./)
        // TODO: eww
    if(m && atob(m[1]) === '{"Allow":["read","write","sign","admin"]}') {
      return (
        <span>-Token OK-
          <div>
            <button onClick={this.addNode}>Add Node</button>
          </div>
        </span>
      )
    }
    return <span>-Expecting valid admin token-</span>
  }

  addNode = async () => {
    this.setState(p => ({nodes: [...p.nodes, {addr: this.state.rpcUrl, token: this.state.rpcToken}], addingNode: true}))
  }

  render() {
    return (
      <div>
        <div><Link to={"/app/pond"}>Open Pond</Link></div>
        <div>----------------</div>
        <div>
          <div>Managed Nodes:</div>
          {
            this.state.nodes.map((node, i) => <div>
              <span>{i}. {node.addr} <Link to={`/app/node/${i}`}>[OPEN UI]</Link></span>
            </div>)
          }
        </div>
        <a hidden={this.state.addingNode} href='#' onClick={this.onAdd}>[Add]</a>
        <div hidden={!this.state.addingNode}>
          <div>---------------</div>
          <div>
            + RPC:<input value={"ws://127.0.0.1:1234/rpc/v0"} onChange={this.update("rpcUrl")}/>
          </div>
          <div>
            Token (<code>lotus auth create-admin-token</code>): <input onChange={this.update("rpcToken")}/>{this.tokenOk()}
          </div>
        </div>
      </div>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <Router>
        <Route path="/" exact component={Index} />
        <Route path="/app/pond/" component={Pond} />
        <Route path="/app/node/:node" component={SingleNode} />
      </Router>
    )
  }
}

export default App