import React from 'react'

import { Row, Col, Inputs } from 'adminlte-2-react'
import { Tabs, Tab } from 'react-bootstrap'
import PropTypes from 'prop-types'
import CommandRouter from '../lib/commands'

import 'adminlte-2-react/src/adminlte/css/AdminLTE.css'
const { Text } = Inputs

let _this
class IPFSTabs extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      commandOutput: "Enter 'help' to see available commands."
    }
    _this = this
    // Starts ipfs control if there is a wallet registered already
    // console.log('props', props)

    if (props && props.ipfsControl) {
      this.ipfsControl = props.ipfsControl
      this.commandRouter = new CommandRouter({ ipfsControl: this.ipfsControl })
      // console.log('this.commandRouter: ', this.commandRouter)
    }
  }

  render () {
    const { commandOutput } = _this.state
    const { statusOutput, appStatusOutput } = _this.props

    return (
      <Row>
        <Col md={12}>
          <Tabs
            defaultActiveKey='status'
            id='ipfs-coord-tabs'
            className='mb-3 nav-tabs-custom'
          >
            <Tab eventKey='status' title='Status'>
              <Text
                id='statusLog'
                name='statusLog'
                inputType='textarea'
                labelPosition='none'
                rows={20}
                readOnly
                value={appStatusOutput}
                onChange={() => {
                  // Prevents DOM error
                }}
              />
            </Tab>
            <Tab eventKey='ipfs-coord' title='IPFS Coord'>
              <Text
                id='ipfsCoordLog'
                name='ipfsCoordLog'
                inputType='textarea'
                labelPosition='none'
                rows={20}
                readOnly
                value={statusOutput}
                onChange={() => {
                  // Prevents DOM error
                }}
              />
            </Tab>
            <Tab eventKey='command' title='Command'>
              <Text
                id='commandLog'
                name='commandLog'
                inputType='textarea'
                labelPosition='none'
                rows={20}
                readOnly
                value={`${commandOutput ? `${commandOutput}>` : '>'}`}
                onChange={() => {
                  // Prevents DOM error
                }}
              />
              <Text
                id='commandInput'
                name='commandInput'
                inputType='tex'
                labelPosition='none'
                value={this.state.commandInput}
                onChange={this.handleTextInput}
                onKeyDown={_this.handleCommandKeyDown}
              />
            </Tab>
          </Tabs>
        </Col>
      </Row>
    )
  }

  // Handles text typed into the input box.
  handleTextInput (event) {
    event.preventDefault()

    const target = event.target
    const value = target.value
    const name = target.name
    // console.log('value: ', value)

    _this.setState({
      [name]: value
    })
  }

  componentDidUpdate () {
    if (_this.state.commandOutput !== _this.props.commandOutput) {
      _this.setState({
        commandOutput: _this.props.commandOutput
      })
    }
  }

  /* START command handling functions */
  // Handles when the Enter key is pressed while in the chat input box.
  async handleCommandKeyDown (e) {
    if (e.key === 'Enter') {
      // _this.submitMsg()
      // console.log("Enter key");

      // Send a chat message to the chat pubsub room.
      // const now = new Date();
      // const msg = `Message from BROWSER at ${now.toLocaleString()}`
      const msg = _this.state.commandInput
      // console.log(`Sending this message: ${msg}`);

      // _this.handleCommandLog(`me: ${msg}`);

      // console.log('_this.commandRouter: ', _this.commandRouter)
      const outMsg = await _this.commandRouter.route(msg, _this.ipfsControl)

      if (outMsg === 'clear') {
        _this.props.handleCommandLog('')
      } else {
        _this.handleCommandLog(`\n${outMsg}`)
      }

      // Clear the input text box.
      _this.setState({
        commandInput: ''
      })
    }
  }

  // Adds a line to the terminal
  async handleCommandLog (msg) {
    try {
      // console.log("msg: ", msg);

      _this.props.handleCommandLog(msg)
      // Add a slight delay, to give the browser time to render the DOM.
      await this.sleep(250)

      // _this.keepScrolled();
      // _this.keepCommandScrolled()
    } catch (error) {
      console.warn(error)
    }
  }

  sleep (ms) {
    return new Promise(resolve => setTimeout(resolve, ms))
  }
}

IPFSTabs.propTypes = {}

IPFSTabs.propTypes = {
  handleCommandLog: PropTypes.func,
  commandOutput: PropTypes.string,
  statusOutput: PropTypes.string,
  appStatusOutput: PropTypes.string
}
export default IPFSTabs