import * as React from 'react';
import { FocusStyleManager } from '@blueprintjs/core';
import * as XML from 'xml2js';
// import { Table } from '@blueprintjs/table';

FocusStyleManager.onlyShowFocusOnTabs();

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

class App extends React.Component<{}, null> {
  render() {
    return (
      <div>
        <nav className="pt-navbar pt-dark">
          <div className="pt-navbar-group pt-align-left">
            <button className="pt-button pt-minimal pt-icon-large pt-icon-edit"/>
            <div className="pt-navbar-heading">Lex Editor</div>
          </div>
        </nav>
        <LexEditor fileName="/new_es.xml"/>
      </div>
    );
  }
}

// interface LexEditorProps {
//   fileName: string;
// }

class LexEditor extends React.Component<any, null> {
  constructor(props: any) {
    super(props);
  }

  public handleOnChange(event: any): void {
      this.setState({ searchWord : event.target.value });
  }

  componentDidMount() {
    return fetch(this.props.fileName)
    .then((response) => response.text())
    .then((xmlString) => {
      XML.parseString(xmlString, (err, jsObj) => {
        this.setState({'lexdata': jsObj});
      });
    })
    .catch((error) => {
      console.error(error);
    });
  }
  render() {
    return (
      <div className="pt-input-group">
        <span className="pt-icon pt-icon-search"/>
        <input
          className="pt-input"
          type="search"
          placeholder="Search input"
          dir="auto"
          onChange = {e => this.handleOnChange(e)}
        />
      </div>
    );
  }
}

export default App;